面向对象程序设计方法开发游戏的算法研究

吴强

摘 要：本文通过介绍面向对象程序设计的方法制作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前端技术的学习兴趣。