《基于web的纸钞连连看游戏的设计与实现.doc》由会员分享，可在线阅读，更多相关《基于web的纸钞连连看游戏的设计与实现.doc（12页珍藏版）》请在金锄头文库上搜索。
1、基于WEB的纸钞连连看游戏的设计与实现136福建电脑2010年第9期基于WEB的纸钞连连看游戏的设计与实现郭毅棋(厦门城市职业学院福建厦门361008)【摘要】:采用目前流行的JSp结合AJAX技术,设计实现基于WEB的纸钞连连看游戏.该游戏以在线方式运行,无需下载安装.AJAX使客户端能在后台访问服务器并可按需求取回数据,从而避免了整个页面的刷新,增强了用户体验.【关键词】:AJA)(WEB游戏连连看0.引言网页游戏又称WEB游戏或无端网游.其采HjB/S模式设计实现.优点在于不需要下载客户端.直接打开浏览器登陆网站就可以游戏.由于AJAX技术的出现.网页游戏的技术实现更变得容易.完全基于浏
2、览器的互动式游戏变得完全可以实现11.本文将详细阐述如何设计并实现一个纸钞连连看的网页游戏.主要采用JSP结合AJAX技术.在网页布局与设计上使用DIV+CSS标准化技术1.系统架构及关键技术1.1系统架构系统采用目前成熟的三层B/S架构,如图1所示.(1)表示层:表示层提供游戏玩家可操作性的界面.采用DIV+CSS实现定位布局.通过AJAX异步传输操作数据至服务器.根据反馈动态更新网页的局部信息.(2)游戏逻辑层:游戏逻辑层负责游戏逻辑的运算与处理.随机生成游戏地图,从客户端接受数据,处理运算,返回数据给客户端,并提交部分需要处理的数据到数据持久层等.(3)持久层:持久层负责数据存储,访问和
3、优化.封装了对数据库访问的细节.主要实现数据库的数据CURD操作(删除,新增,更新,查找),并向游戏逻辑层公开接口完成数据库的存取与管理21.I游戏界_由Ilasmf.p-+cssIAJAX滞llnmIwlf服务lWEB服务器ItI数据库服务数杯竺图1WEBGAME三层架构1.2关键技术(1)JSPJSP是基于JAVA的技术,是J2EE平台的一部分.它具备了JAVA语言所有的优点.同时拥有强大的服务器端动态网页技术功能.它以其跨平台的特性,在众多动态WEB应用程序设计语言中异军突起.是目前最流行,应用最广泛的软件开发技术之一.(2)AJAXAJAX是异步Javascript和XMLfAsync
4、hronousJavascriptandXML)I,O英文缩写.AJAX作为一种综合性的应用技术.其核心理念在于使用XMLHttpRequest对象发送异步请求与传统的WEB应用不同之处在于它在用户和服务器之间引入了个中间媒介.从而改变了同步交互过程中的”处理一等待一处理一等待n模式.AJAX的原则是”按需取数据”.可以最大程度的减少冗余请求.减轻服务器的负担.且在不重新载入整个页面的情况下.用JavaScript操作DOM更新页面,带来更好的用户体验(3)DIV+CSSDIV+CSS是目前实现WEB标准所使用的主流方式.用于实现布局定位及各种表现.DIV的功能仅仅用于将一段信息给标记起来.但
5、并不定义信息的样式,而由CSS来完成.如需修改页面布局或更换页面配色方案.只修改相应的CSS文件即可.DIV与CSS的结合,使Web界面更加丰富多彩.有效地改善了用户界面的显示效果2.游戏的设计与实现2.1游戏设计本游戏的规则是:选择一对相同纸钞的正反面两张图片,如符合规定则消除此对图片而得分.每一局里玩家需要在规定的时间内消除所有的纸钞图片.当完成任务后.方能进行下一关.系统记录玩家点击图片的次数及所用的时间.游戏结束后会以玩家的得分多寡来决定是否登录排行榜总体流程设计如图2所示.游戏规则简单容易上手.融知识性与趣味性于一体.2010年第9期福建电脑137图2游戏总体流程2.2关键技术实现(
6、1)游戏初始化在本系统中.每张纸钞图片都有唯一的编号.编号策略为正面图片使用正整数表示.反面图片使用负整数表示.正反面一一对应.互为相反数.用二维数组来表示游戏地图,随机生成.关键代码如下:publicclassInitlnstonce0fintnlp【MAxxMAX/地图数组MAXX行MAXI列,存储纸钞图片for(Juti=0;i<MAXX;i+)/U3始化纸钞对for(intj-0;j<MAX3t;j_j+2)httlemp=randomO%MAxN;,/随机生成MAxN以内整数mapijJ=temp;mpIJb+l】=一temp,/保证纸钞图片成对)lfor(inti=O;
7、i<IEVEL;i+)/将纸钞对随机打乱inlxl=random0%MAXX;inty1=random0%MAXY;intx2=random0%MAXX;inty2=random0%MAXY;if(rnapx1y11=nlpx2】【y2】&&map【x1【yl】!=-mapx2D2)inttemp=mpxl】【y1J;mapx1y1=mapx2ly2;mapx2D2=temp;J函数首先将map数组以相邻顺序存放相反数.可以保证每种纸钞的图片都是成对出现的.然后利用随机函数Random产生一对随机数.把该数对对应的数组中的两个位置的数对换.这样根据难度等级实行LEVEL次
8、对换后生成游戏地图(2)图片预加载为减少用户等待纸钞图片下载的时间.本系统使用异步的方法为图片设置预加载.通过预先加载图片.可以充分利用浏览器的空闲时间.当用户进人到下一个关卡时,大多数的图片都保存在缓存中.整个页面的加载时间将大大缩短,极大的增强了用户体验关键代码如下:functionpreload(1mageUr1)Itempimg.sfc=lmageUrl;ImagePreLoad0;测图片有没加载完毕functionImagePreLoad0if(tempimg.readyState!:”complete”)IsetTimeout(“ImagePreLoad(doeument.getE
9、lementByld(templmage3)”,1130);】elsepre1oadc0mpleteO;,当加载完毕后开始游戏)】为了实现预先加载图片.先用Javascript创建Im.age对象,由于预加载图片有一个过程.需要不断进行判断是否加载完毕.可以使用Image对象的readyState属性来判断.并用setTimeout进行递归判断.为防止递归过频.降低系统资源.因此设置setTimeout触发递归间隔时问为lOOms翻.当预加载图片完成.游戏开始.(3)消图功能当游戏玩家选中一对纸钞的正反面两张图片即符合消图规则由于使用相反数来表示纸钞的正反面图片,只需要简单的判断两图片值相加是
10、否为零.关键代码如下:functionmatch(oNode,pt,p2)if(p1.value+p2va】ue=0)f,/判断两图片值相加是否为零.是则消图oNode.rem0vechild(p1);,淡H并移除oNode.removeClfild(p2);if(oNodehasChildO=nul1)/-没有子节点.该关卡结束nextLevel0;,/进入下一关卡】其中,pl,p2分别保存有先后两次点击图片的信息.根据编号可以从DOMTree中删除被消图片的DIV节点.为增强视觉效果,用AJAX实现淡出的效果.当DOMTree为空时.表示游戏玩家完成该关卡的任务.统计分数并进入下一关卡(4
11、)计时器本系统中使用时间挑战的方式来增加趣味性.玩家必须在一个确定的时间内完成消图任务.AJAX的异步特性可以保证只更改倒计时时间信息而不刷新整个页面.关键代码如下:$(doeument).ready(function0/询setInterval(getLeftTime,1000);1);functiongetLeftTime0/$到剩余时间$.get(“/timeServlet?”,function(1eftTime)ff(1eftTime=-o)/剩余时间为零.游戏结束gameOver0;else$(“#nowis”).text(1eftTime);/J更新显示剩余时间I图3游戏实现效果当
12、玩家点击开始游戏,客户端发送AJAX异步请求,服务器端开始倒计时.然后定时地从服务器端查询和更新页面时间.采用服务器端计时可(下转第100页)i00福建电脑2010年第9期同时PCR中中的XIOEN位置1.则发送器引脚工作于I/O模式(DX只作为通用输出)【4】.通过PCR还可将工作于I/O模式的引脚配置为输入或输出状态McBSP1的配置程序如下:STM#0000H.SPSA1;SPCRIl子地址为0000HsTM#00oOH.SPSD1:接收器复位STM#0001H.SPSA1;SPCR21子地址为0001HsTM#0000H.SPSDI:发送器复位STM#000EH.SPSA1;PCR1子
13、地址为000EHSTM样380OH,SPSD1;XIOEN=1;RIOEN=1;FSXM=1.配置BFSX1引脚为输出这里是将BFsX1配置为输出引脚.再通过向PCR1寄存器的第3位(FSXP)写1或0即可控制BF.SX1引脚发送高电平或低电平.当需要将BFSX1配置为输入引脚时.用以下指令即可实现STM#0O0EH.SPSA1STM样30O0H.SPSD1BFSX1配置为输入引脚时.也通过PCR1寄存器的FSXP位读取BFSX1引脚的状态3.2温度数据采集程序温度数据采集程序流程图如图2所示.程序主要完成发送温度转换命令和读暂存存储器命令这两个任务.根据单线接口访问DS18B20的协议,每个
14、任务都应从初始化开始.然后是发送ROM操作命令和温度转换命令或读暂存器命令.本设计只用一个DS18B20,可发送跳过ROM命令在温度采集过程中.程序利用BFSX1引脚来实现时序的控制.如.对DS18B20进行初始化时.BFSX1首先配置为输出引脚.输出约500微秒的低电平.然后BFSX1再配置为输入引脚.并等待(上接第137页)-+-以防止用户刷新页面等操作引起的计时错误或通过修改本地时间来作弊游戏实现效果如图3所示.3.结语随着AJAX技术的发展.WEBGAME的可操作性与表现性有了较大的提高.由于受到网页本身功能的限制.网页游戏的画面表现效果,场景效果比起大型休闲游戏还有一些差距.但其独特的优势已初露端倪.作为网络游戏的重要补充力量.即开即玩的WEBGAME接收DS18B20发出的存在脉冲.4,结束语经过实际制作和调试,以上方案得到了实现,能稳定可靠地进行温度测量.图2温度数据采集程序流程图参考文献:l1JDSI8B20DataSheet.DALLASSemiconductor.2】刘艳萍.DSP技术原理及应用教程M1.北京:北京航空航天大学出版社.2005:119.【3】邹志革.TMS320VC5402通用I/O资源及其应用IJ.电子工程师.2003(4):39-41.【4支长义,程志
