[Mugeda HTML5技能教程之16]案例說明：建造跨屏互動游戲｜概念評

本節我們將要做一個跨屏互動應用的案例說明，該應用時給一家阛阓做勾當行使的，是一個跨屏愛消除游戲。ＰＣ端頁面表現在毗連在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 動畫還能實現多對一的跨屏游戲，也就是多個玩家同時玩，好比大魚吃小魚的游戲，可以多個玩家魚同時表現在大屏幕中玩。

(