用 CSS 和 HTML 创造激动人心的飞机大战游戏展示页面

2023-09-18 12:50:45

代码打造的史诗：构建一个基于网页的飞机大战

升空：构建游戏画布

我们的旅程始于建立一个游戏画布，它将成为我们飞机和敌机的战场。使用 HTML 创建一个 div 元素，赋予它一个 id 属性，指定为我们的游戏区域：

<div id="game-canvas"></div>

借助 CSS 的力量，我们可以定义画布的大小、背景和位置：

#game-canvas {
  width: 600px;
  height: 400px;
  background: #000;
  position: relative;
}

点亮夜空：创建飞机

现在，让我们为我们的游戏引入主角——飞机。使用 HTML 创建一个 div 元素，并为其指定一个 id 属性：

<div id="player-plane"></div>

通过 CSS，我们可以定义飞机的外观，包括大小、形状和颜色：

#player-plane {
  width: 50px;
  height: 50px;
  background: #fff;
  position: absolute;
  top: 200px;
  left: 200px;
}

动画起飞：让飞机飞起来

为了让飞机动起来，我们需要 CSS 动画。我们创建一个关键帧动画，定义飞机在画布上的移动路径：

@keyframes move-plane {
  0% {
    top: 200px;
    left: 200px;
  }
  50% {
    top: 100px;
    left: 300px;
  }
  100% {
    top: 200px;
    left: 400px;
  }
}

#player-plane {
  animation: move-plane 5s infinite linear;
}

敌机入侵：创建动态障碍物

为了增加游戏的难度，我们需要添加敌机。使用 HTML 创建多个带有 class 属性的 div 元素：

<div class="enemy-plane"></div>
<div class="enemy-plane"></div>
<div class="enemy-plane"></div>

使用 CSS，我们可以定义敌机的外观和行为：

.enemy-plane {
  width: 30px;
  height: 30px;
  background: #f00;
  position: absolute;
}

.enemy-plane:nth-child(1) {
  top: 100px;
  left: 100px;
  animation: move-enemy-1 3s infinite linear;
}

.enemy-plane:nth-child(2) {
  top: 200px;
  left: 300px;
  animation: move-enemy-2 4s infinite linear;
}

.enemy-plane:nth-child(3) {
  top: 300px;
  left: 200px;
  animation: move-enemy-3 5s infinite linear;
}

@keyframes move-enemy-1 {
  0% {
    top: 100px;
    left: 100px;
  }
  50% {
    top: 50px;
    left: 200px;
  }
  100% {
    top: 100px;
    left: 300px;
  }
}

@keyframes move-enemy-2 {
  0% {
    top: 200px;
    left: 300px;
  }
  50% {
    top: 150px;
    left: 400px;
  }
  100% {
    top: 200px;
    left: 500px;
  }
}

@keyframes move-enemy-3 {
  0% {
    top: 300px;
    left: 200px;
  }
  50% {
    top: 250px;
    left: 100px;
  }
  100% {
    top: 300px;
    left: 200px;
  }
}

响应控制：让飞机随心所欲

为了让玩家控制飞机，我们需要添加键盘事件监听器：

document.addEventListener('keydown', (event) => {
  const playerPlane = document.getElementById('player-plane');
  switch (event.key) {
    case 'ArrowUp':
      playerPlane.style.top = parseInt(playerPlane.style.top) - 10 + 'px';
      break;
    case 'ArrowDown':
      playerPlane.style.top = parseInt(playerPlane.style.top) + 10 + 'px';
      break;
    case 'ArrowLeft':
      playerPlane.style.left = parseInt(playerPlane.style.left) - 10 + 'px';
      break;
    case 'ArrowRight':
      playerPlane.style.left = parseInt(playerPlane.style.left) + 10 + 'px';
      break;
  }
});

碰撞检测：躲避敌机

最后，为了让游戏更具互动性，我们需要实现碰撞检测。我们通过比较飞机和敌机之间的距离来完成此操作：

setInterval(() => {
  const playerPlane = document.getElementById('player-plane');
  const enemyPlanes = document.querySelectorAll('.enemy-plane');

  enemyPlanes.forEach((enemyPlane) => {
    const playerPlaneRect = playerPlane.getBoundingClientRect();
    const enemyPlaneRect = enemyPlane.getBoundingClientRect();

    if (playerPlaneRect.left < enemyPlaneRect.right &&
        playerPlaneRect.right > enemyPlaneRect.left &&
        playerPlaneRect.top < enemyPlaneRect.bottom &&
        playerPlaneRect.bottom > enemyPlaneRect.top) {
      alert('游戏结束！');
    }
  });
}, 100);