使用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 -t coffeeify main.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更合我的口味。