欢迎登录

canvas学习记录(一)----实现猜数字游戏

:2018-10-06    :299 次   :15855 字   

实验目的: 

The player’s job is to guess the number that the computer has chosen randomly from 10 to 99. The game keeps track of how many guesses the player has made, lists the numbers he has already guessed, and tells the player whether he needs to guess bigger or smaller.

实验过程:

注:实验过程我会分析代码,拆分主要部分来注释。

1.随机数的生成在10-99的范围

  //随机数范围在[Min,Max]
      function RandomNum(Min, Max) {
        var Range = Max - Min;
        var Rand = Math.random();
        var num = Min + Math.round(Rand * Range);
        return num;
      }

2.输入框的定义和输入值


<textarea id="number"></textarea>    //定义一个输入框
var digit = document.getElementById('number').value;  //获取输入值

3.按钮事件

<input type="button" id="guessbtn"onclick="checknum()" value="猜" />   //定义按钮
  //进行按钮猜的点击事件
      function checknum() {
        if (guess && guess.gameOver) {
          Debugger.log("游戏结束.>>");
          return;
        }
        var digit = document.getElementById('number').value;   //获取猜数
        guess.guesses++;
        guess.numGuessed.push(digit); 
        if (parseInt(digit) === guess.guessNum) {
          guess.gameOver = true;
        } else {
          if (parseInt(digit) > guess.guessNum) {
            guess.hightOrLower = "大了.";
          } else {
            guess.hightOrLower = "小了.";
          }
        }
        drawScreen(); 
      }

4.画布定义和实现


<canvas id="myCanvas" width="500" height="300">浏览器不支持html5 canvas</canvas> //定义画板

 //刷新画布
      function drawScreen() {
        //
        context.fillStyle = "#fff";
        context.fillRect(0, 0, 500, 300); 
        context.strokeStyle = "#000000"; 
        context.strokeRect(5, 5, 490, 290); 
        context.textBaseline = "top"; 
        context.fillStyle = "#ff0000"; 
        context.font = "20px 宋体"; 
        context.fillText(guess.message, 150, 10);
        context.fillText("Guesses:" + guess.guesses, 200, 40);
        context.fillText("Higher or Lower:" + guess.hightOrLower, 30, 100);
        context.fillText("已猜数字:" + guess.numGuessed, 10, 260);
        //游戏结束
        if (guess.gameOver) {
          context.fillStyle = "#ff0000";
          context.font = "40px 宋体";
          context.fillText("恭喜你,答对了!", 120, 150);
        }
      }
      //游戏开始
      function GameStart() {
        var myCanvas = document.getElementById("myCanvas");
        context = myCanvas.getContext("2d");
        Debugger.log("开始渲染>>");
        initGame();
      }



5.游戏初始化定义


  //初始化数据
   function Game() {
        this.guessNum = 0;
        this.pressNum = 0; 
        this.numGuessed; 
        this.guesses = 0; 
        this.gameOver = false;
        this.message = "猜数字游戏,数字从10-99.";
        this.hightOrLower = "";
      }
  //初始化游戏相关信息,并返回Game对象
      function initGame() {
        Debugger.log("初始化游戏设置>>");
        guess = new Game();
        guess.guessNum = RandomNum(10, 100);
        Debugger.log("此次生成的随机数:" + guess.guessNum);
        guess.guesses = 0; 
        guess.gameOver = false;
        guess.hightOrLower = "";
        guess.numGuessed = [];
        drawScreen(); 
      }


全部代码:


<!DOCTYPE html>
<html>
  <head>
    <title>猜数字</title>
    <meta charset="utf-8">
    <style type="text/css">#number{ height: 25px; width:100px; text-align: center; line-height: 25px; font-size:14px; position:absolute; left:340px; top:260px; } #guessbtn{ height: 30px; width:30px; vertical-align: middle; text-align: center; line-height: 20px; position:absolute; left:450px; top:260px; }</style>
    <script type="text/javascript">
  var guess = null;
      var context = null;
  //后台监控
      var Debugger = (function() {
        this.log = function(message) {
          try {
            console.log(message);
          } catch(e) {
     }
        }
        return this;
      })();
        //刷新画布
      function drawScreen() {
        //
        context.fillStyle = "#fff";
        context.fillRect(0, 0, 500, 300); 
        context.strokeStyle = "#000000"; 
        context.strokeRect(5, 5, 490, 290); 
        context.textBaseline = "top"; 
        context.fillStyle = "#ff0000"; 
        context.font = "20px 宋体"; 
context.fillText("时间:"+guess.today.toLocaleString(),120,10);
        context.fillText(guess.message, 150, 40);
        context.fillText("Guesses:" + guess.guesses, 200, 70);
        context.fillText("Higher or Lower:" + guess.hightOrLower, 30, 120);
        context.fillText("已猜数字:" + guess.numGuessed, 10, 260);
        //游戏结束
        if (guess.gameOver) {
          context.fillStyle = "#ff0000";
          context.font = "40px 宋体";
          context.fillText("恭喜你,答对了!", 120, 150);
        }
      }
  //随机数范围
      function RandomNum(Min, Max) {
        var Range = Max - Min;
        var Rand = Math.random();
        var num = Min + Math.round(Rand * Range);
        return num;
      }      
  //进行按钮猜的点击事件
      function checknum() {
        if (guess && guess.gameOver) {
          Debugger.log("游戏结束.>>");
          return;
        }
        var digit = document.getElementById('number').value;
        guess.guesses++;
        guess.numGuessed.push(digit); 
        if (parseInt(digit) === guess.guessNum) {
          guess.gameOver = true;
        } else {
          if (parseInt(digit) > guess.guessNum) {
            guess.hightOrLower = "大了.";
          } else {
            guess.hightOrLower = "小了.";
          }
        }
        drawScreen(); 
      }
  //初始化数据
   function Game() {
    this.today=null;
        this.guessNum = 0;
        this.pressNum = 0; 
        this.numGuessed; 
        this.guesses = 0; 
        this.gameOver = false;
        this.message = "猜数字游戏,数字从10-99.";
        this.hightOrLower = "";
      }
  //初始化游戏相关信息,并返回Game对象
      function initGame() {
        Debugger.log("初始化游戏设置>>");
        guess = new Game();
guess.today=new Date();
        guess.guessNum = RandomNum(10, 100);
        Debugger.log("此次生成的随机数:" + guess.guessNum);
        guess.guesses = 0; 
        guess.gameOver = false;
        guess.hightOrLower = "";
        guess.numGuessed = [];
        drawScreen(); 
      }
  //游戏开始
      function GameStart() {
        var myCanvas = document.getElementById("myCanvas");
        context = myCanvas.getContext("2d");
        Debugger.log("开始渲染>>");
        initGame();
      }
      window.addEventListener("load", GameStart, false);</script>
  </head>
  <body>
    <canvas id="myCanvas" width="500" height="300">浏览器不支持html5 canvas</canvas>
    <textarea id="number"></textarea>
    <input type="button" id="guessbtn"onclick="checknum()" value="猜" /></body>
</html>



效果图:


2018100601.png

    暂无评论,快来抢沙发吧!
×