使用socket.io在javascript中进行播放器移动 [英] Player movement in javascript with socket.io

问题描述

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

Im currently making a html5 multiplayer game with socket.io. My problem is that i can only move my character in a straight line, while i also want to be able to move diagonal across my canvas. What i mean by this is if i press the 'a' and 'd' key, my character moves diagonally to the bottom right. With my current code my character only moves to the right or down.

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

//client, how i capture my keyboard input.

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); 

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

//client, how all players are drawn onto to canvas

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))
   } 
});

对不起，我的英语不好.

sorry for my crappy english.

推荐答案

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

When we press two keys on the keyboard and hold them down, only the last key pressed gets repeated events in the keydown listener. So, for example, if you press DOWN and RIGHT "at the same time", only one will be repeatedly reported to the listener and the other will be ignored.

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

A better approach is to have listeners for the keydown and keydown events, like this:

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)发送到服务器，并应根据按下的键进行数学计算.

So we basically have a boolean variable for each direction. You should send that information (keyStates) to the server and it should do the math based on which keys are down.

这篇关于使用socket.io在javascript中进行播放器移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！