[英]How do I make second div move down and up with the w and s keys on the keyboard?
我遇到的问题是,每次我为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>
在第二个keydown回调中,您需要更改playerOne的样式,将其添加到playerTwo 。
这应该是您所期望的(运行代码段):
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.