练习项目介绍

这是一个拧柠檬汁的小游戏，模仿的4399小游戏里的，当做自己练手的项目。所用图片来自于截图后简单处理了一下，仅供学习参考用途（图片比较粗糙），PC下chrome浏览器运行截图如下：

微信开发者工具下截图如下：

我的开发环境：

cocos creator v1.9.1    vscode v1.26  微信开发者工具  chrome浏览器

win7 64   

环境的配置请参考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，已经在后面的项目中解决了。可以在我的资源里单独下载

详见cocos creator开发微信小游戏（二）