制作一个适合多人游戏的画布视图端口

Question

最近，我在我正在创建的一个io游戏中试验了HTML5画布，但是我已经跨越了视口的问题。虽然制作视口并不一定困难，但我发现在正确的位置上显示游戏的其他玩家是很困难的(使用ctx.translate())。有没有可能有人会对我的代码进行修改，或者发布一个能帮助我修改代码的例子。

其他玩家渲染时没有视口代码很好。

谢谢!

我的代码(客户端)：

socket.on('state', (gameState) => {
    for (let player in gameState.players) {
        renderEnemies(gameState.players[player]);
    }
});

function renderEnemies(player) {
const ctx = document.getElementById('gameboard').getContext('2d');
var canvas = document.getElementById('gameboard');

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'red';
    ctx.fillRect(10, 10, 50, 50);
    ctx.fillRect(110, 30, 50, 50);
    ctx.drawImage(document.getElementById('player'), player.x, player.y);
}

function press(e){
const ctx = document.getElementById('gameboard').getContext('2d');
var canvas = document.getElementById('gameboard');

var startPoint = document.getElementById("gameboard");
  if (e.keyCode === 38 /* up */ || e.keyCode === 87 /* w */){
    ctx.translate(0, 2);
    socket.emit('movement', playerMovement);
    playerMovement.up = true;
  }
  if (e.keyCode === 39 /* right */ || e.keyCode === 68 /* d */){
    ctx.translate(-2, 0);
    socket.emit('movement', playerMovement);
    playerMovement.right = true;
  }
  if (e.keyCode === 40 /* down */ || e.keyCode === 83 /* s */){
    ctx.translate(0, -2);
    socket.emit('movement', playerMovement);
    playerMovement.down = true;
  }
  if (e.keyCode === 37 /* left */ || e.keyCode === 65 /* a */){
    ctx.translate(2, 0);
    socket.emit('movement', playerMovement);
    playerMovement.left = true;
  }
}

function release(e){
  if (e.keyCode === 38 /* up */ || e.keyCode === 87 /* w */){
    playerMovement.up = false;
  }
  if (e.keyCode === 39 /* right */ || e.keyCode === 68 /* d */){
    playerMovement.right = false;
  }
  if (e.keyCode === 40 /* down */ || e.keyCode === 83 /* s */){
    playerMovement.down = false;
  }
  if (e.keyCode === 37 /* left */ || e.keyCode === 65 /* a */){
    playerMovement.left = false;
  }
}

服务器将移动作为播放器发送到客户端，这意味着可能会有很大的延迟，因此这是另一个需要解决的问题。

Answer 1

扩大我在评论中提到的..。

您需要循环外的clearRect，或者删除之前所做的操作，下面是一个示例：

var canvas = document.getElementById('gameboard');
const ctx = canvas.getContext('2d');

socket.on('state', (gameState) => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'red';
    ctx.fillRect(10, 10, 50, 50);
    ctx.fillRect(110, 30, 50, 50);

    for (let player in gameState.players) {
        renderEnemy(gameState.players[player]);
    }
});

function renderEnemy(player) {
    ctx.drawImage(document.getElementById('player'), player.x, player.y);
}

function press(e){
  var startPoint = document.getElementById("gameboard");
  if (e.keyCode === 38 /* up */ || e.keyCode === 87 /* w */){
    ctx.translate(0, 2);
    socket.emit('movement', playerMovement);
    playerMovement.up = true;
  }
  ...
}

有几件事你应该看看：

• 将画布和ctx从函数中移出并移至顶部，这些应该是全局的，因为画布和上下文不改变
• 更改了函数renderEnemy的名称，因为您只传递了一个条目
• 将您的clearRect移出renderEnemy，这样我们就可以清除一次，然后绘制出所有
• ，还需要确保图像被加载，否则什么都不会显示H 211F 212