史萊姆論壇

返回   史萊姆論壇 > 專業主討論區 > 程式語言討論區
忘記密碼?
註冊帳號 論壇說明 標記討論區已讀

歡迎您來到『史萊姆論壇』 ^___^

您目前正以訪客的身份瀏覽本論壇,訪客所擁有的權限將受到限制,您可以瀏覽本論壇大部份的版區與文章,但您將無法參與任何討論或是使用私人訊息與其他會員交流。若您希望擁有完整的使用權限,請註冊成為我們的一份子,註冊的程序十分簡單、快速,而且最重要的是--註冊是完全免費的!

請點擊這裡:『註冊成為我們的一份子!』

Google 提供的廣告


發文 回覆
 
主題工具 顯示模式
舊 2015-01-02, 03:21 AM   #1
038353256
註冊會員
榮譽勳章

勳章總數
UID - 368439
在線等級: 級別:0 | 在線時長:0小時 | 升級還需:5小時
註冊日期: 2014-12-29
文章: 1
精華: 0
現金: 1 金幣
資產: 1 金幣
預設 程式 - 請問HTML5如何寫1A2B的小遊戲

請問有人寫1A2B的小遊戲嗎 使用HTML5的
可供小弟參考一下嗎 盡量有完整的程式
038353256 目前離線  
送花文章: 0, 收花文章: 0 篇, 收花: 0 次
回覆時引用此帖
舊 2015-03-05, 05:53 PM   #2 (permalink)
註冊會員
 
arnold0613 的頭像
榮譽勳章
UID - 198322
在線等級: 級別:13 | 在線時長:248小時 | 升級還需:4小時級別:13 | 在線時長:248小時 | 升級還需:4小時級別:13 | 在線時長:248小時 | 升級還需:4小時
註冊日期: 2005-06-08
VIP期限: 2011-04
文章: 203
精華: 0
現金: 21 金幣
資產: 131988 金幣
預設

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="canvasOne" width="200" height="300">
your browser does support HTML5 canves.
</canvas>

<script type="text/javascript">


var theCanvas=document.getElementById("canvasOne");
context=theCanvas.getContext("2d");
window.addEventListener("keyup",GameSatrInp,true);
//遊戲數字
var GameString=createGameString();
//遊戲次數
var PlayGame=10;
//猜次數
var PlayQun=0;
//輸入字串
var inpStr=[];
//輸入過字串
var GuessStr=[];
//結果字串
var resultStr=[];
//ascii碼
var asciiOne=[48,49,50,51,52,53,54,55,56,57];
var asciiTwo=[96,97,98,99,100,101,102,103,104,105];
//遊戲結束
var GameOver=false;
//產生畫面
drawIndex();
console.log(GameString.join(''));



function GameSatrInp(e){
if(e.keyCode==13)
{
window.removeEventListener("keyup",GameSatrInp);
window.addEventListener("keyup",eventKey,true);
draw();
}
}

//遊戲操作
function eventKey(e){
if(!GameOver)
{
//輸入ascii碼
var AsciiCode=e.keyCode;
//輸入的字
var keyWord;

if(48<=AsciiCode && AsciiCode<=57){
keyWord=asciiOne.indexOf(AsciiCode);

}else if(96<=AsciiCode && AsciiCode<=105){
keyWord=asciiTwo.indexOf(AsciiCode);

}else if(27==AsciiCode){
keyWord="esc";
}else if(13==AsciiCode){
keyWord="enter";
}

if(inpStr.length<4 && 0<=keyWord && keyWord<=9){
checkInpString(keyWord);
draw();
}
if(keyWord=="esc" && inpStr.length>0&&inpStr.length<=4){
inpStr.pop();
draw();
}
if(keyWord=="enter" && inpStr.length==4 && GuessStr.length<10){
checkGame();
}

}
}

//判斷1A2B
function checkGame(){
var a=0;
var b=0;
for(var i=0;i<GameString.length;i++){
for(var j=0;j<inpStr.length;j++){
if(inpStr[j]==GameString[i])
{
if(i==j){
b++;
}else
{
a++;
}
}
}
}
if(b==4){
drawWin();
console.log("win");
GameOver=true;

}else{
if(PlayQun==9){
drawLose();
console.log("GameOver");
}else{
resultStr.push(a+"A"+b+"B");
GuessStr.push(inpStr.join(''));
inpStr=[];
PlayQun++;
draw();
}
}
}

//判斷輸入數字重複
function checkInpString(keyWord){
if(inpStr.length==0)
{
inpStr.push(keyWord);
}else{
var a=true;
for(var i=0;i<inpStr.length;i++){
if(inpStr[i]==keyWord){
a=false;
}
}
if(a)
{
inpStr.push(keyWord);
}
}
}


