Web小游戲?qū)ο笞詣?dòng)生成器的算法的研究

吳強(qiáng)

摘要：彈彈球小游戲深受大眾所喜愛(ài)，本文詳細(xì)的介紹在網(wǎng)絡(luò)平臺(tái)下，使用JavaScript腳本語(yǔ)言實(shí)現(xiàn)“連連看”游戲中核心算法——對(duì)象自動(dòng)生成器。

關(guān)鍵詞：web 小游戲;彈彈球;JavaScript;對(duì)象自動(dòng)生成器

隨著游戲的飛速發(fā)展，基于移動(dòng)端的網(wǎng)絡(luò)游戲成為了人們娛樂(lè)的一種重要方式，彈彈球類的小游戲出現(xiàn)了很多，深受大眾的喜愛(ài)。

一、關(guān)鍵問(wèn)題

“彈彈球”是一個(gè)平面游戲，小球在地圖中自動(dòng)移動(dòng)，小球超出地圖自動(dòng)刪除，碰到障礙物反彈，用戶水平控制擋板阻止小球飛出，當(dāng)小球碰到不同類型的磚塊有不同類型的獎(jiǎng)勵(lì)，其中一種獎(jiǎng)勵(lì)是生成新的小球，以不同的方向飛行，這時(shí)就有多個(gè)小球同時(shí)在地圖中飛行。自動(dòng)生成小球中一個(gè)重要的問(wèn)題，面向?qū)ο蟮木幊谭绞墙鉀Q些問(wèn)題的方法之一

二、小球類

在建立小球類時(shí)，首先要要考慮設(shè)置小球?qū)ο蟮膶傩院头椒ā?/p>

1、對(duì)象的屬性，小球?qū)ο蟮闹饕獙傩杂衳，y軸的坐標(biāo)、運(yùn)動(dòng)速度與運(yùn)動(dòng)角度。

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)動(dòng)方向

}

2、在地圖中建立小球?qū)ο螅紫葘⒌貓D對(duì)象給到變量“map”中，在map中增加小球?qū)ο?，并，在這里重要的是由類建立的小球?qū)ο蠛偷貓D中顯示的小球不是一個(gè)對(duì)象，因此要建立兩個(gè)對(duì)象的互相聯(lián)系，可以在小球?qū)ο笾性黾右粋€(gè)屬性“obj”指向地圖中的小球，地圖中的小球增加一個(gè)屬性“src”屬性指向小球?qū)ο?。在類中增加代碼事下：

this.obj=document.createElement（"div"）;//建立對(duì)象

this.obj.className=”ball”;//設(shè)置CSS

map.appendChild（this.obj）;//增加對(duì)象至地圖中

this.obj.src=this;//設(shè)置標(biāo)簽對(duì)象src屬性為球?qū)ο?/p>

3、地圖中的小球的位置，可以根據(jù)小球的x和y屬性來(lái)改變小球的位置，并調(diào)用函數(shù)。

this.xy=function（）{//設(shè)置對(duì)象的位置

this.obj.style.left=parseInt（this.x）+”px”;

this.obj.style.top=parseInt（this.y）+”px”;

}

this.xy（）;

4、創(chuàng)建在地圖中移動(dòng)小球?qū)ο蟮姆椒?，在JavaScript做動(dòng)畫的常用方法之一是使用定時(shí)事件來(lái)完成移動(dòng)的效果，在小球類中時(shí)用考慮一次移動(dòng)，可以通過(guò)對(duì)象的運(yùn)動(dòng)速度和角度的屬性來(lái)計(jì)算出小球每次的位移量，并判斷其超出地圖片下面的邊界刪除對(duì)象，方法如下：

this.move=function（）{//移動(dòng)對(duì)象

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（）;//超界刪除對(duì)象

}

5、刪除對(duì)象方法，刪除地圖中的對(duì)象同時(shí)，刪除小球?qū)ο笈c之的鏈接。

this.remove=function（）{map.removeChild（this.obj）;this.obj=””;}

6、在主時(shí)鐘設(shè)置小球運(yùn)動(dòng)，地圖中小球數(shù)量不是固定的，它會(huì)隨時(shí)發(fā)生變化，因此在每次運(yùn)動(dòng)時(shí)都要重新對(duì)地圖中的小球進(jìn)行遍歷，每個(gè)球都要做相應(yīng)的運(yùn)動(dòng)。

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（）;

}

}

三、建立對(duì)象

建立小球?qū)ο髸r(shí)，根據(jù)不同的情況輸入相應(yīng)的屬性，代碼如下：

new Ball（300，100，5，198）;

四、結(jié)束語(yǔ)

以上是本文解決了游戲中關(guān)鍵問(wèn)題對(duì)象自動(dòng)生成器，要完成此游戲還要制作球與磚塊的碰撞反彈效果，相關(guān)圖片的排版布局、倒計(jì)時(shí)、得分、地圖、音效等增加游戲的可玩性。