畫布 - 你如何動畫多個圖像一次？

Question

我剛剛嘗試在我一直在研究的HTML5遊戲中同時動畫多個圖像（玩家）時遇到了問題。當一次移動一個玩家時，它的效果非常好，但是當另一個玩家連接時，我開始遇到一些問題。

正如你在下面的代碼中所看到的，我使用clearRect()來阻止玩家在動畫過程中在畫布上的位置。這對我來說是一個問題，因爲當我爲第二個球員製作動畫時，它會從畫布中移除第一個球員。

我覺得自己已經將自己編入了一個角落，但希望有人能爲我的問題揭示可能的解決方案。

在此先感謝。

var players = []; 

function Player(number, startX, startY, endX, endY) { 
    this.number = number; 
    this.startX = startX; 
    this.startY = startY; 
    this.endX = endX; 
    this.endY = endY; 
} 


Player.prototype.update = function() { 
    var startY = this.startY; 
    var startX = this.startX; 
    var endY = this.endY; 
    var endX = this.endX; 
    var playerY = startY; 
    var playerX = startX; 
    var playerInterval = setInterval(function() { 
     playerContext.clearRect(0,0,2000,2000); 
     if(playerY < endY) { 
      playerY += 2.5; 
     } 

     if(playerY > endY) { 
      playerY -= 2.5; 
     } 

     if(playerX < endX) { 
      playerX += 2.5; 
     } 

     if(playerX > endX) { 
      playerX -= 2.5; 
     } 

     playerContext.fillText('0', playerX, playerY, 50, 25); 

     if(playerY == endY && playerX == endX) { 
      clearInterval(playerInterval); 
     } 

    }); 
}; 

function drawPlayers() { 
    for (var i = 0; i < data.length; i++) { 
     var startX = data[i].startX/2; 
     var startY = data[i].startY/2; 
     var endX = data[i].x/2; 
     var endY = data[i].y/2; 

     var number = data[i].number; 
     var player = new Player(number, startX, startY, endX, endY); 
     players.push(player); 
    } 
    drawEach(); 
} 
drawPlayers(); 


function drawEach() { 
    for (var i = 0; i < players.length; i++) { 
     var thisPlayer = players[i]; 
     thisPlayer.update(); 
    } 
} 

Answer 1

移動playerContext.clearRect（0,0,2000,2000）;在玩家對象之外。

你的問題是你的遊戲循環是由玩家決定的。 setInterval應該成爲畫布上的全局操作，這意味着應該只有一個更新方法對所有玩家起作用。不僅在同一時間產生一堆間隔會導致性能下降，而且如果不清除其他玩家即使不是不可能清除畫布也很困難。

下面的東西可以工作。

var playerInterval = setInterval(function() { 
    for(var i = 0; i < players.length; ++i) { 
    players[i].update(); // updates player position 
    } 
    clearBoard(); 
    redraw(); 
}, INTERVAL); 

另外，如果你只希望支持現代瀏覽器或不介意找填充工具，你可以考慮使用requestAnimationFrame。