javascript - 使用 HTML5 Canvas 和 Socket.io 服务器将用户（玩家）定位在移动后始终处于中心位置

Question

在一些 .io 游戏中，玩家总是出现在屏幕的中心，并且在四处移动时，无论坐标如何，都保持在该位置。由于我一直在制作 socket.io HTML5 画布游戏，我想知道如何在我自己的游戏中实现它。我认为这涉及一些数学，但我似乎无法理解它。我现在正在做的是让新玩家位于坐标 (50, 50)，并根据 keydown/up 上发送的套接字事件确定他们的坐标，如图所示。

作为参考，这里是服务器渲染玩家和确定坐标的部分：

gameState.players[socket.id] = {
        x: 50,
        y: 60,
        width: 2,
        height: 2
    }
    setInterval(() => {
        socket.emit('gamestate', gameState);
    }, 1000 / 60);   

    socket.on('movement', (playerMovement) => {
        const player = gameState.players[socket.id];
        
        if (playerMovement.left){
            player.x -= 2;
        }
        if (playerMovement.right){
            player.x += 2;
        }
        if (playerMovement.up){
            player.y -= 2;
        }
        if (playerMovement.down){
            player.y += 2;
        }
    });  

这是发送事件和吸引玩家的客户端代码部分。

function renderGame(uname){
    socket.emit('join', {uname: uname});

document.addEventListener('keydown',function(event){
    if ((event.keyCode == '38')||event.keyCode == '87'){
        playerMovement.up = true;
        socket.emit('movement',playerMovement);
    }else if ((event.keyCode == '40')||event.keyCode == '83'){
        playerMovement.down = true;
        socket.emit('movement',playerMovement);
    }else if ((event.keyCode == '37')||event.keyCode == '65'){
        playerMovement.left = true;
        socket.emit('movement',playerMovement);
    }else if ((event.keyCode == '39')||event.keyCode == '68'){
        playerMovement.right = true;
        socket.emit('movement',playerMovement);
    }

});
document.addEventListener('keyup',function(event){
    if ((event.keyCode == '38')||event.keyCode == '87'){
        playerMovement.up = false;
        socket.emit('movement',playerMovement);
    }else if ((event.keyCode == '40')||event.keyCode == '83'){
        playerMovement.down = false;
        socket.emit('movement',playerMovement);
    }else if ((event.keyCode == '37')||event.keyCode == '65'){
        playerMovement.left = false;
        socket.emit('movement',playerMovement);
    }else if ((event.keyCode == '39')||event.keyCode == '68'){
        playerMovement.right = false;
        socket.emit('movement',playerMovement);
    }
});

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

}

function drawPlayer(player){
    var context = document.getElementById('board').getContext('2d');

    context.beginPath();
    context.arc(player.x, player.y, player.width, 0, 2 * Math.PI, false);
    context.fillStyle = 'orange';
    context.fill();
    context.closePath();

}

我现在的想法是定义一个服务器与用户通信的相对坐标系。运行一个循环，它将确定其他玩家的相对坐标 x 和 y 是否在玩家的 100 个单位内，此时玩家将在相隔那么多单位的画布系统上看到彼此。

有更好的想法吗？

标签： javascriptnode.jssocket.iohtml5-canvas