[Mugeda HTML5技术教程之16]案例分析：制作跨屏互动游戏

本节我们将要做一个跨屏互动应用的案例分析，该应用时给一家商场做活动使用的，是一个跨屏爱消除游戏。ＰＣ端页面显示在连接在PC的大屏幕上，参与活动的玩家可以用自己的手机扫描PC端页面上的二维码，连接成功后，操作手机上的游戏可以同步控制主屏幕的游戏画面和结果。游戏结果会记录到排行榜，商家定期会对排名前10的玩家进行奖励。

游戏规则和前面分析过的爱消除的案例类似，这个游戏本身就是在原来的单机游戏的基础上有进一步开发做了跨屏通讯的内容。

（一）游戏规则：

          1、开始游戏时，德基的logo机出现在最上面一行的任意一格；

          2、游戏时，方块随机从上往下落，填满所有的方框，相同的三个石头不能相邻的排在一列或者一行；

          3、一次消除三个方块加200分，每多消除一块多加200分，比如一次消除四个加400分，一次消除5个加400分，以此类推。游戏结束时判断德基的logo位置，增加奖励分数，位置越往下奖励分数越高：依次为：0、200、400、600、1000、1400、2000。

（二）、游戏玩法

         只要三个相同的石头相邻的排在一列或者一行，他们就会消失，同时上面的方块头往下落，落到消失的方块头位置上

         游戏过程中有可能遇到没有可消的情况，为此设计了重置一列的功能，当点击重置按钮后，会从中间的数列中随机选择一列重置，游戏中重置按钮可以使用三次。

游戏动画演示：

https://cn.mugeda.com/client/preview_css3.html?id=937df6e5

设计思路：

这个跨屏游戏是在前面分析过网页游戏的基础上改造改成，所有游戏逻辑还是原来的逻辑。跨屏通讯互动方面是这样设计的：PC端和手机端都是两个游戏动画，手机端有输入和游戏逻辑而PC端没有输入只有同手机端完全一样的游戏逻辑。当手机端有输入时（即交换相邻两个方块的位置），手机端会将要交换的两个方块的编号发送到PC端，两方通过自己的逻辑可以判断交换后的结果是否满足消除方块的条件，如果满足将相应方块消除，否则再将两个方块换回。设计增加了通讯的容错机制：每次通讯时手机端会在后面添加又所有方块位置生产的校验和，PC端收到后会用该校验和和自己的做比较，如果不一致，则证明出错，本次操作不做处理并且通知手机端将其所有方块位置的数组发过来，收到后安手机端方块位置数组重置PC端的所有方块。

关键点：

1. 手机端每次移动方块都向PC端发起通讯，并附带分数和校验和

for(var i = 0; i < hang * hang ; i++)

{

        checksum += stoneArray[i].type;

}

socket.send(‘action‘, "" + clickNum + "," + clickTwoNum + "_" + totaltime+‘_‘+timeBonus+‘_‘+score+‘_‘+(moveSteps)+‘_‘+checksum);

同时PC端收到方块移动的事件后,解析出相应参数，并进行相应操作。

//先将事件的数据放入数组中，等候解析处理

if(msg.event == ‘action‘) {

       actionArray.push({data:msg.data, status:1});

}

//解析数据，并处理

var data = actionArray[actionIndex].data.split(‘_‘);

totaltime = data[1];

timeBonus = parseInt(data[2]);

var mobileScore = parseInt(data[3]);

var step = parseInt(data[4]);

var mobileChecksum = parseInt(data[5]);

var checksum = 0

for(var i = 0; i < hang * hang ; i++)

{

      checksum += stoneArray[i].type;

}

if(checksum != mobileChecksum)

{

     //如果校验和不一致，向手机端发起同步数据的请求，手机端收请求后把含有所有方块代号的数组发送过来，PC端在回调函数中更换所有不一致的方块。

}

else

{

        //校验和一致，正常处理移动方块的动作

        game.applyAction(data[0]);

         actionIndex++;

}

可参考：[Mugeda HTML5技术教程之14]案例分析：制作网页游戏

              [Mugeda HTML5技术教程之12]制作跨屏互动应用

总结，因为篇幅所限，案例分析中不可能详细讲解所有代码，着重讲解设计思路和一些关键点，通过本案例可以体会使用Mugeda 动画能够实现的跨屏应用。本案例是一对一的跨屏游戏，也就是同时只能有一个玩家在玩。通过Mugeda 动画还能实现多对一的跨屏游戏，也就是多个玩家同时玩，比如大鱼吃小鱼的游戏，可以多个玩家鱼同时显示在大屏幕中玩。