javascript - HTML5 Canvas 和 Javascript 在同一 Canvas 上绘制多个动画 Sprite 的问题

Question

抱歉，如果标题有点令人困惑，我不知道最好的措辞方式是什么。

我正在开发一款基于图 block 的 JavaScript Canvas 游戏，该游戏使用 Sprite 表和图 block map 来创建世界和其中的对象。
我编写了一段代码来制作硬币旋转的动画。对于一枚硬币，这工作正常，但向 Canvas 添加多个硬币将导致动画速度超出预期。
由于游戏会随着进度不断添加金币，因此大约 10 个金币后您可能将无法再看到动画。

Gif 显示问题:

我尝试了多种方法，甚至添加帧延迟来减慢动画速度，但没有达到预期的结果。

一切都在 codepen http://codepen.io/TryHardHusky/pen/EjJdoK
但有点乱。

我用来为硬币设置动画的代码:

var coin = {
  height: 32,
  width: 32,
  cFrame: 0,
  mFrame: 8,
  image: new Image(),
  src: "http://s1.tryhardhusky.com/coin_gold.png",
  draw: function(x, y){
    coin.cFrame++;
    coin.image.src = coin.src;
    if(coin.cFrame >= coin.mFrame){
      coin.cFrame = 0;
    }
    ctx.drawImage(coin.image, 32*coin.cFrame,0,32,32,x,y, coin.height,coin.width);
  }
}

并在场景中创建一枚硬币:

coin.draw(250,250);
coin.draw(218, 250);  
coin.draw(186, 250);  

这是我另一支笔的翻版:http://codepen.io/TryHardHusky/pen/rVbdmw

我在那里工作，但使用另一种低效的方法来动画硬币。它的优化也很差，这就是新代码的原因。

任何人都可以阐明我做错了什么吗？

-- 编辑 --

感谢@canvas能够通过以下方式修复它:

  var coins = [
      [4,5,0],
      [2,3,0],
      [1,6,0]
  ];  

.

  for(var i = 0; i < coins.length; i++){
    drawCoin(coins[i], i);
  }

.

function drawCoin(cord,i){
  coins[i][2] < 8 ? coins[i][2]+=1 : coins[i][2]=0;
  var image = new Image();
  image.src = "http://s1.tryhardhusky.com/coin_gold.png";
  ctx.drawImage(image, 32*cord[2], 0, 32, 32, cord[0]*32, cord[1]*32, 32, 32);
}

Answer 1

您是否尝试过使用this代替硬币？

draw: function(x, y){
    this.cFrame++;
    this.image.src = this.src;
    if(this.cFrame >= this.mFrame){
      this.cFrame = 0;
    }
    ctx.drawImage(this.image, 32*this.cFrame,0,32,32,x,y, this.height,this.width);

此外，您可能应该做的是拥有一个硬币数组，然后只需向该数组添加一个新硬币，然后使用循环取出每个硬币并更新每个硬币。

创建硬币数组(示例代码)

var coins[];

coins.push(new coin(xPosition, yPosition));

// Render coins
for(var i = 0; i < coins.length; i++)
{
    coins[i].Draw();
}

我刚刚 fork 了你的代码笔，

这并不完美，但类似这样(创建一个数组，将硬币变量更新为构造函数，然后将 3 个硬币添加到新数组中)

代码笔:http://codepen.io/anon/pen/GJLwJw