JavaScript 实现飞机大战

文章目录

- 一些关键点概览：
- 核心模块的具体实现示例：
- - 飞机类（Plane）的基本结构：
  - 子弹类（Bullet）的基本结构：
  - 敌机类（Enemy）的基本结构：
- 基于前面定义的飞机、子弹和敌机类的一个简化的游戏循环示例：

一些关键点概览：

JavaScript 实现飞机大战是一种常见的前端游戏开发实践，通常会结合HTML5 Canvas或者WebGL等技术来构建一个动态的游戏界面，包含玩家飞机的控制、敌机的生成与移动、子弹发射与碰撞检测、得分系统、游戏结束条件等要素。以下是实现飞机大战游戏的一些关键点概览：

HTML Canvas：
- 使用HTML5 <canvas> 元素作为游戏的画布，通过JavaScript（尤其是Canvas API）来绘制游戏中的所有元素，如飞机、子弹、敌人、爆炸效果、背景等。
游戏实体类：
- 定义飞机类（包括玩家飞机和敌机），封装飞机的位置、速度、生命值、方向等属性，并实现移动、旋转、发射子弹等方法。
动画与定时器：
- 利用window.requestAnimationFrame()来实现游戏循环，确保每一帧都能更新画面和处理游戏逻辑。
- 使用setInterval或setTimeout函数来定期生成敌机或更新背景滚动。
事件监听：
- 添加触摸或鼠标事件监听器，响应玩家的操作，例如滑动屏幕控制飞机移动、点击屏幕发射子弹。
碰撞检测：
- 实现子弹与敌机之间的碰撞检测算法，当检测到碰撞时，减少敌机生命值或消灭敌机，增加玩家分数。
资源管理：
- 加载和管理游戏所需的图片资源（飞机、子弹、背景等），可能使用Image对象或更高级的加载库。
游戏状态管理：
- 设计游戏的不同状态（如运行中、暂停、游戏结束）及其转换逻辑。
音效（可选）：
- 添加游戏音效，比如射击声、爆炸声等，可以使用Web Audio API来实现。

以下是一个基础的JavaScript实现飞机大战的伪代码片段：

// 获取Canvas元素并创建上下文
const canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');

// 初始化游戏状态
let player = new Player();
let enemies = [];
let bullets = [];

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

  // 更新游戏状态
  player.update();
  enemies.forEach(enemy => enemy.update());
  bullets.forEach(bullet => bullet.update());

  // 碰撞检测
  checkCollisions();

  // 绘制所有元素
  drawBackground();
  player.draw(ctx);
  enemies.forEach(enemy => enemy.draw(ctx));
  bullets.forEach(bullet => bullet.draw(ctx));

  // 请求下一帧动画
  requestAnimationFrame(gameLoop);
}

function checkCollisions() {
  // 检查子弹是否击中敌人
  for (let i = 0; i < bullets.length; i++) {
    for (let j = 0; j < enemies.length; j++) {
      if (bullets[i].collidesWith(enemies[j])) {
        // 处理碰撞逻辑
      }
    }
  }
}

// 启动游戏循环
gameLoop();

实际项目中还需要根据需求完善上述逻辑，例如处理边界检查、游戏难度随时间递增、生命系统、得分显示等细节。

核心模块的具体实现示例：

在继续深入实现飞机大战游戏的JavaScript代码之前，让我们补充一些核心模块的具体实现示例：

飞机类（Plane）的基本结构：

class Plane {
  constructor(x, y, speed, imgSrc) {
    this.x = x;
    this.y = y;
    this.speed = speed;
    this.img = new Image();
    this.img.src = imgSrc;
    this.rotation = 0; // 飞机初始角度
  }

  update() {
    // 更新飞机位置或角度等状态
  }

  draw(context) {
    context.save();
    context.translate(this.x, this.y);
    context.rotate(this.rotation * Math.PI / 180); // 将角度转换为弧度
    context.drawImage(this.img, -this.img.width / 2, -this.img.height / 2);
    context.restore();
  }

  move(direction) {
    // 根据direction更新飞机位置
  }

  shoot() {
    // 创建并返回一颗新的子弹对象，添加到子弹数组中
  }
}

