Question

我遇到的问题是，每次我为w和s字符触发事件键时，它都会登录到控制台，显示触发了w事件键，但是div没有任何反应，因为我希望它向上移动和向下。我尝试将代码结构用作第一个div，但只能获取console.log（e）。我如何使其向上或向下移动？

我基本上在div元素和一些js上构建pong。我得到了第一个要用的桨。当我尝试运行相同的代码但使用keydown功能并使用e.key等于w时。由于某种原因，显示控制台记录了按下w键的情况，但它从未移动第二个div。

var playerOne = document.getElementById("playerOnePaddle");
var playerTwo = document.getElementById("playerTwoPaddle");

console.log(playerOne);
console.log(playerTwo);

 window.addEventListener('keydown', function (e) {
   var y = parseInt(getComputedStyle(playerOne).top);
   e.preventDefault();
   
   if (e.key === "ArrowUp") {
      y -= 1;
      playerOne.style.top = y + "px";
      console.log(e);
    } else if (e.key === "ArrowDown") {
      y += 1;
      playerOne.style.top = y + "px";
      console.log(e);
    }
});
  
window.addEventListener('keydown', function (e){
  var x = parseInt(getComputedStyle(playerTwo).top);
  e.preventDefault();
  
  if (e.key === 'w') {
    x -= 1;
    playerOne.style.top = x + "px";
    console.log(e);
  } else if (e.key === 's') {
    x = x + 1;
    playerOne.style.top = x + "px";
    console.log(e);
  }
});

#backBoard {
  border: 1px solid black;
  height: 200px;
  position: relative;
  width: 400px;
}

#playerOnePaddle {
  background: black;
  border: 1px solid black;
  height: 50px;
  position: absolute;
  top: 0;
  left: 4px;
  width: 4px;
}

#playerTwoPaddle {
  background: red;
  border: 1px solid red;
  height: 50px;
  position: absolute;
  top: 0;
  left: 390px;
  width: 4px;
}

#ball {
  background-color: green;
  border: 1px solid black;
  border-radius: 50%;
  height: 15px;
  position: absolute;
  top: 0;
  left: 50px;
  width: 15px;
}

<div id="backBoard">
  <div id="playerOnePaddle"></div>
  <div id="playerTwoPaddle"></div>
  <div id="ball"></div>
</div>

Answer 1

在第二个keydown回调中，您正在更改 playerOne 的样式，需要将其添加到 playerTwo 。

Answer 2

这应该是您所期望的（运行摘录）：

您不必制作两个确切的事件侦听器，只需将所有代码添加到一个并使用条件即可。
您的x和y每次执行事件函数时都会被重置，因此我将它们移出了回调函数。
您在两个事件中使用的是同一位玩家playerOne。

var playerOne = document.getElementById("playerOnePaddle");
var playerTwo = document.getElementById("playerTwoPaddle");
var y = parseInt(getComputedStyle(playerOne).top);
var x = parseInt(getComputedStyle(playerTwo).top)


 window.addEventListener('keydown', function (e) {
   e.preventDefault();
   if (e.key === "ArrowUp") {
      y -= 1;
      playerOne.style.top = y+"px";
     
    } else if (e.key === "ArrowDown") {
      y += 1;
      playerOne.style.top = y+"px";
 
    } else if (e.key === 'w') {
     x -= 1;
     playerTwo.style.top = x+"px";

    } else if (e.key === 's') {
     x = x + 1;
     playerTwo.style.top = x+"px";
  
    }
});

#backBoard {
  border: 1px solid black;
  height: 200px;
  position: relative;
  width: 400px;
}

#playerOnePaddle {
  background: black;
  border: 1px solid black;
  height: 50px;
  position: absolute;
  top: 0;
  left: 4px;
  width: 4px;
}

#playerTwoPaddle {
  background: red;
  border: 1px solid red;
  height: 50px;
  position: absolute;
  top: 0;
  left: 390px;
  width: 4px;
}

#ball {
  background-color: green;
  border: 1px solid black;
  border-radius: 50%;
  height: 15px;
  position: absolute;
  top: 0;
  left: 50px;
  width: 15px;
}

<div id="backBoard">
  <div id="playerOnePaddle"></div>
  <div id="playerTwoPaddle"></div>
  <div id="ball"></div>
</div>

如何使用键盘上的w和s键使第二个div上下移动？

2 个答案: