JavaScript小游戏实例：简单的键盘练习 / 开普饭

键盘是一种常用的输入设备，灵活熟练地使用键盘进行输入是计算机用户需掌握的一门基本功。下面我们编写一个简单的键盘练习游戏。

1．刺破气泡交互式小动画

在编写简单的键盘练习游戏之前，先设计一个简单地刺破气泡交互式小动画。

在面板底部逐个上升一些气泡，用鼠标在某个气泡上单击，该气泡被刺破，刺破后的小气泡逐渐消散在面板中。交互式效果如图1所示。

图1 刺破气泡交互式动画

一个气泡可分为两个状态：（1）气泡从面板底部上升；（2）气泡被鼠标单击刺破成小气泡或气泡上升越过了面板顶部消散了。

为此抽象出两个对象类：Bubbles和miniBubbles。其中，Bubbles用于表示一个未被刺破的气泡，miniBubbles用于表示一个气泡刺破后得到的逐渐消散的小气泡。

Bubbles对象类定义6个属性：表示气泡圆心的坐标（x,y）、气泡的半径radius、上升时垂直方向的位移改变量ySpeed、气泡上升加速度gravity和气泡颜色color。

坐标属性值y的初始值取画布的高度，表示气泡从游戏面板底部开始上升，其余各属性的初始值采用随机数确定或直接指定。具体定义如下：

function Bubbles()

{

this.x = rand(30,canvas.width - 30);

this.y = canvas.height;

this.radius = rand(15, 30);

this.color ='rgba(255, 255, 255, 0.75)';

this.ySpeed= Math.random() * 2;

this.gravity = 0.01;

}

Bubbles对象类定义2个方法：绘制气泡的方法draw()、气泡上升时坐标改变方法update()。

miniBubbles对象类定义8个属性：表示小气泡圆心的坐标（x,y）、小气泡半径radius、散开时水平和垂直方向的位移改变量xSpeed和ySpeed、小气泡的填充color、小气泡的减速度gravity、小气泡的存活时间timeToLive。具体定义如下：

function miniBubbles(x,y,radius)

{

this.x = x;

this.y = y;

this.radius = radius;

this.color = 'rgba(255, 255, 255, 0.5)';

this.xSpeed=(Math.random() - 0.5) * 0.6;

this.ySpeed=(Math.random() - 1) * 0.5;

this.gravity = -0.03;

this.timeToLive = 100;

}

miniBubbles对象类定义2个方法：绘制小气泡的方法draw()、小气泡位置改变改变方法update()。小气泡每次改变位置后，timeToLive减1，当timeToLive值等于0时，从小气泡数组中删除该小气泡，表示该小气泡已消亡。

定义两个数组var bubbles = [];和 var minibubbles = [];分别存储未刺破的大气泡对象和大气泡刺破后散开的小气泡。

为画布添加鼠标按下事件监控canvas.addEventListener('mousedown', function(){ });，在事件处理函数中查找鼠标单击的气泡，然后将该气泡从bubbles数组中删除，向minibubbles数组中添加若干个散开的小气泡。

完整的HTML代码如下。

<html>
<head>
<title>刺破气泡小游戏</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
   var canvas = document.getElementById('myCanvas');
   var ctx = canvas.getContext('2d');
   canvas.height = innerHeight;
   canvas.width = innerWidth;
   function rand(min, max)
   {
      return Math.floor(Math.random() * (max - min + 1) + min);
   }
   function Bubbles()
   {
      this.x = rand(30,canvas.width - 30);
      this.y = canvas.height;
      this.radius = rand(15, 30);
      this.color ='rgba(255, 255, 255, 0.75)';
      this.ySpeed= Math.random() * 2;
      this.gravity = 0.01;
   }
   Bubbles.prototype.draw = function ()
   {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
      ctx.fillStyle = this.color;
      ctx.fill();
      ctx.closePath();
   }
   Bubbles.prototype.update = function ()
   {
      this.y -= this.ySpeed;
      if (this.y - this.radius > 0)
         this.ySpeed += this.gravity;
      this.draw();
   }
   function miniBubbles(x,y,radius)
   {
      this.x = x;
      this.y = y;
      this.radius = radius;
      this.color = 'rgba(255, 255, 255, 0.5)';
      this.xSpeed=(Math.random() - 0.5) * 0.6;
      this.ySpeed=(Math.random() - 1) * 0.5;
      this.gravity = -0.03;
      this.timeToLive = 100;
   }
   miniBubbles.prototype.draw = function () {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
      ctx.fillStyle = this.color;
      ctx.fill();
      ctx.closePath();
   }
   miniBubbles.prototype.update = function () {
      if (this.y - this.radius > 0)
         this.ySpeed += this.gravity;
      this.x += this.xSpeed;
      this.y += this.ySpeed;
      this.timeToLive --;
      this.draw();
   }
   var backgroundGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
   backgroundGradient.addColorStop(0, '#009cff')
   backgroundGradient.addColorStop(1, '#007bff')
   var bubbles = [];
   var minibubbles = [];
   var timer = 0;
   var spawnRate = 70;
   function animate()
   {
      requestAnimationFrame(animate);
      ctx.fillStyle = backgroundGradient;
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      for (var i=bubbles.length-1;i>=0;i--)
      {
          bubbles[i].update();
       if (bubbles[i].y<0)
          {
             bubbles.splice(i, 1);
          }
      }
      for (var i=minibubbles.length-1;i>=0;i--)
      {
         minibubbles[i].update();
     if (minibubbles[i].timeToLive == 0)
         {
            minibubbles.splice(i, 1);
         }
      }
      timer++;
      if (timer==spawnRate)
      {
     bubbles.push(new Bubbles());
         timer=0;
     spawnRate = rand(50, 100);
      }
    }
    canvas.addEventListener('mousedown', function(){
        var x = event.pageX - canvas.getBoundingClientRect().left;
        var y = event.pageY - canvas.getBoundingClientRect().top;
        // 查找被单击的气泡
        for (var i=bubbles.length-1; i>=0; i--)
        {
            var bubble = bubbles[i];
            var dist = Math.sqrt(Math.pow(bubble.x-x,2)+ Math.pow(bubble.y- y,2));
            if (dist<= bubble.radius)
            {
                 var mx = bubble.x;
         var my = bubble.y;
                 var mr = rand(2,5);
         bubbles.splice(i, 1)
         for (var k = 0; k < bubble.radius/mr; k++)
                 {
                    minibubbles.push(new miniBubbles(mx,my, mr));
         }
                 return;
            }
        }
    });
   animate();
