Javascript 画布-如何一次设置多个图像的动画？

我刚刚遇到一个问题，在我一直在开发的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();
    }
}

var玩家=[]；
功能播放器（数字、开始、开始、结束、结束）{
这个数字=数字；
this.startX=startX；
this.startY=startY；
this.endX=endX；
this.endY=endY；
}
Player.prototype.update=函数（）{
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（函数（）{
playerContext.clearRect（0,020002000）；
if（playerY结束）{
游戏性-=2.5；
}
如果（playerXendX）{
playerX-=2.5；
}
playerContext.fillText（'0'，playerX，playerY，50,25）；
if（playerY==endY&&playerX==endX）{
clearInterval（播放间隔）；
}
});
};
函数drawPlayers（）{
对于（变量i=0；i

移动playerContext.clearRect（0,020000）；从玩家对象中取出

您的问题是，您的游戏循环是根据每个玩家确定的。setInterval应该成为画布上的一个全局操作，这意味着应该只有一个更新方法作用于所有玩家。同时进行一系列间歇不仅会导致性能下降，而且在不清除其他玩家的情况下清除画布也会变得困难（如果不是不可能的话）

像下面这样的方法可以奏效

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

var playerInterval=setInterval（函数（）{
对于（变量i=0；i

---

此外，如果你只想支持现代浏览器，或者不介意找到一个聚填充，你可以考虑使用.

当它放置在那里时，它会使所有的玩家位置保持在画布上，同时在 StIdValVar（）/<代码>中激活它们。在这个例子中，我用

fillText来演示播放器（'0'…

，留下了0的痕迹。@Filthy\u Rich我仔细查看了你的代码并提供了进一步的信息。你需要重新构造你的代码。我明白你的意思，这是有道理的。谢谢你的提醒，希望在早上尝试一下。我会让你知道它是怎么回事。：）