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

標籤：html5   神經貓   web   

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

    1.建立項目刪除情境中的球和草地，並放置背景圖片，和貓移動的方塊：

     

    這裡情境的背景圖和貓移動的圓圈均是簡單的Label圖片。

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

   

    貓從蹲下到站立一共有16個狀態，點擊選擇圖片來進行圖片的拆分。

    3.放置遊戲開始的介面圖片：

    

    點擊開始遊戲的時候隱藏該控制項並把幀動畫顯示出來：

    

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

    4.接下來在情境視窗的Onopen事件處理函數裡面實現主要的程式邏輯：

    

    這部分代碼較多，主要是最短路徑和最大通路演算法的實現，這不在我們的討論範圍內，需要的可以去線上編輯介面的情境Onopen事件處理中找到。

    5.最後在遊戲結束介面放置一張圖片，以便重新開始遊戲：

    

    實現當使用者點擊"再來一次"遊戲的邏輯：

    

    

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

    參考資料：

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

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