JavaScript小游戲?qū)嵗汉唵蔚逆I盤練習(xí)

1、JavaScript小游戲?qū)嵗汉唵蔚逆I盤練習(xí)鍵盤是一種常用的輸入設(shè)備， 靈活熟練地使用鍵盤進(jìn)行輸入是計算機(jī)用戶需掌握的一門基本功。下面我們編寫一個簡單的鍵盤練習(xí)游戲。1刺破氣泡交互式小動畫在編寫簡單的鍵盤練習(xí)游戲之前，先設(shè)計一個簡單地刺破氣泡交互式小動畫。在面板底部逐個上升一些氣泡， 用鼠標(biāo)在某個氣泡上單擊， 該氣泡被刺破， 刺破后的小氣泡逐漸消散在面板中。交互式效果如圖 1 所示。圖 1刺破氣泡交互式動畫一個氣泡可分為兩個狀態(tài)： （ 1）氣泡從面板底部上升； （ 2）氣泡被鼠標(biāo)單擊刺破成小氣泡或氣泡上升越過了面板頂部消散了。為此抽象出兩個對象類： Bubbles 和 miniBubbles

2、 。其中， Bubbles 用于表示一個未被刺破的氣泡， miniBubbles 用于表示一個氣泡刺破后得到的逐漸消散的小氣泡。Bubbles 對象類定義 6 個屬性：表示氣泡圓心的坐標(biāo)（ x,y）、氣泡的半徑時垂直方向的位移改變量 ySpeed、氣泡上升加速度 gravity 和氣泡顏色 color 。坐標(biāo)屬性值 y的初始值取畫布的高度， 表示氣泡從游戲面板底部開始上升，的初始值采用隨機(jī)數(shù)確定或直接指定。具體定義如下：radius、上升其余各屬性function Bubbles()this.x = rand(30,canvas.width - 30);this.y = canvas.heig

3、ht;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() 、氣泡上升時坐標(biāo)改變方法update()。miniBubbles 對象類定義8 個屬性： 表示小氣泡圓心的坐標(biāo) （ x,y ）、小氣泡半徑radius、散開時水平和垂直方向的位移改變量xSpeed 和 ySpeed、小氣泡的填充color 、小氣泡的減速度 gravity 、小氣泡的存活時間t

4、imeToLive 。具體定義如下：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() 、小氣泡位置改變改變

5、方法 update()。小氣泡每次改變位置后， timeToLive 減 1，當(dāng) timeToLive 值等于 0 時，從小氣泡數(shù)組中刪除該小氣泡，表示該小氣泡已消亡。定義兩個數(shù)組var bubbles = ; 和 var minibubbles = ;分別存儲未刺破的大氣泡對象和大氣泡刺破后散開的小氣泡。為畫布添加鼠標(biāo)按下事件監(jiān)控canvas.addEventListener(mousedown, function(); ，在事件處理函數(shù)中查找鼠標(biāo)單擊的氣泡，然后將該氣泡從bubbles 數(shù)組中刪除， 向 minibubbles數(shù)組中添加若干個散開的小氣泡。完整的 HTML 代碼如下。 刺破

6、氣泡小游戲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.

7、radius = rand(15, 30);this.color =rgba(255, 255, 255, 0.75);this.ySpeed= Math.random() * 2;this.gravity = 0.01;Btotype.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();Btotype.updat

8、e = 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.

9、gravity = -0.03;this.timeToLive = 100;miniBtotype.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();miniBtotype.update = function () if (this.y - this.radius 0)this.ySpeed += this.g

10、ravity;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 spawnR

11、ate = 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-)bubblesi.update();if (bubblesi.y=0;i-)minibubblesi.update();if (minibubblesi.timeToLive = 0)minibubbles.splice(i, 1);timer+;

12、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 = b

13、ubblesi;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();2.簡單的鍵盤練習(xí)小游戲有了上面的基礎(chǔ)， 我

14、們可以編寫一個簡單的鍵盤練習(xí)小游戲，大小寫字母出現(xiàn)在游戲面板中，按鍵盤某個字母鍵后，對應(yīng)的字母消失。游戲過程如圖2 所示。圖 2 鍵盤練習(xí)小游戲在 Bubbles 對象類中增加一個屬性 letter ，表示氣泡中顯示的字母。為Windows 添加鍵盤按下 keypress 事件監(jiān)聽，處理鍵盤按鍵。完整的 HTML 代碼如下。 簡單鍵盤練習(xí) var canvas = document.getElementById(myCanvas);var ctx = canvas.getContext(2d);canvas.height = innerHeight;canvas.width = innerWi

15、dth;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, 2

16、55, 0.75);this.ySpeed= Math.random() * 2;this.gravity = 0.01;this.letter=str.charAt(rand(0,str.length-1);Btotype.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;

17、ctx.fillStyle = Black;ctx.textAlign = center;ctx.baseline = middle;ctx.fillText(this.letter,this.x, this.y);Btotype.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

18、 = 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;miniBtotype.draw = function () ctx.beginPath();ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);ctx.fillStyle

19、= this.color;ctx.fill();ctx.closePath();miniBtotype.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);backgroundGrad

20、ient.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=正確按鍵次數(shù)： +cnt1+無效