用vue实现飞机大战

实现思路

使用Vue.js实现飞机大战游戏，需要结合Canvas绘制游戏元素，并处理用户交互、碰撞检测和游戏逻辑。以下是关键步骤和代码示例。

初始化Vue项目

创建一个Vue项目，并添加Canvas元素作为游戏画布。

<template>
  <div class="game-container">
    <canvas ref="gameCanvas" width="400" height="600"></canvas>
  </div>
</template>

<script>
export default {
  name: 'PlaneGame',
  mounted() {
    this.initGame();
  },
  methods: {
    initGame() {
      const canvas = this.$refs.gameCanvas;
      this.ctx = canvas.getContext('2d');
      this.gameLoop();
    },
    gameLoop() {
      // 游戏主循环
    }
  }
}
</script>

<style>
.game-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
canvas {
  border: 1px solid #000;
}
</style>

绘制游戏元素

定义飞机、敌机和子弹的类，并在Canvas上绘制。

class Player {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.width = 50;
    this.height = 50;
    this.speed = 5;
  }

  draw(ctx) {
    ctx.fillStyle = 'blue';
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }

  move(direction) {
    // 根据方向移动飞机
  }
}

class Enemy {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.width = 40;
    this.height = 40;
    this.speed = 2;
  }

  draw(ctx) {
    ctx.fillStyle = 'red';
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }

  update() {
    this.y += this.speed;
  }
}

class Bullet {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.width = 5;
    this.height = 15;
    this.speed = 7;
  }

  draw(ctx) {
    ctx.fillStyle = 'green';
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }

  update() {
    this.y -= this.speed;
  }
}

处理用户输入

监听键盘事件，控制飞机移动和发射子弹。

mounted() {
  this.initGame();
  window.addEventListener('keydown', this.handleKeyDown);
  window.addEventListener('keyup', this.handleKeyUp);
},
methods: {
  handleKeyDown(e) {
    if (e.key === 'ArrowLeft') this.player.move('left');
    if (e.key === 'ArrowRight') this.player.move('right');
    if (e.key === 'ArrowUp') this.player.move('up');
    if (e.key === 'ArrowDown') this.player.move('down');
    if (e.key === ' ') this.fireBullet();
  },
  fireBullet() {
    const bullet = new Bullet(
      this.player.x + this.player.width / 2 - 2.5,
      this.player.y
    );
    this.bullets.push(bullet);
  }
}

游戏主循环

实现游戏主循环，更新游戏状态并重绘Canvas。

gameLoop() {
  this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);

  this.player.draw(this.ctx);

  this.enemies.forEach(enemy => {
    enemy.update();
    enemy.draw(this.ctx);
  });

  this.bullets.forEach(bullet => {
    bullet.update();
    bullet.draw(this.ctx);
  });

  this.checkCollisions();
  this.spawnEnemies();

  requestAnimationFrame(this.gameLoop);
}

碰撞检测

检测子弹与敌机、敌机与玩家的碰撞。

checkCollisions() {
  // 子弹与敌机碰撞
  this.bullets = this.bullets.filter(bullet => {
    const hitEnemyIndex = this.enemies.findIndex(enemy => {
      return (
        bullet.x < enemy.x + enemy.width &&
        bullet.x + bullet.width > enemy.x &&
        bullet.y < enemy.y + enemy.height &&
        bullet.y + bullet.height > enemy.y
      );
    });

    if (hitEnemyIndex !== -1) {
      this.enemies.splice(hitEnemyIndex, 1);
      return false;
    }
    return bullet.y > 0;
  });

  // 敌机与玩家碰撞
  this.enemies.forEach(enemy => {
    if (
      this.player.x < enemy.x + enemy.width &&
      this.player.x + this.player.width > enemy.x &&
      this.player.y < enemy.y + enemy.height &&
      this.player.y + this.player.height > enemy.y
    ) {
      // 游戏结束逻辑
    }
  });
}

敌机生成

定时生成敌机，增加游戏难度。

spawnEnemies() {
  if (Math.random() < 0.02) {
    const x = Math.random() * (this.ctx.canvas.width - 40);
    const enemy = new Enemy(x, -40);
    this.enemies.push(enemy);
  }
}

游戏状态管理

添加分数、生命值和游戏结束逻辑。

data() {
  return {
    ctx: null,
    player: new Player(175, 500),
    enemies: [],
    bullets: [],
    score: 0,
    lives: 3,
    gameOver: false
  }
}

完整实现

将以上代码整合，实现完整的飞机大战游戏。可以通过添加音效、更多敌机类型和关卡设计来增强游戏体验。