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

最新推荐文章于 2017-07-18 14:39:00 发布

原创最新推荐文章于 2017-07-18 14:39:00 发布 · 855 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#cocos2d-x #html5 #打飞机

javascript 同时被 2 个专栏收录

7 篇文章

订阅专栏

cocos2d-x

6 篇文章

订阅专栏

本文介绍如何使用 Cocos2d-x 实现双层地图无限滚动的效果，通过两个背景层的图片切换，达到游戏场景的连续滚动。文章详细展示了资源加载方式和背景层的更新逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

感谢林柄文

项目地址:http://blog.youkuaiyun.com/Evankaka/article/category/2922463

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

开始吧 1 Cocos2d-x《雷电大战》(1)-双层地图无限滚动

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

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,cc.p(size.width / 2 ,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