JS面向对象实现飞机大战

本文将为大家详细讲解如何使用面向对象的编程思想来实现飞机大战游戏。

确定类的结构

在面向对象编程中，我们首先需要确定类的结构。针对飞机大战游戏，我们可以考虑设计如下几个类：

• 游戏引擎类(GameEngine)：负责游戏的初始化、启动和停止等操作；
• 飞机类(Aircraft)：表示游戏中的玩家飞机和敌机，包含飞机的位置、速度、血量等属性以及移动、射击等方法；
• 子弹类(Bullet)：表示游戏中的子弹，包含子弹的位置、速度等属性以及移动、击中等方法。

定义类

接下来，我们可以在JavaScript代码中定义这些类。具体实现如下：

// 定义游戏引擎类
class GameEngine {
  constructor() {
    // 初始化游戏画布
    this.canvas = document.createElement('canvas');
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    document.body.appendChild(this.canvas);

    // 获取画布上下文
    this.ctx = this.canvas.getContext('2d');

    // 初始化玩家飞机和敌机
    this.player = new Aircraft(this.canvas.width / 2, this.canvas.height - 100, 2, 5, 10, 100);
    this.enemies = [];

    // 初始化子弹
    this.bullets = [];

    // 启动游戏循环
    requestAnimationFrame(() => this.gameLoop());
  }

  gameLoop() {
    // 更新游戏状态
    this.update();

    // 渲染游戏画面
    this.render();

    // 继续执行游戏循环
    requestAnimationFrame(() => this.gameLoop());
  }

  update() {
    // 更新玩家飞机和敌机
    this.player.update();
    for (let enemy of this.enemies) {
      enemy.update();
    }

    // 更新子弹
    for (let bullet of this.bullets) {
      bullet.update();

      // 判断子弹是否击中了飞机
      if (this.player.isHit(bullet)) {
        this.player.hit();
        bullet.hit();
      }
      for (let enemy of this.enemies) {
        if (enemy.isHit(bullet)) {
          enemy.hit();
          bullet.hit();
        }
      }
    }

    // 清除击毁的飞机和子弹
    this.enemies = this.enemies.filter(enemy => !enemy.isDestroyed());
    this.bullets = this.bullets.filter(bullet => !bullet.isDestroyed());

    // 检测是否需要生成新的敌机
    if (this.enemies.length < 5) {
      this.enemies.push(new Aircraft(Math.random() * this.canvas.width, 0, 1, 3, 5, 50));
    }
  }

  render() {
    // 清除画布
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

    // 绘制玩家飞机和敌机
    this.player.render(this.ctx);
    for (let enemy of this.enemies) {
      enemy.render(this.ctx);
    }

    // 绘制子弹
    for (let bullet of this.bullets) {
      bullet.render(this.ctx);
    }
  }
}

// 定义飞机类
class Aircraft {
  constructor(x, y, vx, vy, hp, score) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.hp = hp;
    this.score = score;
  }

  update() {
    // 移动飞机
    this.x += this.vx;
    this.y += this.vy;
  }

  render(ctx) {
    // 绘制飞机
    ctx.fillStyle = '#f00';
    ctx.fillRect(this.x - 20, this.y - 20, 40, 40);
  }

  isHit(bullet) {
    // 判断子弹是否击中了飞机
    const distance = Math.sqrt((bullet.x - this.x) ** 2 + (bullet.y - this.y) ** 2);
    return distance < 20;
  }

  hit() {
    // 减少飞机的血量
    this.hp--;
  }

  isDestroyed() {
    // 判断飞机是否被击毁
    return this.hp <= 0;
  }
}

// 定义子弹类
class Bullet {
  constructor(x, y, vy) {
    this.x = x;
    this.y = y;
    this.vy = vy;
  }

  update() {
    // 移动子弹
    this.y -= this.vy;
  }

  render(ctx) {
    // 绘制子弹
    ctx.fillStyle = '#00f';
    ctx.fillRect(this.x - 5, this.y - 5, 10, 10);
  }

  isHit(enemy) {
    // 判断子弹是否击中了敌机
    const distance = Math.sqrt((enemy.x - this.x) ** 2 + (enemy.y - this.y) ** 2);
    return distance < 20;
  }

  hit() {
    // 将子弹标记为已击毁
    this.destroyed = true;
  }

  isDestroyed() {
    // 判断子弹是否已被击毁
    return this.destroyed;
  }
}

调用类的方法

上述代码中，我们定义了游戏引擎(GameEngine)、飞机(Aircraft)和子弹(Bullet)三个类，并根据这些类的相应方法来实现了游戏的初始化、响应事件、更新游戏状态和渲染游戏画面等功能。最后，我们需要在JavaScript代码中调用GameEngine类的构造方法来启动游戏：

new GameEngine();

这时我们就可以在浏览器中运行这个飞机大战游戏了。

示例说明

下面提供两条示例说明，以帮助大家更好地理解面向对象编程思想在飞机大战游戏中的应用。

示例一：添加新的飞机类型

假设我们需要在游戏中添加新的飞机类型，如直升机。我们可以在Aircraft类中添加一个新的派生类Helicopter，并对其进行扩展：

class Helicopter extends Aircraft {
  constructor(x, y, vx, vy, hp, score) {
    super(x, y, vx, vy, hp, score);
    this.type = 'helicopter';
  }

  render(ctx) {
    ctx.fillStyle = '#0f0';
    ctx.fillRect(this.x - 20, this.y - 20, 40, 40);
  }

  hit() {
    this.hp -= 2;
  }
}

然后，我们可以在GameEngine类中生成新的Helicopter实例，并将其添加到enemies数组中：

class GameEngine {
  // ...

  update() {
    // ...

    if (this.enemies.length < 5) {
      if (Math.random() < 0.5) {
        this.enemies.push(new Aircraft(Math.random() * this.canvas.width, 0, 1, 3, 5, 50));
      } else {
        this.enemies.push(new Helicopter(Math.random() * this.canvas.width, 0, 1, 3, 10, 100));
      }
    }
  }

  // ...
}

这样，我们就可以看到游戏中出现了新的直升机类型的敌机。

示例二：添加子弹连击效果

假设我们需要在游戏中添加子弹连击效果，即当玩家连续击中多个敌机时，每个后续的击中操作都将带有额外的奖励分数。我们可以在Aircraft类中添加一个新的属性lastHitTime，表示每次被击中的时间，然后在GameEngine类中调整击中敌机的逻辑，判断玩家上一次击中的敌机和当前击中的敌机之间是否满足连击条件：

class Aircraft {
  constructor(x, y, vx, vy, hp, score) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.hp = hp;
    this.score = score;
    this.lastHitTime = 0;
  }

  // ...

  hit() {
    const currentTime = Date.now();
    if (currentTime - this.lastHitTime < 1000) {
      this.score += 10; // 连击奖励分数
    }
    this.hp--;
    this.lastHitTime = currentTime;
  }
}

class GameEngine {
  // ...

  update() {
    // ...

    for (let enemy of this.enemies) {
      if (this.player.isHit(enemy)) {
        this.player.hit();
        enemy.hit();

        if (this.lastHitEnemy && this.player.lastHitTime - this.lastHitEnemy.lastHitTime < 1000) {
          // 连击奖励分数
          this.player.score += 10;
        }
        this.lastHitEnemy = enemy;
      }
    }

    // ...
  }

  // ...
}

这样，我们就实现了子弹连击效果，同时在飞机大战游戏中添加了更多的玩法和趣味。