使用 JavaScript 的电晕战斗机游戏

简介

这是一款使用 JavaScript 编写的电晕战斗机游戏，玩家需要使用键盘控制战机进行战斗，避免敌机攻击并尽可能地摧毁敌机。此游戏虽然简单，但却涵盖了许多基本的 JS 知识点和操作方式，适合 JavaScript 初学者练习项目。

游戏玩法

玩家使用键盘的左、右、上、下箭头按键控制战机移动。玩家需要避免敌机的攻击，同时也需要攻击敌机，获得尽可能高的分数。

游戏中有三种不同的敌机，包括小型飞机、中型飞机和大型飞机。玩家需要分别消灭它们，才能获取相应的分数。同时，游戏中还有一种跟踪导弹，会自动追踪玩家的战机，玩家需要使用闪避技巧躲避它。

游戏中还有一些道具，包括医疗包和增强包。医疗包可以恢复玩家的战机生命值，增强包可以提高玩家的攻击力。但是，道具出现时间有限，玩家必须及时捡取。

如果玩家的战机生命值降为 0，则游戏结束。在游戏结束后，玩家可以选择重新开始或退出游戏。

实现思路

游戏的核心思路是使用 JS 不断更新画布中的内容，以实现动态效果。

游戏中的战机、敌机、道具、导弹等都是通过 JS 的类对象进行管理。每隔一定时间，不断生成战机、敌机、道具、导弹等，并进行相应的动作。如敌机会自动往下移动、发射子弹等。玩家的战机则通过监听键盘按键事件进行移动和攻击。

游戏中的碰撞检测、生命值和分数的管理等都是通过 JS 来实现的。如果发生碰撞，生命值会相应减少或增加，分数也会相应增加。

游戏结束时，通过 JS 提供的 confirm 函数弹出一个确认框，玩家可以选择重新开始或退出游戏。

代码片段

以下是游戏中的核心代码片段：

// 创建战机对象
class Fighter {
  constructor(x, y, imgSrc, canvas, ctx) {
    this.x = x;
    this.y = y;
    this.img = new Image();
    this.img.src = imgSrc;
    this.canvas = canvas;
    this.ctx = ctx;
    this.life = 10;
    ...
  }
  ...
}

// 创建敌机对象
class Enemy {
  constructor(x, y, imgSrc, canvas, ctx, type) {
    this.x = x;
    this.y = y;
    this.img = new Image();
    this.img.src = imgSrc;
    this.canvas = canvas;
    this.ctx = ctx;
    this.type = type;
    ...
  }
  ...
}

// 创建道具对象
class Item {
  constructor(x, y, imgSrc, canvas, ctx, type) {
    this.x = x;
    this.y = y;
    this.img = new Image();
    this.img.src = imgSrc;
    this.canvas = canvas;
    this.ctx = ctx;
    this.type = type;  
    ...
  }
  ...
}

// 创建导弹对象
class Missile {
  constructor(x, y, imgSrc, canvas, ctx) {
    this.x = x;
    this.y = y;
    this.img = new Image();
    this.img.src = imgSrc;
    this.canvas = canvas;
    this.ctx = ctx;
    ...
  }
  ...
}

// 更新画布内容
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  fighter.draw();
  ...
}

// 检测碰撞
function collide(obj1, obj2) {
  ...
}

// 开始游戏
function startGame() {
  ...
}

// 游戏结束
function gameOver() {
  ...
}

// 监听键盘按键事件
document.addEventListener("keydown", function(event) {
  if (event.key === "ArrowLeft") {
    fighter.moveLeft();
  } else if (event.key === "ArrowRight") {
    fighter.moveRight();
  } else if (event.key === "ArrowUp") {
    fighter.moveUp();
  } else if (event.key === "ArrowDown") {
    fighter.moveDown();
  } else if (event.key === " ") {
    fighter.fire();
  }
});

结束语

此电晕战斗机游戏在 JS 基础语法和 DOM 操作方面有很好的示范作用，适合初学者进行学习练习。当然，游戏的核心代码还可以进一步优化和扩展，添加更多的玩法、缩短代码长度、提高游戏性能等，有兴趣的读者可以自行进行尝试和实现。