cocos2d-html5学习2-循环滚动的背景

本人现在做php web方面的开发，之前开发过手机游戏，接触cocos2d-html5不到一个月，鉴于ch5的资料不是很多，写点东西供新来的童鞋们参考，如有错误请指出。

学一种语言最快的方法就是使用它，学游戏引擎最快的方法，就是用它写自己的游戏。由于是刚学不久，肯定离不开demo，官方给的开发包中有4个demo，和很多test，这些东西很重要，不懂的时候就看这些资料，好了，废话不多说。

我们来开始写一个自己的飞机游戏，官方的demo中就有一个飞机游戏，我基本上也是用这个demo的代码，并加入了一些自己的东西。

微信迎来了5.0的时代，里面最为大家所熟知是游戏应该就是打飞机了。我们来写个自己的飞机大战，当然图片是网上的apk中copy出来的，素材都是用别人的，希望这不违法哈，如有侵

权问题别找我哈，这也是为了造福人类。下面新建工程，工程目录如下

res中存放图片声音等资源

src中存放js代码文件

index.html中引入cocos2d.js

cocos2d.js用于加载引擎和你自己写的js文件

main.js是这个游戏的入口，这两个文件里面的代码比较固定，基本上照抄ch5包里面的模版template，就可以了，jquery用于调试，可以不要。

ch5是压缩版的引擎

resoutce.js用于初始化游戏资源

新增的js文件要加到cocos2d.js，新增的资源加到resoutce.js中切记

Background.js用于做背景图片的循环，为什么背景要循环呢，因为飞机是不动的，背景循环滚动起来，看起来就是飞机在飞了，下面贴代码

var Background = cc.Sprite.extend({
	y:null,
	x:null,
	ctor:function(){
        this._super();
        this.initWithFile(s_bg);//赋予图片元素
       
    },
    update: function (x,y,y1) {//x是图片的x坐标，y是图片滚动的最底的位置，y1是图片重新回到上面的y坐标
    	this.x=x;
    	this.y-=2;
    	if(this.y<y){
    		this.y=y1;
    	}
        this.setPosition(this.x,this.y);
       
    }
});

用于实现这效果的方法很多，直接画两张图片最为简单，两张图片同时向下滚动，当下面的图片完全滚出屏幕的时候让它重新回到上面去，在继续往下滚，循环滚动，由于不懂使用ch5画图片，就使用了sprite，这里讲个思路，懂的童鞋可以自己去实现。

var GameScene = cc.Scene.extend({
	
     onEnter:function () {
        this._super();//调用父类的同名方法，这里是调用cc.Scene的onEnter
         //添加Layer
      this.gameLayer = cc.Layer.create();
//加到层中，用于显示
      this.addChild(this.gameLayer);
      //添加背景1
	  this.bg =new Background();
	  this.gameLayer.addChild(this.bg,0);	      
	  this.bg.setAnchorPoint(cc.p(0,0));
	  this.bg.setPosition(cc.p(0,0)); 
	//添加背景2  
	 this.bg1 =new Background();
	 this.bg1.y=800;
	 this.gameLayer.addChild(this.bg1,0);	      
	 this.bg1.setAnchorPoint(cc.p(0,0));
	 this.bg1.setPosition(cc.p(0,-800)); 
     //定时器 
     this.schedule(this.loopBackGround,0);
     },
     loopBackGround:function(dt){
	     this.bg.update(0,-800,0);
	     this.bg1.update(0,0,800);
     }
}); 

代码比较简单，就不解释了

setAnchorPoint(cc.p(0,0));

这个函数要好好理解下，设置锚点(0,0)为左下角(如有错误请指出)，

this.schedule(this.loopBackGround,0);

这个函数是定时器，每多少时间调用一次，这样图片才能动起来

效果如下

具体代码到这里下载

cocos2d-html5飞机大战