天天看點

HTML5APP實戰(1): 圍住神經貓(二)

     之前的文章分析了圍住神經貓遊戲的"偶然性",這篇文章主要介紹通過Gamebuilder + CanTk來完成整個遊戲的設計開發。

    1.建立項目删除場景中的球和草地,并放置背景圖檔,和貓移動的方塊:

HTML5APP實戰(1): 圍住神經貓(二)

    這裡場景的背景圖和貓移動的圓圈均是簡單的Label圖檔。

    2.放置一個幀動畫來表示貓

HTML5APP實戰(1): 圍住神經貓(二)

    貓從蹲下到站立一共有16個狀态,點選選擇圖檔來進行圖檔的拆分。

    3.放置遊戲開始的界面圖檔:

HTML5APP實戰(1): 圍住神經貓(二)

    點選開始遊戲的時候隐藏該控件并把幀動畫顯示出來:

HTML5APP實戰(1): 圍住神經貓(二)

    Gamebuilder提供了非常人性化的代碼編輯工具,而且極大的降低了非程式員的遊戲開發難度,幾乎不需要幾行代碼,你就能完成複雜的操作邏輯:)

    4.接下來在場景視窗的Onopen事件處理函數裡面實作主要的程式邏輯:

HTML5APP實戰(1): 圍住神經貓(二)

    這部分代碼較多,主要是最短路徑和最大通路算法的實作,這不在我們的讨論範圍内,需要的可以去線上編輯界面的場景Onopen事件進行中找到。

    5.最後在遊戲結束界面放置一張圖檔,以便重新開始遊戲:

HTML5APP實戰(1): 圍住神經貓(二)

    實作當使用者點選"再來一次"遊戲的邏輯:

HTML5APP實戰(1): 圍住神經貓(二)

    到這裡整個圍住神經貓遊戲基本結束了。就是這樣一款簡簡單單的小遊戲,風靡了整個微信圈子。還被人吹的神乎其神。我相信借用Gamebuilder+CanTK這套神器,下次引爆微信圈子的小遊戲,會出自你之手:)

    參考資料:

    https://github.com/drawapp8/gamebuilder/wiki/%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3

繼續閱讀