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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值