史萊姆論壇 - 請問HTML5如何寫1A2B的小遊戲

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