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 動畫還能實現多對一的跨屏遊戲，也就是多個玩家同時玩，好比大魚吃小魚的遊戲，能夠多個玩家魚同時顯示在大屏幕中玩。