Question

我目前正在使用socket.io制作html5多人游戏。我的问题是我只能沿直线移动角色，同时我还希望能够在画布上对角移动。我的意思是，如果我按“ a”和“ d”键，我的角色将向右下角倾斜移动。使用我当前的代码，我的角色只能向右或向下移动。

//客户端，我如何捕获键盘输入。

document.onkeydown = function(event){
    console.log(`Keycode: ${event.which}`);
    if(event.which == 68 || event.which == 39)   //d of pijl rechts
        sock.emit('keyPress', 'right');
    else if(event.which == 83 || event.which == 40)  //s of pijl naar beneden
        sock.emit('keyPress','down');
    else if(event.which == 65 || event.which == 37) //a of pijl naar  links
        sock.emit('keyPress','left');
    else if(event.which == 87 || event.which == 38) // w of pijl naar omhoog
        sock.emit('keyPress','up');
}

//服务器，

sock.on('keyPress', (keypress) => {
    var currentUser = this[sock.id];
    if (keypress == 'up') {
        currentUser.y = currentUser.y - currentUser.speed;
    }
    else if (keypress == 'down') {
        currentUser.y = currentUser.y + currentUser.speed; 
    }
    else if (keypress == 'left') {
        currentUser.x = currentUser.x - currentUser.speed;
    }
    else if (keypress == 'right') {
        currentUser.x = currentUser.x + currentUser.speed;
    }
});
setInterval(function(){
   io.emit('update-players', Users);
},1000/30);

//客户端，如何将所有玩家吸引到画布上

sock.on('update-players', updatePlayers);
var updatePlayers= (Users) => {
   ctx.clearRect(0,0,10000,10000);
   Users.forEach((user) => {
      var img = new Image();
      img.src = 'Images/player.png';
      ctx.drawImage(img,user.x,user.y,user.width,user.height);
      ctx.font = "20px Courier New";
      ctx.fillText(`${user.name}`,user.x,(user.y - 10))
   } 
});

对不起，我的英语不好。

Answer 1

当我们按下键盘上的两个键并按住它们时，只有最后按下的键才会在 keydown 侦听器中重复出现事件。因此，例如，如果您“同时”按下DOWN和RIGHT，则只会重复向听者报告一个，而另一个将被忽略。

更好的方法是让 keydown 和 keydown 事件监听器，如下所示：

var keyStates = {
    up: false,
    down: false,
    left: false,
    right: false
}

function updateKeyStates(code, value) {
    if(code == 68 || code == 39)   //d of pijl rechts
        keyStates.right = value;
    else if(code == 83 || code == 40)  //s of pijl naar beneden
        keyStates.down = value;
    else if(code == 65 || code == 37) //a of pijl naar  links
        keyStates.left = value;
    else if(code == 87 || code == 38) // w of pijl naar omhoog
        keyStates.up = value;
}

document.addEventListener('keydown', function(event) {
    console.log(`Pressed: ${event.which}`); 
    updateKeyStates(event.which, true);
});

document.addEventListener('keyup', function(event) {
    console.log(`Released: ${event.which}`);
    updateKeyStates(event.which, false);
});

因此，我们基本上每个方向都有一个布尔变量。您应该将该信息（keyStates）发送到服务器，并且它应该根据按下的键进行数学计算。

使用socket.io在javascript中进行播放器移动

1 个答案: