canvas猜数游戏 

  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>

 

posted @ 2017-07-17 15:08  橙云生  阅读(250)  评论(0)    收藏  举报