//開始頁面
function drawIndex(){
//背景
context.fillStyle ="#FFC991";
context.fillRect(0, 0, 200, 300);
//標題
context.fillStyle ="#109910";
context.font= "40px _sans";
context.fillText("1A2B",45,45 );
//說明
context.fillStyle ="#109910";
context.font= "18px _sans";
context.fillText("說明:",10,70 );
context.fillStyle ="#109910";
context.font= "14px _sans";
context.fillText("A:代表猜中數字但位置不正確",10,90 );
context.fillStyle ="#109910";
context.font= "14px _sans";
context.fillText("B:代表猜中數字且位置不正確",10,110 );
context.fillStyle ="#109910";
context.font= "14px _sans";
context.fillText("謎底為4個不重複數字組成",10,130 );
context.fillStyle ="#109910";
context.font= "14px _sans";
context.fillText("有10次機會",10,150 );

context.fillStyle ="#109910";
context.font= "18px _sans";
context.fillText("操作說明:",10,190 );
context.fillStyle ="#109910";
context.font= "14px _sans";
context.fillText("限定輸入0~9數字",10,210 );
context.fillStyle ="#109910";
context.font= "14px _sans";
context.fillText("\"ESC\"為後退鍵",10,230 );
context.fillStyle ="#109910";
context.font= "14px _sans";
context.fillText("\"Enter\"為確定鍵",10,250 );

context.fillStyle ="#ffffff";
context.font= "18px _sans";
context.fillText("Push \"Enrter\" to start",10,290 );

}
//產生畫面
function draw(){
//背景
context.fillStyle ="#ffffaa";
context.fillRect(0, 0, 200, 300);
//標題
context.fillStyle ="#109910";
context.font= "18px _sans";
context.fillText("輸入數字",10,30 );
context.fillStyle ="#109910";
context.font= "18px _sans";
context.fillText("結果提示",120,30 );
//輸入過字串
var GuessStrX=10;
var GuessStrY=50;
for(var i=0;i<GuessStr.length;i++){
context.fillStyle ="#109910";
context.font= "18px _sans";
context.fillText(GuessStr[i],GuessStrX,GuessStrY);
GuessStrY+=20;
}
//提示結果
var resultStrX=120;
var resultStrY=50;
for(var i=0;i<resultStr.length;i++){
context.fillStyle ="#109910";
context.font= "18px _sans";
context.fillText(resultStr[i],resultStrX,resultStrY);
resultStrY+=20;
}
//輸入字串
var inpStrX=60;
var inpStrY=270;
for(var i=0;i<inpStr.length;i++){
context.fillStyle ="#109910";
context.font= "30px _sans";
context.fillText(inpStr[i],inpStrX,inpStrY);
inpStrX+=20;
}

}

function Restart(e){
if(e.keyCode==13){
context.fillStyle ="#ffffff";
context.fillRect(0, 0, 200, 300);
window.location.reload();
}
}
//勝利畫面
function drawWin(){
context.fillStyle ="#ffffaa";
context.fillRect(0, 0, 200, 300);
context.fillStyle ="#109910";
context.font= "30px _sans";
context.fillText("恭喜你猜中了",10,65 );
context.fillStyle ="#109910";
context.font= "20px _sans";
context.fillText(GameString.join(''),70,150);
context.fillStyle ="#73FDFF";
context.font= "16px _sans";
context.fillText("Push \"Enrter\" to Restart",10,290 );

window.removeEventListener("keyup",eventKey);
window.addEventListener("keyup",Restart,true);
}

//失敗畫面
function drawLose(){
context.fillStyle ="#ffffaa";
context.fillRect(0, 0, 200, 300);
context.fillStyle ="#109910";
context.font= "30px _sans";
context.fillText("抱歉你失敗了",10,65 );
context.fillStyle ="#109910";
context.font= "20px _sans";
context.fillText(GameString.join(''),70,150);
context.fillStyle ="#73FDFF";
context.font= "16px _sans";
context.fillText("Push \"Enrter\" to Restart",10,290 );

window.removeEventListener("keyup",eventKey);
window.addEventListener("keyup",Restart,true);
}
//產生不重複的遊戲自串
function createGameString(){
var str=[];
var strArray=["0","1","2","3","4","5","6","7","8","9"];
while(str.length<4){
var index=Math.floor(Math.random()* strArray.length);
str.push(strArray[index]);
strArray.splice(index,1);
}
return str;
}
</script>
</body>
</html>
arnold0613 目前離線  
送花文章: 0, 收花文章: 12 篇, 收花: 73 次
回覆時引用此帖
有 2 位會員向 arnold0613 送花:
a471 (2015-03-07),power_ful55 (2016-06-15)
感謝您發表一篇好文章
發文 回覆


主題工具
顯示模式

發表規則
不可以發文
不可以回覆主題
不可以上傳附加檔案
不可以編輯您的文章

論壇啟用 BB 語法
論壇啟用 表情符號
論壇啟用 [IMG] 語法
論壇禁用 HTML 語法
Trackbacks are 禁用
Pingbacks are 禁用
Refbacks are 禁用


所有時間均為台北時間。現在的時間是 06:31 PM


Powered by vBulletin® 版本 3.6.8
版權所有 ©2000 - 2018, Jelsoft Enterprises Ltd.


SEO by vBSEO 3.6.1