cocos2d-js快速入门，附游戏样例

接的毕设，从学习到完成，一共用了大概三周，都是下班时间做的。觉得cocos2d-js相对还是比较简单。我其实也没什么js基础，觉得只要知道了什么方法是做什么的，就能写游戏了。

0.安装环境

下载cocos2d-x

http://www.cocos.com/download

下载安装python2

https://www.python.org/downloads/release/python-2714/
(选符合自己系统的python版本)

安装cocos

在cmd中，进入cocos目录，输入python2 setup.py
然后一直回车就安装好了。

检车安装是否成功

重启cmd,输入cocos -v 如果出现版本号，说明安装成功。若不是，可能是环境没有自动配置，参见下图配置环境变量.。（注意是自己对应的路径）

新建helloWorld项目

在cmd中输入cocos new -l js 项目名,得到如下目录，在src中写js文件，res中存放图片音频等资源.

强调一下写好的js文件要在project.json里面的jsList里配置。

1图层

游戏的概念类似以前的胶片电影，都是一帧一帧的，所谓的动作，都是每帧重绘。
每帧图上所有的元素都是层级，比如天空是一层，然后再天空层上再覆盖一层山，就形成背景了，再覆盖一些人物，就是画面了。

• cocos2d-js的图层是布置在舞台（场景）上的
  声明一个场景

var scene = cc.Scene.extend({
   //onEnter是只刚进入时要做的事情，
   onEnter:function(){
      this._super();//继承父类的方法，必须写
      var layer = new MenuLayer();//这里new了一个图层，
      this.addChild(layer);//把它添加进scene上了
    },
})

而图层的写法是

var MenuLayer = cc.Layer.extend({
    ctor:function(){
    this._super();//继承父类的方法，必须写
    var sprite = new cc.Sprite("图片路径");
    sprite.x = 100;
    sprite.y = 100;//x,y坐标
    this.addChild(sprite);
    }
})

2场景的入口

怎么让项目知道进入哪个场景Scene，cocos使用的是
cc.director.runScene(new scene())//你的scene名字

在main.js文件里，也使用了这个方法，表明是整个项目第一个场景，

场景切换也采用这个方法

3循环

在layer的ctor方法中，调用this.scheduleUpdate();方法，cocos会每帧都调用当前layer的update方法。

var PuzzleLayer = cc.Layer.extend({
    ctor:function(){
        this._super();
        this.scheduleUpdate();
    },

    update:function(){
        alert("Boom!!!");
    }
}

4触碰交互

cocos是通过监听者模式，即声明一个Listener,然后绑定，点击触发

addTouchListener:function(){
        this.touchListener = cc.EventListener.create({
            event:cc.EventListener.TOUCH_ONE_BY_ONE,//单点触碰，更多参数请参考文末官网。
            swallowTouches:true,//是否吞下点击，即只该sprite接收到点击触发，不向下传递点击触发（你在点某个画面的时候，肯定也点了背景，但背景就不用触发信息了，这个意思）
            onTouchBegan:function(touch,event){
                var pos = touch.getLocation();
                var target = event.getCurrentTarget();//点击的sprite
                if(cc.rectContainsPoint(target.getBoundingBox(),pos)){
                    console.log(pos.x+" "+pos.y)//点击的位置
                    //在这里写点击事件
                    return true;
                }
                return false;
            }
        });
        cc.eventManager.addListener(this.touchListener,this);
    }

5消除对象，停止循环

你的sprite名字.removeFromParent();
this.unscheduleUpdate(this.update());//或者其他更新方法

6游戏样例

https://blog.csdn.net/qq951127336/article/details/79860040