用vue实现飞机大战

Vue 实现飞机大战游戏

项目初始化

使用 Vue CLI 创建一个新项目，安装必要的依赖。确保项目结构清晰，组件划分合理。

vue create plane-game
cd plane-game
npm install

游戏主界面设计

在 App.vue 中设计游戏主界面，包括背景、玩家飞机、敌机、子弹等元素。使用 CSS 进行样式布局，确保游戏界面美观且响应式。

<template>
  <div class="game-container">
    <div class="player" :style="playerStyle"></div>
    <div 
      v-for="(enemy, index) in enemies" 
      :key="index" 
      class="enemy" 
      :style="enemyStyle(enemy)"
    ></div>
    <div 
      v-for="(bullet, index) in bullets" 
      :key="'bullet-' + index" 
      class="bullet" 
      :style="bulletStyle(bullet)"
    ></div>
  </div>
</template>

玩家控制逻辑

监听键盘事件，实现玩家飞机的移动控制。通常使用方向键或 WASD 控制飞机移动。

mounted() {
  window.addEventListener('keydown', this.handleKeyDown);
  window.addEventListener('keyup', this.handleKeyUp);
},
methods: {
  handleKeyDown(e) {
    if (e.key === 'ArrowLeft') this.moveLeft = true;
    if (e.key === 'ArrowRight') this.moveRight = true;
    if (e.key === 'ArrowUp') this.moveUp = true;
    if (e.key === 'ArrowDown') this.moveDown = true;
    if (e.key === ' ') this.fireBullet();
  },
  handleKeyUp(e) {
    if (e.key === 'ArrowLeft') this.moveLeft = false;
    if (e.key === 'ArrowRight') this.moveRight = false;
    if (e.key === 'ArrowUp') this.moveUp = false;
    if (e.key === 'ArrowDown') this.moveDown = false;
  }
}

敌机生成与移动

使用定时器生成敌机，并控制敌机的移动逻辑。敌机通常从屏幕顶部随机位置生成，向下移动。

data() {
  return {
    enemies: [],
    enemyInterval: null
  };
},
created() {
  this.enemyInterval = setInterval(this.generateEnemy, 1000);
},
methods: {
  generateEnemy() {
    const enemy = {
      x: Math.random() * (window.innerWidth - 50),
      y: -50,
      speed: 2 + Math.random() * 3
    };
    this.enemies.push(enemy);
  },
  moveEnemies() {
    this.enemies = this.enemies.filter(enemy => {
      enemy.y += enemy.speed;
      return enemy.y < window.innerHeight;
    });
  }
}

子弹发射与碰撞检测

实现子弹发射逻辑，并检测子弹与敌机的碰撞。碰撞后敌机和子弹应消失，并增加分数。

data() {
  return {
    bullets: [],
    score: 0
  };
},
methods: {
  fireBullet() {
    const bullet = {
      x: this.player.x + 20,
      y: this.player.y,
      speed: 5
    };
    this.bullets.push(bullet);
  },
  moveBullets() {
    this.bullets = this.bullets.filter(bullet => {
      bullet.y -= bullet.speed;
      return bullet.y > 0;
    });
  },
  checkCollisions() {
    this.enemies = this.enemies.filter(enemy => {
      const hit = this.bullets.some(bullet => {
        return (
          bullet.x < enemy.x + 50 &&
          bullet.x + 10 > enemy.x &&
          bullet.y < enemy.y + 50 &&
          bullet.y + 20 > enemy.y
        );
      });
      if (hit) this.score += 10;
      return !hit;
    });
  }
}

游戏循环与性能优化

使用 requestAnimationFrame 实现游戏主循环，确保游戏流畅运行。定期清理无用对象，避免内存泄漏。

gameLoop() {
  if (this.gameOver) return;

  this.movePlayer();
  this.moveEnemies();
  this.moveBullets();
  this.checkCollisions();

  requestAnimationFrame(this.gameLoop);
}

游戏状态管理

实现游戏开始、暂停、结束等状态管理。显示分数、生命值等游戏信息。

<template>
  <div>
    <div v-if="!gameStarted" class="start-screen">
      <button @click="startGame">Start Game</button>
    </div>
    <div v-else>
      <div class="score">Score: {{ score }}</div>
      <div class="lives">Lives: {{ lives }}</div>
    </div>
  </div>
</template>

音效与特效

添加爆炸音效、子弹发射音效等增强游戏体验。使用 CSS 动画实现爆炸效果。

playSound(type) {
  const audio = new Audio(`/sounds/${type}.mp3`);
  audio.play();
}

响应式设计

确保游戏在不同设备上都能正常显示和操作。使用媒体查询调整游戏元素大小和位置。

@media (max-width: 768px) {
  .player {
    width: 30px;
    height: 30px;
  }
}

部署与发布

使用 npm run build 生成生产环境代码，部署到静态网站托管服务如 Netlify 或 Vercel。

npm run build

通过以上步骤，可以完整实现一个基于 Vue 的飞机大战游戏。根据需求进一步优化游戏逻辑、添加更多功能如关卡设计、道具系统等。