在画布图像x或y更改后,我创建了渲染方法。但是在改变位置后只绘制一幅图像,第二幅图像不被绘制。它还取决于我在屏幕上添加图像的顺序。
App.js
my_Doge = game.addSprite("Doge", "mydoggy", 0, 700, 100, 100);
my_Cat = game.addSprite("Cat", "mycat", 0, 0, 100, 100);
function update(){
game.setPos(my_Cat, my_Cat.xcoord+=2, my_Cat.ycoord+=2);
game.setPos(my_Doge, my_Doge.xcoord+=2, my_Doge.ycoord-=2);
}
Library.js
moopleGame.prototype.setPos = function(sprite, newX, newY)
{ // Set new sprite position
sprite.xcoord = newX;
sprite.ycoord = newY;
for(var i = 0; i < this.addedSprites.length; i++)
{
this.sprite_index = 0;
if(sprite.id == this.addedSprites[i].id) // Find index of that image in array
{
this.sprite_index = i;
}
}
this.render(this.sprite_index, sprite.width, sprite.height, sprite.xcoord, sprite.ycoord);
}
moopleGame.prototype.render = function(index, width, height, x, y) // Draw image to screen
{
ctx = this.ctx;
this.fillCanvas();
this.addedSprites[index].x = x;
this.addedSprites[index].y = y;
var w = new Image();
w.src = this.addedSprites[index].src;
ctx.drawImage(w, this.addedSprites[index].x,
this.addedSprites[index].y,
this.addedSprites[index].width,
this.addedSprites[index].height);
}