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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/14863.html

標籤：JavaScript

上一篇：使用Cookie 臨時存值

下一篇：Electron：運行npm run build構建環境失敗解決方案