JavaScript实现简易飞机大战

下面我将详细讲解“JavaScript实现简易飞机大战”的完整攻略。

前言

在开始编写代码之前，我们需要先了解一下游戏的基本结构和要素，主要包括游戏界面、玩家飞机、敌机、子弹、游戏结束等。在了解了这些基本要素后，我们才能更好的开始编写游戏代码。

游戏界面

游戏的界面主要由背景和玩家飞机、敌机等元素组成。我们可以使用HTML和CSS创建一个游戏界面，其中CSS的样式可以设定背景图片和其他元素的样式。

<div class="game">
  <div class="background"></div>
  <div class="player"></div>
  <div class="enemy"></div>
</div>

<style>
  .game {
    position: relative;
    width: 480px;
    height: 680px;
    margin: 0 auto;
  }

  .background {
    background-image: url(background.jpg);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .player {
    background-image: url(player.png);
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
  }

  .enemy {
    background-image: url(enemy.png);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
  }
</style>

玩家飞机

玩家飞机主要有移动和射击两种行为，我们可以分别编写两个函数来实现。移动函数需要监听键盘事件，根据按键的不同来改变玩家飞机的位置。射击函数需要在每个时间间隔内不断地创建子弹并移动，当子弹移出游戏界面时需要将其从DOM中移除。

<div class="game">
  <div class="background"></div>
  <div class="player"></div>
  <div class="enemy"></div>
  <div class="bullet"></div>
</div>

<style>
  /* 省略游戏界面的样式 */

  .bullet {
    background-image: url(bullet.png);
    position: absolute;
    width: 5px;
    height: 12px;
  }
</style>

<script>
  // 玩家飞机的移动函数
  function movePlayer(event) {
    const player = document.querySelector('.player')
    const game = document.querySelector('.game')
    const gameRect = game.getBoundingClientRect()
    const playerRect = player.getBoundingClientRect()

    // 根据按键来移动玩家飞机
    if (event.key === 'ArrowLeft' && playerRect.left > gameRect.left) {
      player.style.left = playerRect.left - 10 + 'px'
    } else if (event.key === 'ArrowRight' && playerRect.right < gameRect.right) {
      player.style.left = playerRect.left + 10 + 'px'
    } else if (event.key === 'ArrowUp' && playerRect.top > gameRect.top) {
      player.style.top = playerRect.top - 10 + 'px'
    } else if (event.key === 'ArrowDown' && playerRect.bottom < gameRect.bottom) {
      player.style.top = playerRect.top + 10 + 'px'
    }
  }

  // 玩家飞机的射击函数
  function shoot() {
    const player = document.querySelector('.player')
    const bullet = document.createElement('div')
    const bulletPos = {
      x: player.getBoundingClientRect().left + 22,
      y: player.getBoundingClientRect().top - 12
    }

    // 创建子弹并设置样式和位置
    bullet.classList.add('bullet')
    bullet.style.left = bulletPos.x + 'px'
    bullet.style.top = bulletPos.y + 'px'
    document.querySelector('.game').appendChild(bullet)

    // 移动子弹
    const timer = setInterval(() => {
      bulletPos.y -= 10
      bullet.style.top = bulletPos.y + 'px'

      // 如果子弹移出界面，就将其从DOM中移除
      if (bulletPos.y < -10) {
        clearInterval(timer)
        bullet.remove()
      }
    }, 30)
  }

  window.addEventListener('keydown', movePlayer)
  setInterval(shoot, 300)
</script>

敌机

敌机的出现也需要在一定的时间间隔内不断地创建，并且会向下移动。当敌机被子弹击中时，要将其从DOM中移除。当敌机与玩家飞机相撞时，游戏结束。

<div class="game">
  <div class="background"></div>
  <div class="player"></div>
  <div class="bullet"></div>
</div>

<style>
  /* 省略游戏界面和子弹的样式 */

  .enemy {
    background-image: url(enemy.png);
    position: absolute;
    width: 50px;
    height: 50px;
  }
</style>

<script>
  // 创建敌机
  function createEnemy() {
    const enemy = document.createElement('div')
    const enemyPos = {
      x: Math.random() * 430 + 25,
      y: -50
    }

    // 设置敌机的样式和位置
    enemy.classList.add('enemy')
    enemy.style.left = enemyPos.x + 'px'
    enemy.style.top = enemyPos.y + 'px'
    document.querySelector('.game').appendChild(enemy)

    // 移动敌机
    const timer = setInterval(() => {
      enemyPos.y += 5
      enemy.style.top = enemyPos.y + 'px'

      // 如果敌机移出界面，就将其从DOM中移除
      if (enemyPos.y > 680) {
        clearInterval(timer)
        enemy.remove()
      }

      // 检测敌机和子弹是否相撞
      const bullets = document.querySelectorAll('.bullet')

      bullets.forEach(bullet => {
        const bulletRect = bullet.getBoundingClientRect()
        const enemyRect = enemy.getBoundingClientRect()

        if (
          bulletRect.bottom >= enemyRect.top &&
          bulletRect.top <= enemyRect.bottom &&
          bulletRect.right >= enemyRect.left &&
          bulletRect.left <= enemyRect.right
        ) {
          clearInterval(timer)
          enemy.remove()
          bullet.remove()
        }
      })

      // 检测敌机和玩家飞机是否相撞
      const player = document.querySelector('.player')
      const playerRect = player.getBoundingClientRect()

      if (
        playerRect.bottom >= enemyRect.top &&
        playerRect.top <= enemyRect.bottom &&
        playerRect.right >= enemyRect.left &&
        playerRect.left <= enemyRect.right
      ) {
        clearInterval(timer)
        gameOver()
      }
    }, 30)
  }

  // 游戏结束函数
  function gameOver() {
    alert('Game Over!')
  }

  setInterval(createEnemy, 1000)
</script>

示例说明

为了更好的说明代码的作用和效果，以下展示两个简单的示例。

示例1

在游戏界面中，玩家飞机可以通过上下左右键来移动，按下空格键可以发射子弹。敌机则会在一定的时间间隔内从上方出现，并向下移动。

示例2

当子弹与敌机相撞时，敌机会被摧毁并从游戏界面中消失。当敌机与玩家飞机相撞时，游戏结束并显示提示框。