DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> html5案例分析:制作跨屏互動游戲
html5案例分析:制作跨屏互動游戲
編輯:HTML5詳解     

本節我們將要做一個跨屏互動應用的案例分析,該應用時給一家商場做活動使用的,是一個跨屏愛消除游戲。PC端頁面顯示在連接在PC的大屏幕上,參與活動的玩家可以用自己的手機掃描PC端頁面上的二維碼,連接成功後,操作手機上的游戲可以同步控制主屏幕的游戲畫面和結果。游戲結果會記錄到排行榜,商家定期會對排名前10的玩家進行獎勵。

 

游戲規則和前面分析過的愛消除的案例類似,這個游戲本身就是在原來的單機游戲的基礎上有進一步開發做了跨屏通訊的內容。

(一)游戲規則:

          1、開始游戲時,德基的logo機出現在最上面一行的任意一格;

          2、游戲時,方塊隨機從上往下落,填滿所有的方框,相同的三個石頭不能相鄰的排在一列或者一行;

          3、一次消除三個方塊加200分,每多消除一塊多加200分,比如一次消除四個加400分,一次消除5個加400分,以此類推。游戲結束時判斷德基的logo位置,增加獎勵分數,位置越往下獎勵分數越高:依次為:0、200、400、600、1000、1400、2000。

(二)、游戲玩法

         只要三個相同的石頭相鄰的排在一列或者一行,他們就會消失,同時上面的方塊頭往下落,落到消失的方塊頭位置上

         游戲過程中有可能遇到沒有可消的情況,為此設計了重置一列的功能,當點擊重置按鈕後,會從中間的數列中隨機選擇一列重置,游戲中重置按鈕可以使用三次。

 

游戲動畫演示:是在PC上打開下面的鏈接後,刷PC頁面上的二維碼,而不是下圖上的二維碼,下圖只是效果圖,因為PC端的二維碼是動態生成的

設計思路:

這個跨屏游戲是在前面分析過網頁游戲的基礎上改造改成,所有游戲邏輯還是原來的邏輯。跨屏通訊互動方面是這樣設計的: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 動畫還能實現多對一的跨屏游戲,也就是多個玩家同時玩,比如大魚吃小魚的游戲,可以多個玩家魚同時顯示在大屏幕中玩。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved