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

Question

如果标题有点混乱，我很抱歉，我不知道最好的方法是什么。

我正在开发基于磁贴的java脚本画布游戏，它使用精灵表和磁贴地图来创建世界和对象。
我写了一段代码来动画硬币旋转。对于单个硬币，这种方法很好，但是在画布上添加多个硬币会使动画加速超出理想的范围。
由于游戏将随着它的进展而添加硬币，在大约10个硬币之后你可能再也看不到动画了。

Gif显示问题：

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

所有东西都在codepen http://codepen.io/TryHardHusky/pen/EjJdoK上 但它有点凌乱。

代码I用于动画硬币：

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();
}

我只是分叉你的代码，

这不是完美的，但是这样的事情（创建了一个数组，更新了硬币var作为构造函数，然后在新数组中添加了3个硬币）

CodePen：http://codepen.io/anon/pen/GJLwJw