用 JavaScript 重现童年的美好：经典飞机大战重现江湖

前言

还在怀念儿时畅玩飞机大战的快乐时光吗？ 如今，借助 JavaScript 的强大功能，你可以亲手重现这一童年经典，在代码的世界中找回那些逝去的时光。

一、总体效果预览

为了让你对重现后的飞机大战游戏有一个直观的认识，请扫描下面的二维码，前往 gitee 网站获取 完整代码 ：

[gitee 代码仓库二维码]

二、案例分析

1. 开始前：精心架构，全面考量

在动手编写代码之前，我们必须明确游戏的整体框架和所需的功能模块。其中包括：

• 开始游戏面板： 一个按钮，点击后即可开始游戏。
• 飞机控制： 玩家使用键盘控制飞机的移动和射击。
• 敌机生成： 随机生成敌机，并使其具有不同的速度和攻击模式。
• 碰撞检测： 实时检测飞机与敌机之间的碰撞，并进行相应的处理。
• 得分系统： 玩家击落敌机获得分数，得分越高，游戏难度越大。
• 游戏结束： 当飞机被敌机击落或游戏时间结束时，游戏结束。

2. JavaScript 代码实现：核心逻辑与交互

2.1 开始游戏面板

const startButton = document.getElementById("start-button");
startButton.addEventListener("click", startGame);

当玩家点击开始游戏按钮时，startGame() 函数将被调用，正式开启游戏。

2.2 飞机控制：敏捷穿梭，精准射击

const plane = {
  x: canvas.width / 2,
  y: canvas.height - 100,
  speed: 10,
  shootTimer: 0,
  shootInterval: 500
};

document.addEventListener("keydown", (e) => {
  switch (e.key) {
    case "ArrowLeft":
      plane.x -= plane.speed;
      break;
    case "ArrowRight":
      plane.x += plane.speed;
      break;
    case "ArrowUp":
      plane.y -= plane.speed;
      break;
    case "ArrowDown":
      plane.y += plane.speed;
      break;
    case " ":
      shoot();
      break;
  }
});

通过监听键盘事件，玩家可以控制飞机向左、右、上、下移动，以及按空格键发射子弹。

2.3 敌机生成：随机应变，挑战升级

setInterval(() => {
  const enemy = {
    x: Math.random() * canvas.width,
    y: -100,
    speed: Math.random() * 5 + 1,
    type: Math.floor(Math.random() * 3) + 1
  };
  enemies.push(enemy);
}, 1000);

游戏每隔 1 秒生成一个新的敌机，随机确定其初始位置、速度和类型（1、2 或 3），增加游戏的挑战性。

2.4 碰撞检测：实时响应，扣人心弦

function checkCollision() {
  for (let i = 0; i < enemies.length; i++) {
    const enemy = enemies[i];
    const distance = Math.sqrt(
      Math.pow(enemy.x - plane.x, 2) + Math.pow(enemy.y - plane.y, 2)
    );
    if (distance < 30) {
      // 碰撞发生，游戏结束
      gameOver();
    }
  }
}

每帧都执行碰撞检测，实时判断飞机与敌机之间的距离是否小于 30，如果发生碰撞，则调用 gameOver() 函数，结束游戏。

2.5 得分系统：激励玩家，增添乐趣

let score = 0;

function addScore() {
  score += 10;
  scoreElement.innerHTML = score;
}

每当玩家击落一架敌机，addScore() 函数就会被调用，将分数增加 10 分。

2.6 游戏结束：重温经典，回味无穷

function gameOver() {
  clearInterval(gameLoop);
  alert("游戏结束！你的得分是：" + score);
}

当飞机被击落或游戏时间结束时，gameOver() 函数将被调用，清除游戏循环并显示一个警报，告知玩家游戏结束和最终得分。

三、补充说明：锦上添花，提升体验

1. 优化画面：赏心悦目，沉浸其中

添加 CSS 样式或使用 HTML5 Canvas API，优化飞机、敌机、子弹和其他游戏元素的外观，提升视觉效果，营造更加沉浸式的游戏体验。

2. 背景音乐：动感十足，氛围烘托

加入背景音乐或音效，烘托游戏氛围，让玩家在战斗中获得更丰富的感官体验。

3. 排行榜功能：一较高下，争夺荣誉

创建一个排行榜，记录玩家的最高得分，激发竞争意识，提升游戏的可玩性。

结语

重现经典飞机大战游戏不仅是一次怀旧之旅，更是一次技术实践的考验。通过 JavaScript 的强大功能，我们可以重温儿时的快乐，探索代码的魅力。希望这篇文章能够帮助你创作出自己的飞机大战杰作，在代码的世界里重温童年时光！