我们的编写的第一个Cocos2d-JS程序，命名为HelloJS，从该工程开始学习其它的内容。
创建工程
我们创建Cocos2d-JS工程可以通过Cocos2d-x提供的命令工具cocos实现，但这种方式不能与WebStorm或Cocos Code IDE集成开发工具很好地集成，不便于程序编写和调试。由于Cocos Code IDE工具是Cocos2d-x开发的专门为Cocos2d-JS和Cocos2d-x Lua开发设计的，因此使用Cocos Code IDE工具很方便创建Cocos2d-JS工程。
首先我们需要在Cocos Code IDE工具中先配置JavaScript框架，打开Cocos Code IDE工具，选择菜单Window→Preferences，弹出对话框如下图所示，选择Cocos→JavaScript在右边的JavaScript Frameworks中选择<Cocos2d-JS引擎目录>。
JavaScript框架配置不需要每次都进行，只是在最开始的配置一下，但创建工程的时候，Cocos Code IDE工具会从这个JavaScript框架目录中创建工程文件。
接下来我们就可以创建JavaScript工程了，选择菜单File→New→Project，如下图所示，弹出项目类型选择对话框。
我们选中Cocos JavaScript Project，然后点击Next按钮，弹出如下图所示的对话框。我们在Project Name项目中输入工程名称，Create Project in Workspace是在Workspace目录中创建工程，我们需要选中该项目，Create From Existing Resource项目选中可以让我们从已经存在的工程创建，现在我们不需要选中该项目。
选择完成点击Next按钮进入到如下图所示配置运行环境对话框，在该对话框中我们可以配置项目运行时信息。Orientation项目是配置模拟器的朝向，其中landscape是横屏显示，portriat是竖屏显。Desktop Runtime Settings中的Title是设置模拟器的标题，Desktop Windows initialize Size是设置模拟器的大小。Add Native Codes是设置添加本地代码到工程，在本来中我们不需要添加本地代码。最后点击Finish按钮完成创建操作，创建好工程之后，如下图所示。
Cocos Code IDE中运行
创建好工程后我们可以测试一下，在左边的工程导航面板中选中index.html文件，右键菜单中选择Run As→Cocos JSBinding运行我们刚刚创建的工程，运行结果如下图所示。
我们主要编写的程序代码是在src目录下，在本例中app.js文件负责处理主要的如上图场景界面逻辑。如果我们想调试程序，可以设置断点，如下图所示，点击行号之前的位置，设置断点。
调试运行过程，右键菜单中选择Debug As→Cocos JSBinding菜单。如下图所示，程序运行到第32行挂起，并进入调试视图，在调试视图中我们可以查看程序运行的堆栈、变量、断点、计算表达式和单步执行程序等操作。
在调试视图中调试工具栏的按钮，主要调试按钮说明如下图所示。
WebStorm中运行
Cocos Code IDE工具提供的运行是本地运行，即Cocos2d-JS程序通过JSB在本地运行。如果我们需要测试Web浏览器上运行情况，需要使用WebStorm工具，由于我们已经在Cocos Code IDE创建了工程我们不需要再创建了，但是需要进入到WebStorm中进行设置，创建文件在本地WebStorm工程，为了能与Cocos Code IDE共用相同工程我们需要设置WebStorm的Project Root为Cocos Code IDE的Workspace目录。
设置完成界面如图下所示，其中的HelloJS是我们要运行的工程，右键选择HelloJS中的index.html文件就可以运行了，过。运行结果如下图所示。
工程文件结构
我们创建的HelloJS工程已经能够运行起来了，下面我们介绍一下HelloJS工程中的文件结构，我们使用Cocos Code IDE打开HelloJS工程，左侧的导航面板如下图所示。
在上图所示导航面板中，res文件夹存放资源文件的，src文件夹是主要的程序代码，其中的app.js是实现游戏场景的JavaScript文件，resource.js定义资源对应的变量。HelloJS根目录下还有config.json、project.json、index.html和main.js，config.json保存模拟器运行配置信息，在我们创建工程时候生成，project.json是项目的配置信息，index.html是Web工程的首页，main.js与首页index.html对应的JavaScript文件。
代码解释
HelloJS工程中有很多文件下面我们详细解释一下它们内部的代码：
1、index.html文件
index.html文件只有在Web浏览器上运行才会启动它，index.html代码如下：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Cocos2d-html5 Hello World test</title>
- <link rel="icon" type="image/GIF" href="res/favicon.ico"/>
- <meta name="apple-mobile-web-app-capable" content="yes"/> ①
- <meta name="full-screen" content="yes"/>
- <meta name="screen-orientation" content="portrait"/>
- <meta name="x5-fullscreen" content="true"/>
- <meta name="360-fullscreen" content="true"/> ②
- <style>
- body, canvas, div {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- -khtml-user-select: none;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- }
- </style>
- </head>
- <body style="padding:0; margin: 0; background: #000;">
- <canvas id="gameCanvas" width="800" height="450"></canvas> ③
- <script src="frameworks/cocos2d-html5/CCBoot.js"></script> ④
- <script src="main.js"></script> ⑤
- </body>
- </html>
上述代码第①~②行是设置网页的meta信息，meta信息是网页基本信息，这些设置能够使得index.html网页很好地在移动设备上显示。
第③行代码放置一个canvas标签，canvas标签是HTML5提供的，通过JavaScript 可以在Canvas上绘制 2D 图形，Cocos2d-JS在网页运行的游戏场景都是通过Canvas渲染出来的，Cocos2d-JS的本地运行游戏场景的渲染是通过OpenGL渲染出来的，事实上HTML5也有类似于OpenGL渲染技术，它是WebGL但是考虑到浏览器的支持程度不同，Cocos2d-JS没有采用WebGL渲染技术而是Canvas渲染，虽然Canvas渲染速度不及WebGL，但是一般的网页游戏都能满足要求。
第④行代码是导入JavaScript文件CCBoot.js，我们不需要维护该文件。第⑤行代码是导入JavaScript文件main.js，我们需要维护该文件。
2、main.js文件
main.js负责启动游戏场景，无论Web浏览器运行还是本地运行都是通过该文件启动游戏场景的，main.js代码如下：
c
- c.game.onStart = function(){ ①
- cc.view.adjustViewPort(true); ②
- cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL); ③
- cc.view.resizeWithBrowserSize(true); ④
- //load resources
- cc.LoaderScene.preload(g_resources, function () { ⑤
- cc.director.runScene(new HelloWorldScene()); ⑥
- }, this);
- };
- cc.game.run(); ⑦
上述代码第①行是启动游戏，cc.game是一个游戏启动对象。代码第②~④行是设置游戏视图属性，其中第③行是设置游戏视图大小，它涉及到屏幕适配问题，cc.ResolutionPolicy.SHOW_ALL是屏幕适配策略。
第⑤行代码是加载游戏场景所需要资源，其中g_resources参数是加载资源的数组，该数组是在src/resource.js文件中定义的。第⑥行代码是运行HelloWorldScene场景，cc.director是导演对象，运行HelloWorldScene场景会进入到该场景。
第⑦行代码cc.game.run()是运行游戏启动对象。
3、project.json文件
项目配置信息project.json文件代码如下：
- {
- "project_type": "javascript",
- "debugMode" : 1,
- "showFPS" : true, ①
- "frameRate" : 60, ②
- "id" : "gameCanvas",
- "renderMode" : 0,
- "engineDir":"frameworks/cocos2d-html5",
- "modules" : ["cocos2d"], ③
- "jsList" : [ ④
- border-style: none none none solid; border-left-width: 3px; border-left-color: #6ce26c; col