Cocos Creator開發微信小遊戲（三）實戰練習篇
目錄
cocos creator練習專案介紹
這是一個使用cocos creator做的擰檸檬汁小遊戲，模仿的4399小遊戲裡的，當做自己練手的專案。所用圖片來自於截圖後簡單處理了一下，僅供學習參考用途（圖片比較粗糙），PC下chrome瀏覽器執行截圖如下：
微信開發者工具下截圖如下：
我的開發環境：
cocos creator v1.9.1 vscode v1.26 微信開發者工具 chrome瀏覽器
win7 64
環境的配置請參考 Cocos Creator開發微信小遊戲(一) 中官方文件裡的步驟
使用cocos creator製作過程
一：新建cocos creator工程
選擇 新建--->空白專案。路徑不要含有中文字元，否則會有不可預知的錯誤或者難查的Bug
二：製作解析度選擇
當前主流遊戲的解析度，橫屏： 1280*720 豎屏：720*1280，手機的解析度越來越高，低解析度在某些高階手機上會有毛邊。
我這練習使用的是 640*960,不建議使用。
由於遊戲是一個豎屏遊戲，所以適配選擇的是Fit Height, 在高度上佔滿手機螢幕，橫向上的UI使用Widget元件，對齊Canvas
三： 指令碼語言選擇
我選擇使用JavaScript，反正這幾個都不熟悉
四：程式碼如何組織
這個問題一開始比較糾結，該怎麼將模組組織起來。剛接觸cocos creator，以前使用過2dx, 但兩者的開發思路相差還是挺大的。cocos creator是基於元件(component)的，基本一個功能模組就是一個元件。一個元件掛在一個Node上。Node的樹結構當場景載入完成後就new出來了，Node上掛載的元件在執行時也就可以Get到。2dx時候，需要自己去管理建立時機，模組順序等
這是我組織的程式碼結構，截圖如下：
DataManager:處理配置檔案資料以及遊戲邏輯相關聯的資料，一個單例
SoundManager：遊戲中所有的聲音管理類，一個單例
UI：管理所有的UI，一個單例
五：遊戲邏輯實現
由於邏輯比較簡單，整個遊戲邏輯放在Game.js裡，遊戲中介面UIGame.js, 結束介面UIGameOver.js,排行介面 UIRank.js
結構如下圖：
開發的過程比cocos2dx時要方便了很多，直接拖拽節點與指令碼，整個流程就OK了。
完整的工程及程式碼，可以在我的資源包裡下載，由於是練習用的，有些程式碼及資源還有很大的優化餘地
六：cocos creator 微信子域排行榜
上面資源包裡的微信排行榜是一個比較早的工程了，有一些Bug，已經在後面的專案中解決了。可以在我的資源裡單獨下載
最後，想下載原始碼沒有積分的，可以在下面留言留郵箱，雖然不能保證即時回覆
試玩一下，未對Web Mobile下執行做測試，只當做一個功能演示罷了。