cocos-js实现背景图的滚动
var
ShuffLayer = cc.Layer.extend({
_turnImg1:
null
,
_turnImg2:
null
,
init:
function
(){
var
bRef =
false
;
if
(
this
._super()){
this
.steupView(sRes.backgroud);
bRef =
true
;
}
return
bRef;
},
steupView:
function
(fileName){
this
._turnImg1 =
new
cc.Sprite(fileName);
this
._turnImg1.setPosition(cc.p(
this
._turnImg1.getContentSize().width/2,
this
._turnImg1.getContentSize().height/2));
this
.addChild(
this
._turnImg1);
this
._turnImg2 =
new
cc.Sprite(fileName);
this
._turnImg2.setPosition(cc.p(
this
._turnImg2.getContentSize().width * 1.5,
this
._turnImg2.getContentSize().height /2));
this
.addChild(
this
._turnImg2);
},
onEnter:
function
(){
this
._super();
this
.scheduleUpdate();
},
update:
function
(dt){
//如果第一张背景图的中点到达屏幕下方背景图高度的一半的时候(也就是第一张图片移除图片下面的时候)重新设置他的位置到屏幕上面，图片下边缘跟手机屏幕上边缘重合-1个像素
if
(
this
._turnImg1.getPositionX()<=-
this
._turnImg1.getContentSize().width/2) {
this
._turnImg1.setPosition(cc.p(
this
._turnImg1.getContentSize().width * 1.5 -1,
this
._turnImg1.getContentSize().height/2));
}
else
{
//如果还没需要换位置就让他向下移动一个像素
this
._turnImg1.setPosition(cc.pAdd(
this
._turnImg1.getPosition(),cc.p(-1,0)));
}
//如果第二张背景图移出屏幕最下方则重新设置他的位置在屏幕的最上方
if
(
this
._turnImg2.getPositionX() <= -
this
._turnImg2.getContentSize().width / 2) {
this
._turnImg2.setPosition(cc.p(
this
._turnImg2.getContentSize().width * 1.5 -1,
this
._turnImg2.getContentSize().height / 2));
}
else
{
//向下移动
this
._turnImg2.setPosition(cc.pAdd(
this
._turnImg2.getPosition(),0)));
}
}
});
ShuffLayer.create =
function
() {
var
ly =
new
ShuffLayer();
if
(ly && ly.init()){
return
ly;}
return
null
;
};
ShuffLayer.scene =
function
() {
var
sc =
new
cc.Scene();
sc.addChild(ShuffLayer.create());
return
sc;};
returncc.p(v1.x + v2.x,v1.y + v2.y);};
函数源码cc.pSub =function(v1,v2) {
returncc.p(v1.x - v2.x,v1.y - v2.y);};
实战代码练习
ctor:function(){
this._super();
size=cc.winSize;
sprite=newcc.Sprite(res.runbg);
sprite.attr({
x:sprite.getContentSize().width/2,
y:sprite.getContentSize().height/2
});
this.addChild(sprite,1);
sprite2=newcc.Sprite(res.runbg2);
sprite2.attr({
x:sprite2.getContentSize().width*1.5,
y:sprite2.getContentSize().height/2
});
this.addChild(sprite2,0);
this.schedule(this.SpriteMove,0.1);},
SpriteMove:if(sprite.getPositionX()<=-sprite.getContentSize().width/2) {sprite.setPositionX(sprite.getContentSize().width*1.5-18);}
else{
sprite.setPositionX(sprite.getPositionX()-10);}
if(sprite2.getPositionX()<=-sprite2.getContentSize().width/2) {
sprite2.setPositionX(sprite.getContentSize().width*1.5);}else{sprite2.setPositionX(sprite2.getPositionX()-10);}}
在运行的过程中，图片的尺寸设计容易出现问题，要根据图片的像素大小对其进行更改！！！！