javascript左右移动div

Question

我制作了这个迷你游戏，我希望我的名为 div 的“玩家”在“游戏”div 内左右移动，但我被卡住了。 有人能帮我吗？ 我认为我的错误是在 JavaScript 文件中......此外，如果我的“玩家”div 移动，我的“枪”div 也会随之移动吗？

 let modifier = 50; let player = document.getElementById('player'); window.addEventListener('keydown', (event) => { const { style } = player; switch (event.key) { case 'ArrowRight': style.left = `${parseInt(style.left) - modifier}px`; break; case 'ArrowLeft': style.left = `${parseInt(style.left) + modifier}px`; break; } });

 body { margin: 0; padding: 0; background-color: mediumblue; height: 800px; overflow: hidden; } p { font-size: 48pt; color: black; font-family: fantasy; font-weight: bold; position: relative; left: 300px; top: -50px; } .game { width: 800px; height: 500px; position: center; border: 14px solid darkblue; border-radius: 5px; margin-left: 300px; margin-top: -100px; background-color: black; } #player { height: 20px; width: 40px; background-color: firebrick; border-radius: 2px; position: relative; top: 470px; left: 400px; } #gun { position: relative; height: 40px; width: 10px; background-color: firebrick; top: -20px; left: 15px; border-radius: 2px; } #bullet { position: relative; background-color: darkorange; width: 8px; height: 20px; top: 0; left: 1px; animation: shoot 0.7s linear; } @keyframes shoot { 0% { top: 0px; } 100% { top: -470px; } }

 <p>Galaxy Invaders</p> <div class="game"> <div id="player"> <div id="gun"> <div id="bullet"></div> </div> </div> <div id="enemy"></div> </div> <script src="js.js"></script>

Answer 1

您需要使用getComputedStyle ： https : //developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

 let modifier = 50; let player = document.getElementById('player'); window.addEventListener('keydown', (event) => { switch (event.key) { case 'ArrowRight': player.style.left = (parseInt(getComputedStyle(player).left) + modifier) + "px"; break; case 'ArrowLeft': player.style.left = (parseInt(getComputedStyle(player).left) - modifier) + "px"; break; } });

 body { margin: 0; padding: 0; background-color: mediumblue; height: 800px; overflow: hidden; } p { font-size: 48pt; color: black; font-family: fantasy; font-weight: bold; position: relative; left: 300px; top: -50px; } .game { width: 800px; height: 500px; position: center; border: 14px solid darkblue; border-radius: 5px; margin-left: 300px; margin-top: -100px; background-color: black; } #player { height: 20px; width: 40px; background-color: firebrick; border-radius: 2px; position: relative; top: 470px; left: 400px; } #gun { position: relative; height: 40px; width: 10px; background-color: firebrick; top: -20px; left: 15px; border-radius: 2px; } #bullet { position: relative; background-color: darkorange; width: 8px; height: 20px; top: 0; left: 1px; animation: shoot 0.7s linear; } @keyframes shoot { 0% { top: 0px; } 100% { top: -470px; } }

 <p>Galaxy Invaders</p> <div class="game"> <div id="player"> <div id="gun"> <div id="bullet"></div> </div> </div> <div id="enemy"></div> </div>

Answer 2

由.style和getComputedStyle()获取的 HTML 元素 CSS 属性值将由 Javascript 作为字符串返回，例如10px for div { left: 10px} ，包含取决于 CSS 属性的单位类型。

您必须从这些字符串中减去单元类型，然后您的parseInt应该可以工作：

parseInt(style.left.replace('px', ''))