目錄
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下運行做測試，只當做一個功能演示罷了。