</script>
</body>
</html>

2.简单的键盘练习小游戏

有了上面的基础，我们可以编写一个简单的键盘练习小游戏，大小写字母出现在游戏面板中，按键盘某个字母键后，对应的字母消失。游戏过程如图2所示。

图2 键盘练习小游戏

在Bubbles对象类中增加一个属性letter，表示气泡中显示的字母。

为Windows添加键盘按下keypress事件监听，处理键盘按键。

完整的HTML代码如下。

<html>
<head>
<title>简单键盘练习</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
   var canvas = document.getElementById('myCanvas');
   var ctx = canvas.getContext('2d');
   canvas.height = innerHeight;
   canvas.width = innerWidth;
   var str="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
   var cnt1=0;
   var cnt2=0;
   var cnt3=0;
   function rand(min, max)
   {
      return Math.floor(Math.random() * (max - min + 1) + min);
   }
   function Bubbles()
   {
      this.x = rand(30,canvas.width - 30);
      this.y = canvas.height;
      this.radius = 20;
      this.color ='rgba(255, 255, 255, 0.75)';
      this.ySpeed= Math.random() * 2;
      this.gravity = 0.01;
      this.letter=str.charAt(rand(0,str.length-1));
   }
   Bubbles.prototype.draw = function ()
   {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
      ctx.fillStyle = this.color;
      ctx.fill();
      ctx.closePath();
      ctx.font = "Bold 20px Georgia";
      ctx.fillStyle = "Black";
      ctx.textAlign = 'center';
      ctx.baseline = 'middle';
      ctx.fillText(this.letter,this.x, this.y);
   }
   Bubbles.prototype.update = function ()
   {
      this.y -= this.ySpeed;
      if (this.y - this.radius > 0)
         this.ySpeed += this.gravity;
      this.draw();
   }
   function miniBubbles(x,y,radius)
   {
      this.x = x;
      this.y = y;
      this.radius = radius;
      this.color = 'rgba(255, 255, 255, 0.5)';
      this.xSpeed=(Math.random() - 0.5) * 0.6;
      this.ySpeed=(Math.random() - 1) * 0.5;
      this.gravity = -0.03;
      this.timeToLive = 100;
   }
   miniBubbles.prototype.draw = function () {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
      ctx.fillStyle = this.color;
      ctx.fill();
      ctx.closePath();
   }
   miniBubbles.prototype.update = function () {
      if (this.y - this.radius > 0)
         this.ySpeed += this.gravity;
      this.x += this.xSpeed;
      this.y += this.ySpeed;
      this.timeToLive --;
      this.draw();
   }
   var backgroundGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
   backgroundGradient.addColorStop(0, '#009cff')
   backgroundGradient.addColorStop(1, '#007bff')
   var bubbles = [];
   var minibubbles = [];
   var timer = 0;
   var spawnRate = 70;
   function animate()
   {
      requestAnimationFrame(animate);
      ctx.fillStyle = backgroundGradient;
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.font = "Bold 30px Georgia";
      ctx.fillStyle = "Black";
      ctx.textAlign = 'center';
      ctx.baseline = 'middle';
      var mess="正确按键次数："+cnt1+" 无效按键次数："+cnt2+"  丢失字母个数："+cnt3;
      ctx.fillText(mess,canvas.width/2,35);

      for (var i=bubbles.length-1;i>=0;i--)
      {
          bubbles[i].update();
       if (bubbles[i].y<30)
          {
             cnt3++;
             bubbles.splice(i, 1);
          }
      }
      for (var i=minibubbles.length-1;i>=0;i--)
      {
         minibubbles[i].update();
     if (minibubbles[i].timeToLive == 0)
         {
            minibubbles.splice(i, 1);
         }
      }
      timer++;
      if (timer==spawnRate)
      {
     bubbles.push(new Bubbles());
         timer=0;
     spawnRate = rand(50, 100);
      }
    }
    window.addEventListener('keypress', function(e){
        var keyID = e.keyCode ? e.keyCode :e.which;
        for (var i=0;i<bubbles.length-1;i++)
        {
            var bubble = bubbles[i];
            if (keyID== bubble.letter.charCodeAt(0))
            {
                 var mx = bubble.x;
         var my = bubble.y;
                 var mr = rand(2,5);
         bubbles.splice(i, 1)
                 cnt1++;
         for (var k = 0; k < bubble.radius/mr; k++)
                 {
                    minibubbles.push(new miniBubbles(mx,my, mr));
         }
                 return;
            }
        }
        cnt2++;
    },true);
   animate();
</script>
</body>
</html>

View Code

JavaScript小游戏实例：简单的键盘练习

1．刺破气泡交互式小动画

2.简单的键盘练习小游戏

相关推荐