Web小游戲?qū)ο笞詣由善鞯乃惴ǖ难芯?/h1>
2021-11-12 15:08:58吳強(qiáng)
安防科技 2021年1期
吳強(qiáng)
摘要：彈彈球小游戲深受大眾所喜愛，本文詳細(xì)的介紹在網(wǎng)絡(luò)平臺下，使用JavaScript腳本語言實現(xiàn)“連連看”游戲中核心算法——對象自動生成器。
關(guān)鍵詞：web 小游戲;彈彈球;JavaScript;對象自動生成器
隨著游戲的飛速發(fā)展，基于移動端的網(wǎng)絡(luò)游戲成為了人們娛樂的一種重要方式，彈彈球類的小游戲出現(xiàn)了很多，深受大眾的喜愛。
一、關(guān)鍵問題
“彈彈球”是一個平面游戲，小球在地圖中自動移動，小球超出地圖自動刪除，碰到障礙物反彈，用戶水平控制擋板阻止小球飛出，當(dāng)小球碰到不同類型的磚塊有不同類型的獎勵，其中一種獎勵是生成新的小球，以不同的方向飛行，這時就有多個小球同時在地圖中飛行。自動生成小球中一個重要的問題，面向?qū)ο蟮木幊谭绞墙鉀Q些問題的方法之一
二、小球類
在建立小球類時，首先要要考慮設(shè)置小球?qū)ο蟮膶傩院头椒ā?/p>
1、對象的屬性，小球?qū)ο蟮闹饕獙傩杂衳，y軸的坐標(biāo)、運(yùn)動速度與運(yùn)動角度。
function Ball（x，y，speed，angle）{
this.x=x;//設(shè)置x坐標(biāo)
this.y=y;//設(shè)置y坐標(biāo)
this.speed=speed;//設(shè)置速度
this.angle=angle;//設(shè)置運(yùn)動方向
}
2、在地圖中建立小球?qū)ο螅紫葘⒌貓D對象給到變量“map”中，在map中增加小球?qū)ο螅ⅲ谶@里重要的是由類建立的小球?qū)ο蠛偷貓D中顯示的小球不是一個對象，因此要建立兩個對象的互相聯(lián)系，可以在小球?qū)ο笾性黾右粋€屬性“obj”指向地圖中的小球，地圖中的小球增加一個屬性“src”屬性指向小球?qū)ο蟆Ｔ陬愔性黾哟a事下：
this.obj=document.createElement（"div"）;//建立對象
this.obj.className=”ball”;//設(shè)置CSS
map.appendChild（this.obj）;//增加對象至地圖中
this.obj.src=this;//設(shè)置標(biāo)簽對象src屬性為球?qū)ο?/p>
3、地圖中的小球的位置，可以根據(jù)小球的x和y屬性來改變小球的位置，并調(diào)用函數(shù)。
this.xy=function（）{//設(shè)置對象的位置
this.obj.style.left=parseInt（this.x）+”px”;
this.obj.style.top=parseInt（this.y）+”px”;
}
this.xy（）;
4、創(chuàng)建在地圖中移動小球?qū)ο蟮姆椒ǎ贘avaScript做動畫的常用方法之一是使用定時事件來完成移動的效果，在小球類中時用考慮一次移動，可以通過對象的運(yùn)動速度和角度的屬性來計算出小球每次的位移量，并判斷其超出地圖片下面的邊界刪除對象，方法如下：
this.move=function（）{//移動對象
this.x+=this.speed*Math.cos（this.angle/180*Math.PI）;
this.y+=this.speed*Math.sin（this.angle/180*Math.PI）;
this.xy（）;
if （this.y>map.offsetHeight） this.remove（）;//超界刪除對象
}
5、刪除對象方法，刪除地圖中的對象同時，刪除小球?qū)ο笈c之的鏈接。
this.remove=function（）{map.removeChild（this.obj）;this.obj=””;}
6、在主時鐘設(shè)置小球運(yùn)動，地圖中小球數(shù)量不是固定的，它會隨時發(fā)生變化，因此在每次運(yùn)動時都要重新對地圖中的小球進(jìn)行遍歷，每個球都要做相應(yīng)的運(yùn)動。
window.setInterval（“masterClock（）”，1000/30）;
var masterClock=function（）{
var ballAll=document.querySelectorAll（“.map .ball”）;
console.log（ballAll.length）;
for （var k=0;k<=ballAll.length-1;k++）{
ballAll.item（k）.src.move（）;
}
}
三、建立對象
建立小球?qū)ο髸r，根據(jù)不同的情況輸入相應(yīng)的屬性，代碼如下：
new Ball（300，100，5，198）;
四、結(jié)束語
以上是本文解決了游戲中關(guān)鍵問題對象自動生成器，要完成此游戲還要制作球與磚塊的碰撞反彈效果，相關(guān)圖片的排版布局、倒計時、得分、地圖、音效等增加游戲的可玩性。
吳強(qiáng)
摘要：彈彈球小游戲深受大眾所喜愛，本文詳細(xì)的介紹在網(wǎng)絡(luò)平臺下，使用JavaScript腳本語言實現(xiàn)“連連看”游戲中核心算法——對象自動生成器。
關(guān)鍵詞：web 小游戲;彈彈球;JavaScript;對象自動生成器
隨著游戲的飛速發(fā)展，基于移動端的網(wǎng)絡(luò)游戲成為了人們娛樂的一種重要方式，彈彈球類的小游戲出現(xiàn)了很多，深受大眾的喜愛。
一、關(guān)鍵問題
“彈彈球”是一個平面游戲，小球在地圖中自動移動，小球超出地圖自動刪除，碰到障礙物反彈，用戶水平控制擋板阻止小球飛出，當(dāng)小球碰到不同類型的磚塊有不同類型的獎勵，其中一種獎勵是生成新的小球，以不同的方向飛行，這時就有多個小球同時在地圖中飛行。自動生成小球中一個重要的問題，面向?qū)ο蟮木幊谭绞墙鉀Q些問題的方法之一
二、小球類
在建立小球類時，首先要要考慮設(shè)置小球?qū)ο蟮膶傩院头椒ā?/p>
1、對象的屬性，小球?qū)ο蟮闹饕獙傩杂衳，y軸的坐標(biāo)、運(yùn)動速度與運(yùn)動角度。
function Ball（x，y，speed，angle）{
this.x=x;//設(shè)置x坐標(biāo)
this.y=y;//設(shè)置y坐標(biāo)
this.speed=speed;//設(shè)置速度
this.angle=angle;//設(shè)置運(yùn)動方向
}
2、在地圖中建立小球?qū)ο螅紫葘⒌貓D對象給到變量“map”中，在map中增加小球?qū)ο螅ⅲ谶@里重要的是由類建立的小球?qū)ο蠛偷貓D中顯示的小球不是一個對象，因此要建立兩個對象的互相聯(lián)系，可以在小球?qū)ο笾性黾右粋€屬性“obj”指向地圖中的小球，地圖中的小球增加一個屬性“src”屬性指向小球?qū)ο蟆Ｔ陬愔性黾哟a事下：
this.obj=document.createElement（"div"）;//建立對象
this.obj.className=”ball”;//設(shè)置CSS
map.appendChild（this.obj）;//增加對象至地圖中
this.obj.src=this;//設(shè)置標(biāo)簽對象src屬性為球?qū)ο?/p>
3、地圖中的小球的位置，可以根據(jù)小球的x和y屬性來改變小球的位置，并調(diào)用函數(shù)。
this.xy=function（）{//設(shè)置對象的位置
this.obj.style.left=parseInt（this.x）+”px”;
this.obj.style.top=parseInt（this.y）+”px”;
}
this.xy（）;
4、創(chuàng)建在地圖中移動小球?qū)ο蟮姆椒ǎ贘avaScript做動畫的常用方法之一是使用定時事件來完成移動的效果，在小球類中時用考慮一次移動，可以通過對象的運(yùn)動速度和角度的屬性來計算出小球每次的位移量，并判斷其超出地圖片下面的邊界刪除對象，方法如下：
this.move=function（）{//移動對象
this.x+=this.speed*Math.cos（this.angle/180*Math.PI）;
this.y+=this.speed*Math.sin（this.angle/180*Math.PI）;
this.xy（）;
if （this.y>map.offsetHeight） this.remove（）;//超界刪除對象
}
5、刪除對象方法，刪除地圖中的對象同時，刪除小球?qū)ο笈c之的鏈接。
this.remove=function（）{map.removeChild（this.obj）;this.obj=””;}
6、在主時鐘設(shè)置小球運(yùn)動，地圖中小球數(shù)量不是固定的，它會隨時發(fā)生變化，因此在每次運(yùn)動時都要重新對地圖中的小球進(jìn)行遍歷，每個球都要做相應(yīng)的運(yùn)動。
window.setInterval（“masterClock（）”，1000/30）;
var masterClock=function（）{
var ballAll=document.querySelectorAll（“.map .ball”）;
console.log（ballAll.length）;
for （var k=0;k<=ballAll.length-1;k++）{
ballAll.item（k）.src.move（）;
}
}
三、建立對象
建立小球?qū)ο髸r，根據(jù)不同的情況輸入相應(yīng)的屬性，代碼如下：
new Ball（300，100，5，198）;
四、結(jié)束語
以上是本文解決了游戲中關(guān)鍵問題對象自動生成器，要完成此游戲還要制作球與磚塊的碰撞反彈效果，相關(guān)圖片的排版布局、倒計時、得分、地圖、音效等增加游戲的可玩性。
