HTML5技术教程：跨屏互动游戏

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

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

（一）游戏规则：

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

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

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

（二）、游戏玩法

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

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

    游戏动画演示：是在PC上打开下面的连接后，刷ＰＣ页面上的二维码，而不是下图上的二维码，下图只是效果图，由于PC端的二维码是动态生成的

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 动画可以实现的跨屏应用。本案例是一对一的跨屏游戏，也就是同时只能有一个玩家在玩。

    经过Mugeda 动画还能实现多对一的跨屏游戏，也就是多个玩家同时玩，好比大鱼吃小鱼的游戏，能够多个玩家鱼同时显示在大屏幕中玩。