游戏中只显示最后一名玩家

问题描述

我正在尝试使用 HTML 制作一个简单的多人游戏，但我不知道如何解决只显示 1 个玩家的问题。相关代码如下：

socket.on('newpos',function(data){
            var transform = ctx.getTransform();
            var camX,camY;
            for(var i = 0 ; i < data.player.length; i++){
              ctx.translate(camX,camY);
              ctx.setTransform(1,1,0);
              ctx.clearRect(0,10000,10000); 
              ctx.setTransform(transform);
              ctx.drawImage(background,10000); 
              ctx.setTransform(1,0);

              if(ID == data.player[i].id){ 
                 camX = -data.player[i].x + canvas.width / 2;
                 camY = -data.player[i].y + canvas.height / 2;
              }
              ctx.translate(camX,camY);
              ctx.drawImage(img,(data.player[i].x),(data.player[i].y),32,32);
});

这里的代码循环遍历服务器上的所有玩家。它绘制了不同玩家的视角，但只有最后加入的玩家可见。 我尝试过更改不同地方的变换以及我能想到的所有其他内容，但不知道该怎么做。

解决方法

那是因为你在每次迭代时都清除了整个画布，所以只有最后一个是可见的

取出/改变位置

ctx.clearRect(0,10000,10000)

此外，上面的代码现在应该会出现错误，因为它似乎缺少 for 循环的右括号