html5技术教程之案例分析：制作跨屏互动游戏

《html5技术教程之案例分析：制作跨屏互动游戏》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、HTML5技术教程之案例分析：制作跨屏互动游戏随着H5的发展越来越快，被更多的人所接受，H5应用也进入到各个领域，比如我们在逛街时，或者微信册友圈屮接触到的各种H5游戏，可以通过扫描二维码，使我们的手机成为控制器，控制电视或较大显示屏上的任务进行游戏而形成交互体验。这样的H5应用越來越多的被用在宣传推广上，其效果也是非常显著。本节我们将要做一个跨屏互动应用的案例分析，该应用时给一家商场做活动使卅的，是一个跨屏爱消除游戏。PC端页而显示在连接在PC的人屏幕上，参与活动的玩家可以用自己的手机扫描PC端页面上

2、的二维码，连接成功后，操作手机上的游戏可以同步控制主屏幕的游戏画面和结果。游戏结果会记录到排行榜，商家定期会对排名前10的玩家进行奖励。游戏规则和前面分析过的爱消除的案例类似，这个游戏本身就是在原來的单机游戏的基础上有进一步开发做了跨屏通讯的内容。（一）游戏规则：1、开始游戏时，徳基的logo机出现在最上面一行的任意一格；2、游戏时，方块随机从上往卞落，填满所有的方框，相同的三个石头不能相邻的排在一列或者一行；3、一次消除三个方块加200分，每多消除一块多加200分，比如一次消除四个加400分，一次消除

3、5个加400分，以此类推。游戏结束时判断德基的logo位置，增加奖励分数，位置越往下奖励分数越高:依次为：0、200、400、600、1000、1400、2000。（二）、游戏玩法只要三个相同的石头相邻的排在一列或者一行，他们就会消失，同时上面的方块头往下落，落到消失的方块头位置上游戏过程小有可能遇到没有可消的情况，为此设计了重直一列的功能，当点击重置按钮后，会从中间的数列中随机选择一列重置，游戏屮重置按钮可以使用三次。游戏动画演示：是在PC上打开卜•面的链接后，刷PC页面上的二维码，而不是卜•图上的二

4、维码，下图只是效果图，因为PC端的二维码是动态牛成的设计思路：这个跨屏游戏是在前面分析过网页游戏的基础上改造改成，所有游戏逻辑还是原来的逻辑。跨屏通讯互动方而是这样设计的:PC端和手机端都是两个游戏动画，手机端有输入和游戏逻辑而PC端没冇输入只冇同手机端完全一样的游戏逻辑。当手机端冇输入时（即交换相邻两个方块的位置），手机端会将要交换的两个方块的编号发送到PC端，两方通过白己的逻辑可以判断交换后的结果是否满足消除方块的条件，如果满足将和应方块消除，否则再将两个方块换回。设计增加了通讯的容错机制：每次通讯

5、时手机端会在后面添加又所有方块位置生产的校验和，PC端收到示会用该校验和和自己的做比较，如果不一致，则证明出错，本次操作不做处理并且通知手机端将其所有方块位査的数组发过來，收到后安手机端方块位置数组重置PC端的所有方块。关键点:I.手机端每次移动方块都向PC端发起通讯，并附带分数和校验和for(vari=0;i

6、ltime+'+timeBonus+，+score+'+(moveSteps)+'+checksum);同时PC端收到方块移动的事件示，解析出札IM参数，并进行相M操作。〃先将事件的数据放入数组中，等候解析处理if(msg.event=='action'){actionArray,push({data:msg.data,status:1});}//解析数据，并处理vardata=actionArray[actionlndex].data.split(';totaltime=data[l];timeBon

7、us=parselnt(data[2]);varmobileScore=parselnt(data[3]);varstep=parseInt(data[4]);varmobileChecksum=parseInt(data[5j);varchecksum=0for(vari=0;i

8、代号的数组发送过来，PC端在回调函数中更换所冇不一致的方块。}else{//校验和一•致，正常处理移动方块的动作game,app1yAction(data[0]);actionTndex++;可参考：［HugedaHTML5技术教程之14］案例分析：制作网页游戏［MugcdaHTML5技术教程之12］制作跨屏互动应用总结，因为篇幅所限，案例分析中不可能详细讲解所冇代码，着重讲解设计思路和一些关键点，通过本案例可以休会使用Mugeda在线工具