从零开始实现坦克大战之坦克外观

2023-12-01 08:35:25

坦克的外观

坦克的外观主要由两个部分组成：坦克壳子和炮管。坦克壳子是一个矩形，炮管是一个圆柱体。我们先来创建坦克壳子。

<div id="tank-body">
  <div class="tank-top"></div>
  <div class="tank-bottom"></div>
</div>

其中，tank-body 是坦克壳子的 ID，tank-top 是坦克顶部的 class，tank-bottom 是坦克底部的 class。

接下来，我们来创建炮管。

<div id="tank-turret">
  <div class="tank-gun"></div>
</div>

其中，tank-turret 是炮管的 ID，tank-gun 是炮管的 class。

坦克的样式

现在我们已经创建了坦克的外观，接下来我们来给坦克添加样式。

#tank-body {
  width: 50px;
  height: 50px;
  background-color: green;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#tank-turret {
  width: 20px;
  height: 20px;
  background-color: black;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
}

.tank-top {
  width: 100%;
  height: 20px;
  background-color: darkgreen;
}

.tank-bottom {
  width: 100%;
  height: 30px;
  background-color: darkgreen;
}

.tank-gun {
  width: 10px;
  height: 10px;
  background-color: black;
}

坦克的控制

现在我们已经创建了坦克的外观和样式，接下来我们来控制坦克的移动。

const tankBody = document.getElementById('tank-body');
const tankTurret = document.getElementById('tank-turret');

document.addEventListener('keydown', (event) => {
  switch (event.key) {
    case 'ArrowUp':
      tankBody.style.top = parseInt(tankBody.style.top) - 5 + 'px';
      break;
    case 'ArrowDown':
      tankBody.style.top = parseInt(tankBody.style.top) + 5 + 'px';
      break;
    case 'ArrowLeft':
      tankBody.style.left = parseInt(tankBody.style.left) - 5 + 'px';
      break;
    case 'ArrowRight':
      tankBody.style.left = parseInt(tankBody.style.left) + 5 + 'px';
      break;
  }
});