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

对不起，如果标题有点让人困惑，我不知道最好的表达方式是什么

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

Gif显示问题：

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

一切都在代码笔上
但是有点乱

我用来制作硬币动画的代码：

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

这是我另一支笔的翻拍：

我让它在那里工作，但使用另一种低效的方法来制作硬币的动画。它的优化也非常糟糕，因此需要新代码

谁能告诉我我做错了什么

--编辑--

感谢您的帮助，我们能够通过以下方式进行修复：

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

for（变量i=0；i

功能提款币（线绳，i）{
硬币[i][2]<8？硬币[i][2]+=1：硬币[i][2]=0；
var image=新图像（）；
image.src=”http://s1.tryhardhusky.com/coin_gold.png";
ctx.drawImage（图像，32*cord[2]，0,32,32，cord[0]*32，cord[1]*32,32,32）；
}

你试过用

这个

代替硬币吗

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硬币[]；
硬币。推（新硬币（X位置，Y位置））；
//渲染硬币
对于（变量i=0；i

我刚用叉子叉了你的密码笔

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

---

代码笔：

你试过用

这个

代替硬币吗

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硬币[]；
硬币。推（新硬币（X位置，Y位置））；
//渲染硬币
对于（变量i=0；i

我刚用叉子叉了你的密码笔

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

---

代码笔：

你试过用

这个

代替硬币吗

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硬币[]；
硬币。推（新硬币（X位置，Y位置））；
//渲染硬币
对于（变量i=0；i

我刚用叉子叉了你的密码笔

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

---

代码笔：

你试过用

这个

代替硬币吗

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硬币[]；
硬币。推（新硬币（X位置，Y位置））；
//渲染硬币
对于（变量i=0；i

我刚用叉子叉了你的密码笔

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

---

CodePen:

用“this”而不是“coin”来分叉似乎没有任何改变。我打算用一个数组来表示硬币，比如硬币=[[1,1]，[1,2]；然后循环这个。但是现在我想让动画工作起来。一旦你把它们分割成一个数组，动画应该工作得很好，因为你只是在使用

coin.draw（250250）您正在循环draw函数，因此硬币本身调用draw两次，然后是三次。将它们拆分为自己的数组，动画代码将很好地工作。多亏了您的答案，使用工作代码更新我的答案，这是一种更简单的方法。谢谢@我很高兴我能用“这个”而不是“硬币”来帮忙，它似乎没有改变任何事情。我打算用一个数组来表示硬币，比如硬币=[[1,1]，[1,2]；然后循环这个。但是现在我想让动画工作起来。一旦你把它们分割成一个数组，动画应该工作得很好，因为你只是在使用
coin.draw（250250）您正在循环draw函数，因此硬币本身调用draw两次，然后是三次。将它们拆分为自己的数组，动画代码将很好地工作。多亏了您的答案，使用工作代码更新我的答案，这是一种更简单的方法。谢谢@我很高兴我能用“这个”而不是“硬币”来帮忙，它似乎没有改变任何事情。我打算用一个数组来表示硬币，比如硬币=[[1,1]，[1,2]；然后循环这个。但是现在我想让动画工作起来。一旦你把它们分割成一个数组，动画应该工作得很好，因为你只是在使用
coin.draw（250250）您正在循环draw函数，因此硬币本身调用draw两次，并且