小鸟的渲染问题?

来源: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里面不断被更新的,其实已经和构造方法没什么关系了

0
3
拖车板牙爵士
回复
qq_许Y1世承诺_04041127
非常感谢
2018-03-23
共3条回复

微信小游戏入门与实战,一天之内搞定微信小游戏开发

官方同步,第一时间掌握整套微信小游戏开发核心技术

3515 学习 · 664 问题

查看课程