Cocos2d-x游戏《雷电大战》html5版

感谢林柄文

项目地址:http://blog.csdn.net/Evankaka/article/category/2922463

正好我准备学习一下cocos2d-x html5

再次声明一下我只是学习,所有的创意和素材来自于林柄文

1.src/resource.js 载入资源

var res = {
  HelloWorld_png : "res/HelloWorld.png",BACK3_1:'res/back3_1.png',BACK3_2:'res/back3_2.png',BACK4_1:'res/back4_1.png',BACK4_2:'res/back4_2.png',};

2 修改app.js

var HelloWorldScene = cc.Scene.extend({
  onEnter:function () {

    this._super();
    //两个背景层
    var layer = new BGLayer(res.BACK4_2,res.BACK4_1,-2);
    this.addChild(layer,100)

    var bg2= new  BGLayer(res.BACK3_1,res.BACK3_2,2);
    this.addChild(bg2,200);


  }
});

现在我们期待实现BGLayer 各自由两张图景图组成,向上或下移动

var BGLayer = cc.Layer.extend({
  //背景由两张图构成,step为移动方向和大小
  ctor:function (bg1,bg2,step) {
    var me=this;
    me._super();
    var size = cc.winSize;
    var newsp=function(bg,p){
      var s=new cc.Sprite(bg);
      var myselfSize=s.getContentSize();
      s.attr({
        scaleX:size.width / myselfSize.width,scaleY:size.height / myselfSize.height,x:p.x,y:p.y,});
      this.addChild(s);
      return s;
    }.bind(me);
    me.sp1=newsp(bg1,cc.p(size.width / 2,size.height));
    me.sp2=newsp(bg2,0));
    me.step=step;
    me.scheduleUpdate();
    return true;
  },update:function( dt){
    var me=this;
    var maxY=cc.winSize.height * 1.5;
    var minY= - cc.winSize.height * 0.5;
    //过载检查
    [me.sp1,me.sp2].forEach(function(sp){
      var newY=sp.getPositionY()+me.step;
      //向上移动时超过maxY后下两屏,反之亦然
      if(me.step >0 && newY > maxY){
        newY = minY;
      }else if(me.step < 0 && newY < minY){
        newY = maxY;
      }
      sp.setPositionY(newY);
    });
  },onExit:function(){
    this.unscheduleUpdate();
  }
});

我不会做图想直观看效果可移步至原作者blog

Cocos2d-x游戏《雷电大战》html5版

相关文章