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ū)ο?，首先將地圖對象給到變量“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ū)ο蟮姆椒?，在JavaScript做動畫的常用方法之一是使用定時事件來完成移動的效果，在小球類中時用考慮一次移動，可以通過對象的運(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)圖片的排版布局、倒計時、得分、地圖、音效等增加游戲的可玩性。

安防科技2021年1期

安防科技的其它文章

知識經(jīng)濟(jì)時代迫切需求人力資源會計

淺談機(jī)械設(shè)備自動化安裝及控制領(lǐng)域應(yīng)用

蘇州與深圳在科技創(chuàng)新方面的比較

淺談汽車底盤裝配線工藝及應(yīng)用

現(xiàn)代機(jī)械制造工藝與精密加工技術(shù)探究

承插型盤扣式腳手架在高大模板支撐中的應(yīng)用