程式 - 請問HTML5如何寫1A2B的小遊戲

038353256 · 2015-01-02, 03:21 AM

請問有人寫1A2B的小遊戲嗎使用HTML5的
可供小弟參考一下嗎盡量有完整的程式

arnold0613 · 2015-03-05, 05:53 PM

<!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>

2015-01-02, 03:21 AM	#1
038353256 註冊會員榮譽勳章勳章總數 UID - 368439 在線等級: 註冊日期: 2014-12-29 文章: 1 精華: 0 現金: 1 金幣資產: 1 金幣	程式 - 請問HTML5如何寫1A2B的小遊戲請問有人寫1A2B的小遊戲嗎使用HTML5的可供小弟參考一下嗎盡量有完整的程式

	送花文章: 0, 收花文章: 0 篇, 收花: 0 次

2015-03-05, 05:53 PM	#2 (permalink)
arnold0613 註冊會員榮譽勳章勳章總數2 UID - 198322 在線等級: 註冊日期: 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>

	送花文章: 0, 收花文章: 12 篇, 收花: 73 次

Google 提供的廣告