Question

我正在尝试用html制作类似pong的游戏，但是每当一个玩家尝试移动另一个动作时，它就会停止。

//javaScript

var p1axis = 40;
var p2axis = 40;
function input(event) 
{
    var x = event.charCode || event.keyCode;
    if(x == 115) 
    {
        p1axis += 2;
        document.getElementById("p1").style.top = p1axis + "%";
    }
    if(x == 119) 
    {
        p1axis -= 2;
        document.getElementById("p1").style.top = p1axis + "%";
    }
    if(x == 108) 
    {
        p2axis += 2;
        document.getElementById("p2").style.top = p2axis + "%";
    }
    if(x == 111) 
    {
        p2axis -= 2;
        document.getElementById("p2").style.top = p2axis + "%";
    }
}

我希望两位选手都能自由比赛。相反，只有一个人可以一次移动。

Answer 1

您可以创建一个数组并在按下键时添加键。释放密钥后，您将必须删除它们。另外，我只是将keydown与jQuery结合使用，也可以将keydown与JavaScript结合使用。

var bKeys = [];

$('body').keydown(function(e) {
  if (bKeys.includes(e.which) === false) {
    bKeys.push(e.which);
  }
});

$('body').keyup(function(e) {
  bKeys.pop(e.which);
});
setInterval(() => {
  console.log(bKeys);
}, 15);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

请记住在运行代码时单击正文

Answer 2

var k1 = false, k2 = false, k3 = false, k4 = false;

var p1axis = 40;
var p2axis = 40;

function input(event) 
{
  var x = event.charCode || event.keyCode;
  if(x == 115 || x == 83) 
  {
    k1 = true;
  }
  if(x == 119 || x == 87) 
  {
    k2 = true;
  }
  if(x == 108 || x == 76) 
  {
    k3 = true;
  }
  if(x == 111 || x == 79) 
  {
    k4 = true;
  }
}

function remove(event) 
{
  var x = event.charCode || event.keyCode;
  if(x == 115 || x == 83) 
  {
    k1 = false;
  }
  if(x == 119 || x == 87) 
  {
    k2 = false;
  }
  if(x == 108 || x == 76) 
  {
    k3 = false;
  }
  if(x == 111 || x == 79) 
  {
    k4 = false;
  }
}

function move() 
{
  if(k1) 
  {
    p1axis += 1;
    document.getElementById("p1").style.top = p1axis + "%";
  }
  if(k2) 
  {
    p1axis -= 1;
    document.getElementById("p1").style.top = p1axis + "%";
  }
  if(k3) 
  {
    p2axis += 1;
    document.getElementById("p2").style.top = p2axis + "%";
  }
  if(k4) 
  {
    p2axis -= 1;
    document.getElementById("p2").style.top = p2axis + "%";
  }

  setTimeout(move, 20);
}

如何在javaScript中获取多个键盘输入

2 个答案: