面向對象程序設計方法開發游戲的算法研究

吳強

摘 要：本文通過介紹面向對象程序設計的方法制作Web小游戲“紙牌對對碰”，研究 JavaScript面向對象的制作方法，使高校相關專業的學生更好的理解Web前端技術。

關鍵詞：JavaScript、Web小游戲、面向對象程序開發、紙牌對對碰

隨著信息技術的發展，越來越多的高校開設了網頁制作，面向對象程序設計是當今最流行的編程方法，JavaScript是Web前端開發的核心技術之一，JavaScript并不是一個面向對象的編程軟件，面向對象的指令并不完善，面向對象的很多概念在JavaScript中無法直接實現，只能使用JavaScript代碼模擬完成，本文通過Web小游戲“紙牌對對碰”的制作，了解JavaScript面向對象程序設計的方法。

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

一、隨機取數

制作游戲首先要考慮游戲布局，考慮共有多少張牌，分幾行幾列顯示，如3行6列共有18張牌，有5種不同的圖案，分別用1至5表示5種不同圖案的編號，并且每種圖案的張數必須是偶數。可以先使用循環將1至5按順序存入數組，然后使用隨機交換的方法打亂牌的順序。

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）; //隨機取數單元的一個下標

t=arr[i]; arr[i]=arr[j];arr[j]=t;} ?//交換兩數組下標變量的值

二、設置布局的CSS樣式

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

（1）利用CSS設置外框的樣式：

#div0 {

width： 650px;

height： 470px;

background-color： #EFB3B4;

padding： 20px;

margin-right： auto;

}

（2）利用CSS設置牌的樣式：

#div0 div {

width： 100px;

height： 150px;

background-image： url（spider.png）;

background-repeat： no-repeat;

position： absolute;

}

三、建立類

1、由面向對象編程的原理，可以爭對牌制作一個類，可以發現每張牌可以抽象出來不同的屬性只有牌的序號和牌花色的編號，在類中創建一個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、根據牌的序號計算出牌的位置，一行顯示6張牌。

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

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

3、在牌上綁定事件，鼠標按下事件翻牌，鼠標松開事件還原，但是要注意事件中的對象是牌中的顯示對象，是牌對象中的一個屬性，要在事件對象中找到牌對象可以在事件對象上增加一個屬性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、使用循環新建牌對象，建立對象時填入相應的牌的序號（循環變量）和牌號（數組中對應的編號）。

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

四、實現游戲

點擊翻牌時，如果連續兩張牌的圖形一樣時消除兩張圖片，可以定義兩個類屬性Pa.num記錄牌的數量，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（）;//刪除當前牌

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

Pa.old=null;

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

}

else Pa.old=this;

通過這個案例分析，使用學生更好的理解并使用JavaScript面向對象編程的方法，更好的理解JavaScript動態布局的方法，進一步提高學生對Web前端技術的學習興趣。