面向?qū)ο蟪绦蛟O(shè)計方法開發(fā)游戲的算法研究

吳強

摘 要：本文通過介紹面向?qū)ο蟪绦蛟O(shè)計的方法制作Web小游戲“紙牌對對碰”，研究 JavaScript面向?qū)ο蟮闹谱鞣椒?，使高校相關(guān)專業(yè)的學(xué)生更好的理解Web前端技術(shù)。

關(guān)鍵詞：JavaScript、Web小游戲、面向?qū)ο蟪绦蜷_發(fā)、紙牌對對碰

隨著信息技術(shù)的發(fā)展，越來越多的高校開設(shè)了網(wǎng)頁制作，面向?qū)ο蟪绦蛟O(shè)計是當(dāng)今最流行的編程方法，JavaScript是Web前端開發(fā)的核心技術(shù)之一，JavaScript并不是一個面向?qū)ο蟮木幊誊浖?，面向?qū)ο蟮闹噶畈⒉煌晟?，面向?qū)ο蟮暮芏喔拍钤贘avaScript中無法直接實現(xiàn)，只能使用JavaScript代碼模擬完成，本文通過Web小游戲“紙牌對對碰”的制作，了解JavaScript面向?qū)ο蟪绦蛟O(shè)計的方法。

紙牌對對碰是一款考驗游戲者記憶力的游戲，點擊牌可以翻牌觀察牌正面的圖形，如果連續(xù)點擊了兩張圖形一樣的牌，兩張牌消失，當(dāng)所有紙牌都被清除時過關(guān)。整個程序應(yīng)該分成布局、翻牌兩個部份。

一、隨機取數(shù)

制作游戲首先要考慮游戲布局，考慮共有多少張牌，分幾行幾列顯示，如3行6列共有18張牌，有5種不同的圖案，分別用1至5表示5種不同圖案的編號，并且每種圖案的張數(shù)必須是偶數(shù)?？梢韵仁褂醚h(huán)將1至5按順序存入數(shù)組，然后使用隨機交換的方法打亂牌的順序。

for （i=0;i<=18;i++）

{arr[i]=Math.floor（i/4）+1;}

for （i=0;i<=39;i++） {

j=Math.floor（Math.random（）*18）; //隨機取數(shù)單元的一個下標(biāo)

t=arr[i]; arr[i]=arr[j];arr[j]=t;} ?//交換兩數(shù)組下標(biāo)變量的值

二、設(shè)置布局的CSS樣式

先使用PhotoShop制作牌的背景圖，每張牌的大小為100X150像素，牌的背面及5張牌的圖形順序排列成一行在spider.png文件中。在body標(biāo)簽中增加一個div為游戲的外框，并設(shè)置id為”div0”。

（1）利用CSS設(shè)置外框的樣式：

#div0 {

width： 650px;

height： 470px;

background-color： #EFB3B4;

padding： 20px;

margin-right： auto;

}

（2）利用CSS設(shè)置牌的樣式：

#div0 div {

width： 100px;

height： 150px;

background-image： url（spider.png）;

background-repeat： no-repeat;

position： absolute;

}

三、建立類

1、由面向?qū)ο缶幊痰脑恚梢誀帉ε浦谱饕粋€類，可以發(fā)現(xiàn)每張牌可以抽象出來不同的屬性只有牌的序號和牌花色的編號，在類中創(chuàng)建一個div對象并添加到div0中。

function Pa（xh，ph）{

this.obj=document.createElement（"div"）;//建立一個div對象

document.getElementById（"div0"）.appendChild（this.obj）;//將div對象添加到div0中

this.xh=xh;//牌的序號

this.ph=ph;//牌花色的紡號

}

2、根據(jù)牌的序號計算出牌的位置，一行顯示6張牌。

this.obj.style.marginLeft=（xh%6*110）+"px";//根據(jù)序號算出牌的水平位置

this.obj.style.marginTop=Math.floor（xh/6）*160+"px";//根據(jù)序號算出牌的垂直位置

3、在牌上綁定事件，鼠標(biāo)按下事件翻牌，鼠標(biāo)松開事件還原，但是要注意事件中的對象是牌中的顯示對象，是牌對象中的一個屬性，要在事件對象中找到牌對象可以在事件對象上增加一個屬性src指向類對象代碼為：”this.obj.src=this;”。

this.obj.onmousedown=function（）{this.style.backgroundPosition="-"+（this.src.ph*100）+"px 0px";}

this.obj.onmouseup=function（）{this.style.backgroundPosition="0px 0px";}

4、使用循環(huán)新建牌對象，建立對象時填入相應(yīng)的牌的序號（循環(huán)變量）和牌號（數(shù)組中對應(yīng)的編號）。

for （var i=0;i<=arr.length-1;i++） ?new pa（i，arr[i]）;

四、實現(xiàn)游戲

點擊翻牌時，如果連續(xù)兩張牌的圖形一樣時消除兩張圖片，可以定義兩個類屬性Pa.num記錄牌的數(shù)量，Pa.old記錄第一點擊的牌。并編制一個刪除對象的方法如下：

this.obj.del=function（）{

document.getElementById（"div0"）.removeChild（this）;

Pa.num--;

}

并在按下事件中增加代碼如下：

if （Pa.old==null） Pa.old=this;//第一次點擊牌時

else if （Pa.old！=this && Pa.old.src.ph==this.src.ph）

//第二次點擊時，如果牌號相同則清除，如果不同在Pa.old中記錄這次點擊的牌

{

this.del（）;//刪除當(dāng)前牌

Pa.old.del（）;//刪除上次點擊的牌

Pa.old=null;

if （Pa.num==0） alert（"過關(guān)"）;//如果所有牌都被清除過關(guān)。

}

else Pa.old=this;

通過這個案例分析，使用學(xué)生更好的理解并使用JavaScript面向?qū)ο缶幊痰姆椒ǎ玫睦斫釰avaScript動態(tài)布局的方法，進(jìn)一步提高學(xué)生對Web前端技術(shù)的學(xué)習(xí)興趣。