小鸟的渲染问题?
来源:4-16 小游戏小鸟类逻辑实现-让小鸟动起来
拖车板牙爵士
2018-03-14
跟着课程敲代码;
constructor(){
const image = Sprite.getImage('birds');
super(image,0,0,image.width,image.height,0,0,image.width,image.height);
}在Birds.js里只有上面代码的时候,小鸟是可以渲染出来的。
但是当跟着课程,添加了一些代码后,保存,小鸟不见了,如下:
constructor(){
const image = Sprite.getImage('birds');
super(image,0,0,image.width,image.height,0,0,image.width,image.height);
this.clippingX = [
9,
9+34+18,
9+34+18+34+18
];
this.clippingY = [10,10,10];
this.clippingWidth = [34,34,34];
this.clippingHeight = [24,24,24];
this.birdX = window.innerWidth/4;
this.birdsX = [this.birdX,this.birdX,this.birdX];
this.birdY = window.innerHeight / 2;
this.birdsY = [this.birdY, this.birdY, this.birdY];
this.birdWidth = 34;
this.birdsWidth = [this.birdWidth,this.birdWidth,this.birdWidth];
this.birdHeight = 24;
this.birdsHeight = [this.birdHeight, this.birdHeight, this.birdHeight];
this.y = [this.birdY, this.birdY, this.birdY];
this.index = 0;
this.count = 0;
this.time = 0;
}然后继续添加,如下:
constructor(){
const image = Sprite.getImage('birds');
super(image,0,0,image.width,image.height,0,0,image.width,image.height);
this.clippingX = [
9,
9+34+18,
9+34+18+34+18
];
this.clippingY = [10,10,10];
this.clippingWidth = [34,34,34];
this.clippingHeight = [24,24,24];
this.birdX = window.innerWidth/4;
this.birdsX = [this.birdX,this.birdX,this.birdX];
this.birdY = window.innerHeight / 2;
this.birdsY = [this.birdY, this.birdY, this.birdY];
this.birdWidth = 34;
this.birdsWidth = [this.birdWidth,this.birdWidth,this.birdWidth];
this.birdHeight = 24;
this.birdsHeight = [this.birdHeight, this.birdHeight, this.birdHeight];
this.y = [this.birdY, this.birdY, this.birdY];
this.index = 0;
this.count = 0;
this.time = 0;
}
draw(){
//切换三只小鸟的速度
const speed = 0.2;
this.count = this.count+speed;
if(this.index>=2){
this.count = 0;
}
//floor减速器的作用
this.index = Math.floor(this.count);
super.draw(
this.img,
this.clippingX[this.index],
this.clippingY[this.index],
this.clippingWidth[this.index],
this.clippingHeight[this.index],
this.birdsX[this.index],
this.birdsY[this.index],
this.birdsWidth[this.index],
this.birdsHeight[this.index]
)
}小年又可见了,为什么在construct中添加代码的时候,小鸟不见了?
写回答
1回答
-
傅猿猿
2018-03-15
你在构造方法添加其实是没用的,构造方法里面的x和y其实只是初始状态的一个值,之后所有的渲染都是在draw里面做的,birdx和birdy里面的三组值是初始化后在draw里面不断被更新的,其实已经和构造方法没什么关系了
032018-03-23
相似问题