小鸟的渲染问题?
来源: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
相似问题