本节我们将要做一个跨屏互动应用的案例说明，该应用时给一家阛阓做勾当行使的，是一个跨屏爱消除游戏。ＰＣ端页面表现在毗连在PC的大屏幕上，参加勾当的玩家可以用本身的手机扫描PC端页面上的二维码，毗连乐成后，操纵手机上的游戏可以同步节制主屏幕的游戏画面和功效。游戏功效会记录到排行榜，商家按期会对排名前10的玩家举办嘉奖。

游戏法则和前面说明过的爱消除的案例相同，这个游戏自己就是在原本的单机游戏的基本上有进一步开拓做了跨屏通信的内容。

（一）游戏法则：

1、开始游戏时，德基的logo机呈此刻最上面一行的恣意一格； 2、游戏时，方块随机从上往着落，填满全部的方框，沟通的三个石头不能相邻的排在一列可能一行； 3、一次消除三个方块加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端的全部方块。

要害点：

手机端每次移动方块都向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 动画还能实现多对一的跨屏游戏，也就是多个玩家同时玩，好比大鱼吃小鱼的游戏，可以多个玩家鱼同时表现在大屏幕中玩。

(