// 示例：玩家飞机类（PlayerPlane）继承自Plane
class PlayerPlane extends Plane {
  // ...
}

子弹类（Bullet）的基本结构：

class Bullet {
  constructor(x, y, speed, direction) {
    this.x = x;
    this.y = y;
    this.speed = speed;
    this.direction = direction;
  }

  update() {
    // 根据速度和方向更新子弹位置
    this.y -= this.speed;
    // 如果超出屏幕范围则移除子弹
    if (this.y < 0) {
      bullets.splice(bullets.indexOf(this), 1);
    }
  }

  draw(context) {
    // 绘制子弹
  }

  collidesWith(target) {
    // 检查子弹是否与目标（如敌机）发生碰撞
    // 返回布尔值
  }
}

敌机类（Enemy）的基本结构：

class Enemy extends Plane {
  constructor(x, y, speed, imgSrc) {
    super(x, y, speed, imgSrc);
    // 敌机有自己的行为模式，如随机移动、周期性发射子弹等
  }

  update() {
    super.update();
    // 更新敌机位置及行为
  }

  shoot() {
    // 敌机发射子弹逻辑
  }
}

// 示例：批量生成敌机
function spawnEnemies(count) {
  for (let i = 0; i < count; i++) {
    let enemy = new Enemy(/* 初始化参数 */);
    enemies.push(enemy);
  }
}

// 在游戏循环中定期生成敌机
setInterval(() => spawnEnemies(1), 2000); // 每隔2秒生成一架敌机

最后，在整个游戏中，需要整合这些组件，通过requestAnimationFrame驱动游戏循环，并实现具体的碰撞检测逻辑，以及得分系统、游戏结束判定等功能。同时，为了提高用户体验，还可以加入背景音乐、游戏暂停/恢复功能、游戏关卡设计等更多复杂特性。

基于前面定义的飞机、子弹和敌机类的一个简化的游戏循环示例：

在实际的游戏循环中，我们需要一个主循环函数来持续地更新游戏状态、处理用户输入、绘制场景以及检查碰撞。以下是基于前面定义的飞机、子弹和敌机类的一个简化的游戏循环示例：

// 假设已有一个全局的canvas元素和其对应的2D渲染上下文context
const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');

// 初始化玩家飞机
let player = new PlayerPlane(canvas.width / 2, canvas.height - 50, 5, 'player_plane.png');

// 子弹数组
let bullets = [];
// 敌机数组
let enemies = [];

// 游戏主循环
function gameLoop() {
  // 清除画布
  context.clearRect(0, 0, canvas.width, canvas.height);

  // 更新游戏状态
  player.update();
  
  // 处理子弹更新
  bullets.forEach((bullet, index) => {
    bullet.update();
    bullet.draw(context);
    enemies.forEach(enemy => {
      if (bullet.collidesWith(enemy)) {
        // 碰撞处理，例如消灭敌机、删除子弹等
        enemy.die();
        bullets.splice(index, 1);
        score++; // 增加分数
      }
    });
  });

  // 更新并绘制所有敌机
  enemies.forEach(enemy => {
    enemy.update();
    enemy.draw(context);
    // 检查敌机是否发射子弹
    enemy.shoot();
  });

  // 处理玩家射击
  if (isSpaceKeyDown) { // 假设 space 键被按下时代表开火
    let newBullet = player.shoot();
    if (newBullet) {
      bullets.push(newBullet);
    }
  }

  // 检查游戏状态，比如是否有敌机到达底部，或者玩家飞机是否被击中等
  
  // 请求下一帧动画
  requestAnimationFrame(gameLoop);
}

// 开始游戏
function startGame() {
  isSpaceKeyDown = false; // 初始化按键状态
  score = 0; // 初始化分数
  enemies = []; // 重置敌机列表
  gameLoop(); // 启动游戏循环
}

// 添加键盘监听事件，以便玩家可以控制飞机和射击
document.addEventListener('keydown', (event) => {
  if (event.key === ' ') {
    isSpaceKeyDown = true;
  }
});

document.addEventListener('keyup', (event) => {
  if (event.key === ' ') {
    isSpaceKeyDown = false;
  }
});

// 调用startGame开始游戏
startGame();