本章通过制作跨平台的Helloworld来学习：
目标：利用模板项目，能自己创建一个跨平台游戏
为何非要制作跨平台游戏？
一次编程，随处运行。适配托管，节省时间
什么是Cocos2d-JS，它如何工作？
Cocos2d-JS是开源2D游戏框架，用JavaScript实现跨平台，能制作web版和原生版应用。
运行之前应做：
下载官方IDE：http://www.cocos2d-x.org/products/codeide（自动补全，代码提示等）
其他编辑器推荐：PSPad(Windows)、TextWrangle(Mac)
服务器相关：WAMP（Windows）、MAMP(Mac) (编码时非必需。发行相关)
推荐Chrome（高度支持html5）测试程序
下载Cocos2d-JS最新版本：http://www.cocos2d-x.org/download 建议3.x版本
资料
官方资料：http://www.cocos2d-x.org/wiki/Cocos2d-JS
Cocos2d-JS项目结构
Hello Cross-World (完全可以用文本编辑器制作)
<!DOCTYPE html>
<head>
<title>
My Awesome game
</title>
<script src="cocos2d-html5/CCBoot.js" type="text/javascript">
</script>
<script src="main.js" type="text/javascript">
</script>
</head>
<body style="padding:0;margin:0;">
</body>
</html>
注释：
<script src="cocos2d-html5/CCBoot.js" type="text/javascript">框架引用
<script src="main.js" type="text/javascript">游戏入口
<body style="padding:0;margin:0;">展示游戏(gameCanvas相关)
2. 然后创建main.js。这是index引用游戏的接口，控制游戏全局：
cc.game.onStart = function(){
cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.
SHOW_ALL);
cc.director.runScene(new gameScene());
};
cc.game.run();
注释： 它远没有看上去那么复杂，只需要关系分辨率配置即可。
我们只需像web设计者一样适配最受欢迎的320*480（portait mode）即可：
cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL);
以最低分辨率来配置，可以相当确定您的游戏可以在任何设备上正确运行。
或者根据手机和电脑来区分：
if (cc.sys.isMobile)
cc.view.setDesignResolutionSize(320,500,cc.ResolutionPolicy.FIXED_WIDTH);
else cc.view.setDesignResolutionSize(320,480,cc.ResolutionPolicy.SHOW_ALL);
cc.director.runScene(new gameScene()); 场景(Scene)：Cocos2d游戏以许多场景组成。gameScene场景就是将要运行的场景。
3. 编写另一个全局文件project.json:
{
"debugMode" : 0,
"showFPS" : false,
"frameRate" : 60,
"id" : "gameCanvas",
"renderMode" : 0,
"engineDir":"cocos2d-html5/",
"modules" : ["cocos2d"],
"jsList" : [
"src/gamescript.js"
]
}
注释：
4. 最后我们写游戏脚本本身：gamescript.js(置于根目录下的src目录下)。它包含游戏场景的定义：
var gameScene = cc.Scene.extend({ onEnter:function () { this._super(); console.log("my awesome game starts here"); } });
现在，你在浏览器中打开index.html，就可以从开发者控制台看见：
my awesome game starts here
说明创建模板类游戏成功！
预加载和添加图片
在本例中，我们使用一张64*64 PNG图片：
在游戏中的等待是令人厌烦的，适当的加载动画会减少这种影响，而且我们的游戏引擎很容易实现它：
1. 在src中创建loadassets.js文件:
var gameResources = [ "assets/target.png" ];
定义一个名为gameResources的数组储存将预加载的资源。所以我们要在根目录下创建assets目录，放置我们的图片target.png于此。
2. 在project.json中加入粗体部分以包含文件：
{
"debugMode" : 0,
"showFPS" : false,
"frameRate" : 60,
"id" : "gameCanvas",
"renderMode" : 0,
"engineDir":"cocos2d-html5/",
"modules" : ["cocos2d"],
"jsList" : [
"src/loadassets.js",
"src/gamescript.js"
]
}
3.现在引擎知道加载的图片在哪，只需要在场景开始前预加载即可，修改main.js如下：
cc.game.onStart = function(){ cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy. SHOW_ALL); cc.LoaderScene.preload(gameResources, function () { cc.director.runScene(new gameScene()); }, this); }; cc.game.run();
cc.LoaderScene.preload的构造函数会从gameResources加载图像
4.预加载后还需要将图片加入我们的场景：修改gamescript.js:
var gameScene = cc.Scene.extend({ onEnter:function () { this._super(); var gameLayer = new game(); gameLayer.init(); this.addChild(gameLayer); } }); var game = cc.Layer.extend({ init:function () { this._super(); var target = cc.Sprite.create("assets/target.png"); this.addChild(target,0); } });
Cocos2d-JS的层次结构：
在浏览器中打开index.html，就会看见：
我们发现图像在左下角，现在修改gamescript.js，将图像置中：
var gameScene = cc.Scene.extend({
onEnter:function () {
this._super();
var gameLayer = new game();
gameLayer.init();
this.addChild(gameLayer);
}
});
var game = cc.Layer.extend({
init:function () {
this._super();
var target = cc.Sprite.create("assets/target.png");
this.addChild(target,0);
target.setPosition(160,240);
}
});
移除图像和修改背景颜色
我们已经知道用addChild添加图像，同样的，removeChild可以移除图像
同时，添加一个背景层以改变背景颜色：
var gameScene = cc.Scene.extend({
onEnter:function () {
this._super();
var gameLayer = new game();
gameLayer.init();
this.addChild(gameLayer);
}
});
var backgroundLayer;
var game = cc.Layer.extend({
init:function () {
this._super();
backgroundLayer = cc.LayerColor.create(new cc.Color(40,40,40,255),320, 480);
this.addChild(backgroundLayer);
var target = cc.Sprite.create("assets/target.png");
backgroundLayer.addChild(target,0);
target.setPosition(160,240);
setTimeout(function(){
backgroundLayer.removeChild(target);
}, 3000);
}
});
setTimeout(function(){
backgroundLayer.removeChild(target);
}, 3000); 在3000毫秒后执行内联函数（移除图片）。
总结：
第一章 Hello World – A Cross-platform Game
原文：http://www.cnblogs.com/wwq1993/p/4359069.html