1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>猜数</title> 6 </head> 7 <body> 8 9 <canvas id="box" width="500" height="300"></canvas> 10 <form> 11 <input type="text" id="guessValue" placeholder="port Canvas Image"> 12 <button id="createImageData">猜猜看?!</button> 13 </form> 14 <script> 15 var guesses = 0; 16 var message = "Guess the letter from a(lower) to Z(higher)"; 17 var letters = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"]; 18 var today = new Date(); 19 var letterToGuess = ''; 20 var higherOrLower=''; 21 var letterGuessed; 22 var gameOver = false; 23 24 function initGame() { 25 var letterIndex = Math.floor(Math.random() * letters.length); 26 letterToGuess = letters[letterIndex]; 27 guess = 0; 28 letterGuessed = []; 29 gameOver = false; 30 window.addEventListener("keydown", eventKeyPressed, true); 31 drawScreen(); 32 var formElement = document.querySelector("#createImageData"); 33 formElement.addEventListener("click",createImageDataPressed,false); 34 } 35 36 function eventKeyPressed(e){ 37 if(!gameOver) { 38 var letterPressed = String.fromCharCode(e.keyCode); 39 letterPressed = letterPressed.toLowerCase(); 40 guesses++; 41 letterGuessed.push(letterPressed); 42 if (letterPressed == letterToGuess) { 43 gameOver = true; 44 } else { 45 letterIndex = letters.indexOf(letterToGuess); 46 guessIndex = letters.indexOf(letterPressed); 47 console.log(guessIndex); 48 if (guessIndex < 0) { 49 higherOrLower = "That is not a letter!" 50 } else if (guessIndex > letterIndex) { 51 higherOrLower = "Lower"; 52 } else { 53 higherOrLower = "higher"; 54 } 55 } 56 drawScreen(); 57 } 58 } 59 var canvas = document.querySelector("#box"); 60 var ctx = canvas.getContext("2d"); 61 function drawScreen(){ 62 //背景 63 ctx.fillStyle = "#ffffaa"; 64 ctx.fillRect(0,0,500,300); 65 //边框 66 ctx.strokeStyle = "#000000"; 67 ctx.strokeRect(5,5,490,290); 68 ctx.textBaseline = "top"; 69 //日期 70 ctx.fillStyle = "#000000"; 71 ctx.font = "10px Sans-Serif"; 72 ctx.fillText(today,150,10); 73 //消息 74 ctx.fillStyle = "#ff0000"; 75 ctx.font = "14px Sans-serif"; 76 ctx.fillText(message,125,30); 77 78 //猜的次数 79 ctx.fillStyle = "#109910"; 80 ctx.font = "16px Sans-serif"; 81 ctx.fillText("guess: "+guesses+"次！",215,50); 82 //显示higher或lower 83 ctx.fillStyle = "#000"; 84 ctx.font = "16px Sans-Serif"; 85 ctx.fillText("Higher or Lower: "+higherOrLower,150,125); 86 //猜过的字母 87 ctx.fillStyle = "#ff0000"; 88 ctx.font = "16px Sans-Serif"; 89 ctx.fillText("Letters Guessed: "+letterGuessed.toString(),10,260); 90 if(gameOver){ 91 ctx.fillStyle = "#ff0000"; 92 ctx.font = "40px _sans-serif"; 93 ctx.fillText("You got it!",150,180); 94 } 95 } 96 function createImageDataPressed(e){ 97 window.open(canvas.toDataURL(),"canvasImage","left=0,top=0,width="+canvas.width +",height="+canvas.height +",toolbar=0,resizeable=0"); 98 } 99 initGame(); 100 </script> 101 </body> 102 </html>