吳強(qiáng)

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

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

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

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

一、隨機(jī)取數(shù)

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

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）; //隨機(jī)取數(shù)單元的一個(gè)下標(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)簽中增加一個(gè)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ū)ο缶幊痰脑恚梢誀?zhēng)對(duì)牌制作一個(gè)類，可以發(fā)現(xiàn)每張牌可以抽象出來(lái)不同的屬性只有牌的序號(hào)和牌花色的編號(hào)，在類中創(chuàng)建一個(gè)div對(duì)象并添加到div0中。

function Pa（xh，ph）{

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

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

this.xh=xh;//牌的序號(hào)

this.ph=ph;//牌花色的紡號(hào)

}

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

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

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

3、在牌上綁定事件，鼠標(biāo)按下事件翻牌，鼠標(biāo)松開事件還原，但是要注意事件中的對(duì)象是牌中的顯示對(duì)象，是牌對(duì)象中的一個(gè)屬性，要在事件對(duì)象中找到牌對(duì)象可以在事件對(duì)象上增加一個(gè)屬性src指向類對(duì)象代碼為：”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)新建牌對(duì)象，建立對(duì)象時(shí)填入相應(yīng)的牌的序號(hào)（循環(huán)變量）和牌號(hào)（數(shù)組中對(duì)應(yīng)的編號(hào)）。

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

四、實(shí)現(xiàn)游戲

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

this.obj.del=function（）{

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

Pa.num--;

}

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

if （Pa.old==null） Pa.old=this;//第一次點(diǎn)擊牌時(shí)

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

//第二次點(diǎn)擊時(shí)，如果牌號(hào)相同則清除，如果不同在Pa.old中記錄這次點(diǎn)擊的牌

{

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

Pa.old.del（）;//刪除上次點(diǎn)擊的牌

Pa.old=null;

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

}

else Pa.old=this;

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