The experience of developing COCOS2D-JS games using Coffeescript+browserify

The use of COCOS2D-JS for more than a year, from the early 2.1.2 began to the present 3.0 of the use of javascript/cocos2d-js more and more handy. However, the current project is only a card-based round game, there are some of their own puzzle-type games. Every time I do a small game or demo will need to copy files from the original project and modified to normal use, so I have been thinking about whether to write a library of their own class.

For the above reasons, we have been thinking about how to modularize the construction of COCOS2D-JS Engineering code, some basic code can be reused. No comments See cocos2dx.org official online article "MVC Pattern Development COCOS2D-JS game series article", so want to try to use coffeescript+ Browserify the way to implement a game demo to verify the purpose of modularity.

I. coffeescript

Coffeescript is a small language compiled into JavaScript. more about Coffeescript can be seen on his web site:

www.coffeescript.org

www.coffeescript.cn

I had known coffee a year ago and felt good, but I never had a chance to use it. Catch this opportunity and try it for the following reasons:

1. Feel coffee is very cool, but no practice, completely personal preferences, like tossing.

2. The feeling can be lazy, coffescript grammar concise, but also avoid some javascript hole.

3. You can also support code completion \ Debugging in Webstrom, so that writing code is enjoyable.

4. Can be installed force, let people feel very cow look!

Two. browserify

Browserify allows you to organize your browser-side JavaScript code in a way that is similar to Node's require (), which allows front-end JavaScript to directly use some of the libraries that node NPM installs.

COCOS2D-JS MVC Modular Development series of articles dedicated to the use of browserify, you can see. in Cocos2d-js, whether we use engine code or our own classes, data definitions are mostly global variables used. There is nothing wrong with the interface exposed by the engine in the project, because we are dependent on him. But What if we want to reuse our own code? How to do modularity? Nodejs's browserify can help us.

1. No more ignoring the jsllist array in Project.json .

Remember to do the first COCOS2D-JS project, manually fill in the Jslist array, but also pay attention to the loading of the dependency order. Later, I wrote a crappy scripting tool to build to be free. After using browserify you can completely ignore jsllist, because all our code will be browserify compiled output to a file.

2. Solve the name pollution, the code is not easy to destroy

in the JS can be arbitrarily for the generated objects dynamically delete attributes or methods, which makes JS very flexible. But arbitrary misuse can lead to lower code readability, or misuse of code that covers normal, and is not easily discoverable. the use of browserify can reduce the occurrence of such problems.

3. Use require and exports to manage your code

Require (' xxx.js ') is required to use classes and data definitions from other JS files, and if you want to export classes, methods, and data definitions, use exports to expose the functionality you provide. It's a little bit more of a brain than it used to be, because I've had several mistakes in the first few times.

Three. Coffeeify plug-in

I used coffeescript to write game code, Coffeescript code needs to be compiled into JS to run. I can also use the browserify, it will precompile my JS code, this does not know what to do. Because Require\exports is used in the coffee code, this is the interface provided by Browserify. use Coffee's compile command first they don't know require\exports, and if you use Browserify's command to compile it, he doesn't know coffee code. Suddenly feel the heart is cold, but I still did not give up, after a Google search and toss found coffeeify. coffeeify is a plugin for browserify that allows you to use Coffeescript and JS code for mixed development. It was so great for me.

How to use: Browserify-t coffeeify main.coffee--debug > Main.js

Four. Summary

Finally finished, I made a simple line to eliminate + PVP games (stand-alone). Currently, it's just an incomplete demo, but it has basic functionality.

1. Connect two or more than two beads of the same color, and then activate them to fly out against each other's beads.

2. If the beads that are activated by both sides meet, the scissors, stone, cloth to determine who eats who.

3. The inactive beads in the formation are eaten by the beads activated by the other.

Code Github:https://github.com/shawnzhang2015/chaoswars

do this demo process is still some with the previous experience, in the development of HTML5, debugging feel very good. Debugging on the nantive is a bit inconvenient, debugging only the packaged JS code, and all in one file. It is also not recommended to use Coffeescript,webstorm debugging on the premise of unskilled JavaScript there are also some small problems @member not recognized, and sometimes the breakpoint is not accurate. There is the code style you agree. Browserify is a great help in improving your code dependencies, and I think it's a good choice if you don't care about the real-machine debugging problem. Generally very suitable for use in pure HTML5 games. Feel pure js+browserify more to my taste.

The experience of developing COCOS2D-JS games using Coffeescript+browserify