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。

画布 - 如何一次为多个图像制作动画？

1 个答案: