参考官网：https://www.cocos.com/docs/js/1-about-cocos2d-js/1-1-a-brief-history/zh.html
跨全平台（PC端，手机端），游戏引擎，开源易学易用有文档，非常容易上手。
可在浏览器中完成游戏的开发和调试，然后发布到网页, 移动 还有主机平台
Cocos2d-JS是Cocos2d-x的JavaScript版本，融合了Cocos2d-HTML5和Cocos2d-x JavaScript Bindings（JSB）。
Cocos2d-html5是Cocos2d-JS的一个重要模块，是一个面向Web的游戏引擎，并完全兼容HTML5规范，所以基于Cocos2d-JS开发的游戏天然可运行在所有支持HTML5规范的浏览器。
Cocos2d-JS和其他的Cocos2d分支相比，其跨平台的能力是最强的，使用难度也是最低的。主要用于h5游戏开发。
转载于:https://www.cnblogs.com/mySummer/p/10699691.html
cocos2d - js 知识整理
目录结构
main.js设置启动的场景
project.json配置写好的js文件index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cocos2d-html5</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;"> <canvas id="gameCanvas" width="720" height="1280"></canvas> <script src="frameworks/cocos2d-html5/CCBoot.js"></script> <script src="main.js"></script> </body> </html>main.js代码
cc.game.onStart = function(){ cc.view.adjustViewPort(true); //屏幕尺寸定义函数：setDesignResolutionSize cc.view.setDesignResolutionSize(640, 1136, cc.ResolutionPolicy.SHOW_ALL); cc.view.resizeWithBrowserSize(true); cc.LoaderScene.preload(g_resources, function () { cc.director.runScene(new MenuScene()); }, this); }; cc.game.run();函数：cc.view.setDesignResolutionSize 的参数
project.json文件
在jsList中配置写好的文件
{ "project_type": "javascript", "debugMode": 0, "showFPS": true, "frameRate": 60, "id": "gameCanvas", "renderMode": 0, "engineDir": "frameworks/cocos2d-html5", "modules": [ "cocos2d","ccpool" ], "jsList": [ "src/resource.js", "src/sushi/PlayScene.js", ] }启动流程
导演
负责游戏的初始化与过程统筹，cc.director是个单例对象
1.设置帧频 cc.director.setAnimationInterval(1/60) 2.获取屏幕的大小 var size=cc.director.getWinSize() size.width(size.height) 3.替换方式场景启动 cc.director.runScene(new Resolution()) 4.栈方式场景启动 cc.director.pushScene(new Resolution()) cc.director.popScene(); 5.动画场景 Var animScene=new cc.TransitionSlideInT(1, scene); cc.director.pushScene(animScene)节点
节点常用基本属性
位置属性 node.x=100 node.y=100 node.setPosition(100,100) node.getPosition() node.setPositionX(100) node.getPositionY() 大小属性：适用：Layer，不适应：sprite node.width node.height 锚点与层级 node.setAnchorPoint(0.5,0.5) node.getAnchorPoint() node.setLocalZOrder(100) node.getLocalZOrder() 旋转属性 node.setRotationX（angle） node.getRotationX() 缩放属性 node.setScale(radio) node.getScale() 倾斜与不透明 node.setSkewX(skew) node.getSkewX() node.setOpacity(opacity) 属性配置 node.attr({ x:100, y:100, scale:1.5 }) 节点操作 node.addChild(child,localorder,tag) node.removeChild(child) node.removeFromParent() 调度器 node.scheduleUpdate() node.update=function(dt){} node.schedule(callback,interval,repeat,delay,key) node.scheduleOnce(callback,interval,key)调度器演示
var ScheduleScene = cc.Scene.extend({ ctor: function () { this._super(); cc.spriteFrameCache.addSpriteFrames(res.personPlist); //第一种方法 //this.scheduleUpdate(); //每帧都激活 //第二种方法,时间秒为单位 //node.schedule(callback, interval, repeat, delay, key) this.schedule(this.addSprite, 1, 10, 1); //第三种方法 //node.scheduleOnce(callback,interval,key) //this.scheduleOnce(this.addSprite, 1); }, update: function () { this.addSprite(); }, addSprite: function () { console.log("测试"); var sprite1 = new cc.Sprite("#0001.png"); var size = cc.director.getWinSize(); sprite1.x = this.randomNum(300, 1000); sprite1.y = this.randomNum(300, 1000); this.addChild(sprite1); }, randomNum: function (minNum, maxNum) { switch (arguments.length) { case 1: return parseInt(Math.random() * minNum + 1, 10); break; case 2: return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); break; default: return 0; break; } } })节点坐标
Var toWorldPos=nodeParent.convertToWorldSpace(node.getPosition()) Var toNodePos=node_A.convetToNodeSpace(node_B) node.getBoundingBox() 返回 cc.rect(x,y,width,height)场景
场景的过渡方式演示
var TestPeroidScene1 = cc.Scene.extend({ ctor: function () { this._super(); console.log("第一个场景:ctor"); var buttonLayer = new TestButtonLayer(); //加入按钮控制层 this.addChild(buttonLayer); }, onEnter: function () { this._super(); console.log("第一个场景:onEnter"); }, onExit: function () { this._super(); console.log("第一个场景:onExit"); }, onEnterTransitionDidFinish: function () { this._super(); console.log("第一个场景:onEnterTransitionDidFinish"); }, onExitTransitionDidStart: function () { this._super(); console.log("第一个场景:onExitTransitionDidStart"); }, }); var TestButtonLayer = cc.Layer.extend({ ctor: function () { this._super(); var menuitem1 = new cc.MenuItemFont("替换跳到第二场景", this.goSecond); var menuitem2 = new cc.MenuItemFont("栈方式切换第二场景", this.goSecondStack); var menuitem3 = new cc.MenuItemFont("替换跳过度切换第二场景", this.goSecondTransitionk); var menu = new cc.Menu(menuitem1, menuitem2, menuitem3); menu.alignItemsVerticallyWithPadding(20); menu.x = 400; menu.y = 500; this.addChild(menu); }, onEnter: function () { this._super(); }, goSecond: function () { cc.director.runScene(new TestPeroidScene2()); }, goSecondStack: function () { cc.director.pushScene(new TestPeroidScene2()); }, goSecondTransitionk: function () { var animateScene = new cc.TransitionSlideInT(1, new TestPeroidScene2()); cc.director.runScene(animateScene); } })var TestPeroidScene2 = cc.Scene.extend({ ctor: function () { this._super(); console.log("第二个场景:ctor"); var menuitem1 = new cc.MenuItemFont("替换返回第一场景", this.goFirst); var menuitem2 = new cc.MenuItemFont("栈方式返回第一场景", this.goFirstStack); var menuitem3 = new cc.MenuItemFont("替换过度返回第一场景", this.goFirstTransitionk); var menu = new cc.Menu(menuitem1, menuitem2, menuitem3); menu.alignItemsVerticallyWithPadding(20); menu.x = 400; menu.y = 500; this.addChild(menu); }, onEnter: function () { this._super(); console.log("第二个场景:onEnter"); }, onExit: function () { this._super(); console.log("第二个场景:onExit"); }, onEnterTransitionDidFinish: function () { this._super(); console.log("第二个场景:onEnterTransitionDidFinish"); }, onExitTransitionDidStart: function () { this._super(); console.log("第二个场景:onExitTransitionDidStart"); }, goFirst: function () { cc.director.runScene(new TestPeroidScene1()); }, goFirstStack: function () { cc.director.popScene(); }, goFirstTransitionk: function () { var animateScene = new cc.TransitionSlideInT(1, new TestPeroidScene1()); cc.director.runScene(animateScene); } });
图层Layer
Layer 相当于 网页的”DIV”元素,是一个容器的概念
var layer=new cc.Layer(); var layer= cc.LayerColor(cc.color(0,0,0,138),width,height)layer锚点设置
var TestLayerScene = cc.Scene.extend({ ctor: function () { this._super(); var layer = new cc.LayerColor(cc.color(255, 0, 0.128), 300, 300); //默认锚点 0,0 layer.setAnchorPoint(0.5, 0.5); //图层默认情况锚点效果是忽略 layer.ignoreAnchor = false; var size = cc.director.getWinSize(); layer.x = size.width/2; layer.y = size.height/2; this.addChild(layer); } });精灵Sprite
精灵定义 方法一： var sprite=new cc.Sprite(“res/1.png”); 方法二： resouce.js中配置图片预导入 var res = { bg: "/res/background.png", }; var sprite=new cc.Sprite(res.bg); 方法三： cc.spriteFrameCache.addSpriteFrames(res.personPlist); var sprite3 = new cc.Sprite("#0001.png"); 坐标： sprite.x sprite.y 缩放： sprite. setScale（0.5） 旋转： sprite. setRotationX（90）自定义精灵
var Farm = cc.Sprite.extend({ ctor: function (level) { switch (level) { case 1: this._super("res/house/house_1.png"); break; case 2: this._super("res/house/house_2.png"); break; case 3: this._super("res/house/house_3.png"); break; default: this._super("res/house/house_1.png"); break; } }, });组合精灵定义
FarmScene .js
var FarmScene = cc.Scene.extend({ farm: null, ctor: function () { this._super(); var size = cc.director.getWinSize(); this.farm = new Farm(); this.farm.x = size.width / 2; this.farm.y = size.height / 2; this.addChild(this.farm); this.addMenu(); }, addMenu: function () { //按钮代码 var menuItem1 = new cc.MenuItemFont("15", this.changBlood1, this); var menuItem2 = new cc.MenuItemFont("50", this.changBlood2, this); var menuItem3 = new cc.MenuItemFont("100", this.changBlood3, this); var menu = new cc.Menu(menuItem1, menuItem2, menuItem3); menu.x = 300; menu.y = 300; menu.alignItemsVerticallyWithPadding(20); this.addChild(menu); }, changBlood1: function () { //事件的激活，this环境 this.farm.changeBlood(15); }, changBlood2: function () { this.farm.changeBlood(50); }, changBlood3: function () { this.farm.changeBlood(100); }, });
Farm.js
var Farm = cc.Layer.extend({ blood: null, house: null, ctor: function () { this._super(); this.house = new House(1); this.addChild(this.house); this.blood = new cc.LayerColor(cc.color(0, 255, 0, 120), 100, 10); this.blood.y = this.house.height / 2 + 20; this.blood.x = -this.blood.width / 2; this.addChild(this.blood); }, changeBlood: function (width) { this.blood.width = width; } });House.js
var House = cc.Sprite.extend({ ctor: function (level) { switch (level) { case 1: this._super(res.house1); break; case 2: this._super("res/house/house_2.png"); break; case 3: this._super("res/house/house_3.png"); break; default: this._super("res/house/house_1.png"); break; } }, changeLevel: function (level) { this.setTexture("res/house/house_"+level+".png"); } })动画精灵定义
person.js
var Person = cc.Sprite.extend({ _animation: null, ctor: function () { this._super(); //帧动画的实现方法 cc.spriteFrameCache.addSpriteFrames(res.personPlist); // 动画配置，帧与时间 this._animation = new cc.Animation(); var name = ''; for (var i = 1; i < 8; i++) { name = "000" + i + ".png"; this._animation.addSpriteFrame(cc.spriteFrameCache.getSpriteFrame(name)); }; this._animation.setDelayPerUnit(1 / 20); //生成 action var action = cc.animate(this._animation).repeatForever(); this.runAction(action); }, changeSpeed: function (speed) { //以前的动画停止 this.stopAllActions(); this._animation.setDelayPerUnit(speed); var action = cc.animate(this._animation).repeatForever(); this.runAction(action); } });PersonScene.js
var PersonScene = cc.Scene.extend({ person: null, ctor: function () { this._super(); var size = cc.director.getWinSize(); this.person = new Person(); this.person.x = size.width / 2; this.person.y = size.height / 2; this.addChild(this.person); this.addMenu(); }, addMenu: function () { //按钮代码 var menuItem1 = new cc.MenuItemFont("1/10", this.changSpeed1, this); var menuItem2 = new cc.MenuItemFont("1/20", this.changSpeed2, this); var menuItem3 = new cc.MenuItemFont("1/60", this.changSpeed3, this); var menu = new cc.Menu(menuItem1, menuItem2, menuItem3); menu.x = 300; menu.y = 300; menu.alignItemsVerticallyWithPadding(20); this.addChild(menu); }, changSpeed1: function () { //事件的激活，this环境 this.person.changeSpeed(1 / 10); }, changSpeed2: function () { this.person.changeSpeed(1 / 20); }, changSpeed3: function () { this.person.changeSpeed(1 / 60); }, });标签Label
var sprite=new cc.LabelTTF(“hello”,”arial”,24)菜单Menu
var menu=new cc.Menu(menuitem1,menuitem2) menu.alignItemsVerticallyWithPadding(20); menu.alignItemsHorizontallyWithPadding(20); var menuItem1 = new cc.MenuItemFont(“test", this.test03);
了解
cocos2d-js是cocos2d-x的JavaScript版本，真正跨全平台的游戏引擎，采用原生JavaScript语言，可发布到包括Web平台，iOS，Android，Windows Phone8，Mac，Windows等平台。利用cocos2d-js开发HTML5游戏/动画，我们可以通过SDK也可以直接使用js类库：
l SDK下载：http://cn.cocos2d-x.org/download/
l js类库：http://www.cocos2d-x.org/filecenter/jsbuilder/
SDK的开发步骤：
1、 安装python
2、 解压SDK，运行setup.py
3、 运行cmd，新建cocos2d-js项目：cocos new –l js project_name
4、 使用webStorm等IDE打开项目目录，新建的项目已经有现成HelloWorld例子
5、 了解一下main.js的说明（关于project.json），然后打开resource.js和app.js阅读代码
6、 在app.js中正式开始自己的代码编写。当然，这里可以增加新的js文件，需要修改project.json。
Cocos2d-x
2.1以前的版本
第一步：下载Cocos2d-X的引擎包
第二步：进入Cocos2d-X文件夹
“cd cocos2d-1.0.1-x-0.9.2”
然后“sudo ./install-templates-xcode.sh”命令开始执行安装命令
执行成功后，会在Xcode中安装好一些Cocos工程模板
然后根据这些模板去创建Cocos2d-x工程即可。
2.2以后的版本
将下载的压缩包解压到你指定的文件夹里。
进入到目录cocos2d-x-3.2alpha0/tools/cocos2d-console/bin/cocos.py
打开终端运行cocos.py脚本创建文件
./cocos.py new HelloWorldDemo -p com.coco2dx.org -l cpp -d ~/Desktop 或者 python cocos.py new HelloWorldDemo -p com.coco2dx.org -l cpp -d ~/Desktop参数说明：
-p后面接包名-l后面接开发语言类型，有cpp, lua, js三种类型-d后面接项目存放的目录项目创建完成后，用Xcode打开HelloWorldDemo/proj.ios_mac里的Xcode项目文件，运行项目即可
Cocos2d-JS 是跨全平台的游戏引擎，采用原生JavaScript语言，可发布到包括Web平台，iOS，Android，Windows Phone8，Mac，Windows等平台，引擎基于MIT开源协议，完全开源，免费，易学易用，拥有活跃的社区支持。Cocos2d-JS让2D的游戏编程门槛更低，使用更加容易和高效。和其他类似游戏框架相比，它定义了更加清晰的2D游戏编程的基本组件，采用易学易用的API设计，并采用全球领先、具备原生性能的脚本绑定解决方案实现游戏的跨原生平台发布，开发效率更高，使用上最简单。
Cocos2d-JS是Cocos2d-x的JavaScript版本，融合了Cocos2d-HTML5和Cocos2d-x JavaScript Bindings（JSB）。它支持Cocos2d-x的所有核心特性并提供更简单易用的JavaScript风格API，基于Cocos2d-JS的框架，您可以方便的使用JavaScript语言进行游戏开发，快速构建原型进行验证，并让您的游戏跑在所有支持HTML5规范的浏览器上。由于Cocos2d-html5的API和Cocos2d-x JSB的API高度一致，可让您的游戏不用修改代码或者修改少量代码就可打包为原生性能表现的混合游戏，发布到原生应用市场，从而实现，一次编码全平台部署的效果，带给您全所未有的机遇。
不得不吐槽下cocos官网说明文档的坑爹之处:
1. 用Cocos Console工作流开发网页/原生平台游戏（JSB开发环境简介）
http://www.cocos.com/doc/article/index?type=cocos2d-x&url=/doc/cocos-docs-master/manual/framework/cocos2d-js/2-working-environment-and-workflow/2-2-cross-native-browser-game-with-cocos-console/zh.md
点击"引擎下载页面"跳到:
这里好像也没有JS的引擎包吧，没办法，看着"HTML5 LITE VERSION"比较像，硬着头皮点进去
下载下来的结果也跟说明文档里不一致
2."搭建Cocos2d-JS v3.x 开发环境"
http://www.cocos.com/doc/article/index?type=cocos2d-x&url=/doc/cocos-docs-master/manual/framework/cocos2d-js/3-jumping-into-cocos2d-js/3-1-installation/zh.md
点击"Cocos Code IDE"超链接却跳到 "Cocos Creator"的下载，好像他们不是同一个东东吧;
点击"Cocos-JS v3.0"也是一样的结果。
后面是到论坛上上找到了一个下载地址:
http://forum.cocos.com/t/cocos-code-ide-1-2-0/34958
够变态吧，既然让大家使用，居然把下载地址搞得云山雾罩的，这是要绕死大家的节奏啊
后来在cc论坛发现，原来是被放弃了，既然放弃了，官方的文档也得同步更新啊，这误导多少无辜群众: IDE被放弃了?下载都没了
真是蛋疼!
后来终于搞明白了，原来是换成使用Cocos Creater了:
所以Coco-JS工程的创建方法:
1. 直接命令行创建
这个比较通用，不管官网各种开发工具怎么变来变去
切换到Cocos2d-X的以下目录: /tools/cocos2d-console/bin
./cocos new Cocos2d-JSDemo -p com.xxxxxx.cocos2djs -l js -d /doc/sample/cocos2d
2. Cocos Creator创建
1. 直接命令行创建
切换到Cocos2d-X的以下目录: /tools/cocos2d-console/bin
按照官网的介绍:
./cocos.py new Cocos2d-LuaDemo -p 会出现权限的问题
添加sudo运行，出现命令找不到的问题
干脆直接换成cocos执行
还是出现命令找不到，在cocos前添加 ./。不要使用sudo，否则会出现一些权限的问题
终于成功了
2. Cocos Creator也支持Lua: LUA引擎支持
3. 用Cocos Code IDE 创建lua工程
不过Cocos Code IDE工具已经被废了
参考
