HTML5畫布和Javascript問題在同一個畫布上繪製多個動畫精靈

Question

對不起，如果標題有點混亂，我不知道最好的方法是什麼。

我正在使用基於圖塊的java腳本畫布遊戲，它使用精靈圖紙和瓷磚貼圖來創建世界和對象。
我寫了一段代碼來動畫硬幣來旋轉。對於單枚硬幣來說，這樣做效果很好，但向畫布中添加多枚硬幣會使動畫加速超出所需範圍。
由於遊戲將會隨着硬幣的進展而添加硬幣，因此在大約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(); 
} 

我只是分叉你codepen，

這不是完美的，但這樣的事情（創建一個數組，更新硬幣VAR是一個構造函數，然後加入3-硬幣到新數組）

CodePen：使用的「本」，而不是「硬幣」 http://codepen.io/anon/pen/GJLwJw