使用CoffeeScript+Browserify开发cocos2d-js游戏的体验


使用cocos2d-js一年多了,从早期的2.1.2开始到现在的3.0 对javascript/cocos2d-js的使用越来越顺手。不过目前涉及的项目都只是卡牌类回合制游戏,还有自己做的一些益智类小游戏。每次自己做一个小游戏或demo都需要从原来的项目中Copy文件并修改后才能正常使用,所以一直在想能否写一个自己的类库。

由上述原因,一直在思考如何模块化的构建cocos2d-js工程代码,有些基础的代码可以反复利用。无意见看到cocos2dx.org官网上的文章《MVC模式开发cocos2d-js游戏的系列文章》于是想尝试使用CoffeeScript+Browserify的方式实现一个游戏demo,以验证能实现模块化的目的。


一.CoffeeScript

CoffeeScript 是一门编译到 JavaScript 的小巧语言. 关于CoffeeScript的详细可以看他的网官网站:

www.coffeescript.org

www.coffeescript.cn

早在一年前就了解过coffee,感觉很好,但一直没机会用。逮住这个机会尝试一下,同时还有以下原因:

1.感觉coffee很爽,但没有实践过,完全是个人的喜好,喜欢折腾。

2.感觉可以偷懒,CoffeScript语法简洁,还避开javascript的一些坑。

3.在WebStrom中同样可以支持代码补全\调试,使写起代码很享受。

4.可以装逼,让人感觉很牛的样子!

二.Browserify

Browserify 可以让你使用类似于node的require() 的方式来组织浏览器端的 Javascript 代码,通过预编译让前端Javascript 可以直接使用 Node NPM 安装的一些库。


Cocos2d-JS MVC模块化开发系列文章中专门有一篇讲解Browserify的使用,大家可以看看。在cocos2d-js中不管我们使用的是引擎代码还是自己写的类、数据定义其实大都是使用的全局变量。对于工程中使用引擎暴露的接口没有什么问题,因为我们就是依赖(爱)上他了。但我们想重用自己代码怎么办呢?如何做到模块化?nodejs的Browserify可以帮助到我们。

1.不用再去理会project.json中的jsLlist数组了

记得最早做cocos2d-js项目时,手工填写jsList数组,而且还要注意加载的依赖顺序。后来自己写了个蹩脚的脚本工具来生成才得以解脱。使用Browserify后可以完全不用理会jsLlist了,因为我们的所有代码将会被Browserify编译输出到一个文件中。

2.解决名字污染,代码不易被破坏

在js中可以任意为已经生成的对象动态增删属性或方法,这使得js非常的灵活。但随意滥用会导致代码可读性降低,或者误用覆盖正常的代码,而且还不易发现。使用Browserify可以减少这类问题的发生。

3.使用require与exports来管理你的代码

使用别的js文件中的类、数据定义时需要require('xxx.js'),如果你想导出类、方法、数据定义时使用exports来暴露你提供的功能。这里稍微会比以前的写法要多动点脑子,因为我在头几次的时候遇到好几次出错。


三. coffeeify插件

我使用了CoffeeScript来编写游戏代码,CoffeeScript代码是需要编译成js才能运行的。可以我又使用了Browserify,它也会预编译我的js代码,这下不知道该怎么办了。因为coffee代码中使用了require\exports这是Browserify提供的接口。先使用coffee的编译命令他们不认识require\exports,如果先使用Browserify的命令编译他又不认识coffee代码。一下子感觉到心都凉了,不过我还是没放弃,经过一番的google搜索和折腾发现了coffeeify。coffeeify是Browserify的一个插件,它可以支持你使用coffeescript与js代码的混合开发。对我来说简直是太棒了。

使用方法:browserify -tcoffeeifymain.coffee --debug > main.js


四. 总结

终于大功告成,我做了一个简易的画线消除 + 对战的小游戏(单机)。目前只是个不完整的demo,但有基本的功能。

1.连接两个或两个以上相同颜色的珠子,后会激活他们飞出打击对方的珠子。

2.如果双方激活的珠子碰到,以剪刀、石头、布来判定谁吃掉谁。

3.阵型中的未激活的珠子会被对方激活的珠子吃掉。



代码github:https://github.com/ShawnZhang2015/chaoswars

做这个demo的过程中还是有些与以往不两同的体验,在html5上的开发、调试上感觉非常不错。在nantive上调试会有些不方便,只能调试打包后的js代码,而且都在一个文件中。还有不建议在不熟练javascript的前提下使用CoffeeScript,WebStorm调试起也有些小问题@member不能识别,有时断点不准确。还有就是代码风格你是否认同。Browserify对于改善代码的依赖有很大帮助,如果不在乎真机调试问题我认为是不错的选择。总的来说非常合适纯html5游戏中使用。感觉纯js+Browserify更合我的口味。

相关文章

    本文实践自 RayWenderlich、Ali Hafizji 的文章《...
Cocos-code-ide使用入门学习地点:杭州滨江邮箱:appdevzw@1...
第一次開始用手游引擎挺激动!!!进入正题。下载资源1:从C...
    Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发...
1.  来源 QuickV3sample项目中的2048样例游戏,以及最近《...
   Cocos2d-x3.x已经支持使用CMake来进行构建了,这里尝试...