时间戳

首页 > 解决方案 > javascript左右移动一个div

javascript - javascript左右移动一个div

问题描述

我制作了这个迷你游戏，我希望名为 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>

标签： javascripthtmlcss

解决方案

您需要使用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>

推荐阅读