HTML5 Canvas 和 Javascript 问题在同一画布上绘制多个动画精灵

Question

对不起，如果标题有点令人困惑，我不知道用什么来形容它的最佳方式。

我正在开发一个基于图块的 java 脚本画布游戏，它使用精灵表和图块地图来创建世界和其中的对象。
我写了一段代码来动画硬币旋转。对于单个硬币，这可以正常工作，但在画布上添加多个硬币会导致动画加速超出预期。
由于游戏会在进行过程中添加硬币，大约 10 个硬币后您可能无法再看到动画了。

显示问题的 Gif：

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

一切都在代码笔上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();
}

我刚刚分叉了你的 codepen，

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

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