如何使用鍵盤上的w和s鍵使第二個div上下移動？

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

這應該是您所期望的（運行代碼段）：

1. 您不必制作兩個確切的事件偵聽器，只需將所有代碼添加到一個並使用條件即可。
2. 您的x和y每次執行事件函數時都會被重置，因此我將它們移出了回調函數。
3. 您在兩個事件中使用的是同一播放器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>