基于vue2写一个火柴人大战的游戏代码

以下是一个简单的火柴人大战游戏的代码示例，使用Vue2编写：

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

<script>
export default {
  data() {
    return {
      canvas: null,
      ctx: null,
      player1: null,
      player2: null,
      projectiles: [],
      running: false,
      intervalId: null
    };
  },
  mounted() {
    this.canvas = this.$refs.canvas;
    this.ctx = this.canvas.getContext("2d");
    this.player1 = new Player(50, 200, 30, 70, "red", "left", this.canvas);
    this.player2 = new Player(720, 200, 30, 70, "blue", "right", this.canvas);
    this.draw();
  },
  methods: {
    draw() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.player1.draw();
      this.player2.draw();
      this.projectiles.forEach((projectile, index) => {
        projectile.draw();
        if (projectile.x < 0 || projectile.x > this.canvas.width) {
          this.projectiles.splice(index, 1);
        } else {
          projectile.update();
          if (projectile.checkCollision(this.player1)) {
            this.player1.health -= 10;
            this.projectiles.splice(index, 1);
          } else if (projectile.checkCollision(this.player2)) {
            this.player2.health -= 10;
            this.projectiles.splice(index, 1);
          }
        }
      });
      if (this.player1.health <= 0 || this.player2.health <= 0) {
        this.running = false;
        clearInterval(this.intervalId);
        this.ctx.font = "bold 40px Arial";
        this.ctx.fillStyle = "white";
        this.ctx.fillText("Game Over!", 300, 200);
      }
      if (this.running) {
        requestAnimationFrame(this.draw);
      }
    },
    startGame() {
      this.running = true;
      this.intervalId = setInterval(() => {
        this.projectiles.push(new Projectile(this.player1, this.player2, this.canvas));
        this.projectiles.push(new Projectile(this.player2, this.player1, this.canvas));
      }, 1000);
      this.draw();
    }
  }
};

class Player {
  constructor(x, y, width, height, color, direction, canvas) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.color = color;
    this.direction = direction;
    this.canvas = canvas;
    this.health = 100;
  }
  draw() {
    this.canvas.getContext("2d").fillStyle = this.color;
    this.canvas.getContext("2d").fillRect(this.x, this.y, this.width, this.height);
    this.canvas.getContext("2d").fillStyle = "white";
    this.canvas.getContext("2d").font = "bold 20px Arial";
    this.canvas.getContext("2d").fillText(`Health: ${this.health}`, this.x, this.y - 10);
  }
}

class Projectile {
  constructor(shooter, target, canvas) {
    this.x = shooter.x + shooter.width / 2;
    this.y = shooter.y + shooter.height / 2;
    this.radius = 5;
    this.color = shooter.color;
    this.velocity = {
      x: target.x + target.width / 2 - this.x,
      y: target.y + target.height / 2 - this.y
    };
    const magnitude = Math.sqrt(this.velocity.x ** 2 + this.velocity.y ** 2);
    this.velocity.x /= magnitude;
    this.velocity.y /= magnitude;
    this.velocity.x *= 5;
    this.velocity.y *= 5;
    this.canvas = canvas;
  }
  draw() {
    this.canvas.getContext("2d").beginPath();
    this.canvas.getContext("2d").fillStyle = this.color;
    this.canvas.getContext("2d").arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    this.canvas.getContext("2d").fill();
  }
  update() {
    this.x += this.velocity.x;
    this.y += this.velocity.y;
  }
  checkCollision(player) {
    const distance = Math.sqrt((player.x - this.x) ** 2 + (player.y - this.y) ** 2);
    return distance < player.width / 2 + this.radius;
  }
}
</script>

<style>
.game-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: black;
}
</style>

这个游戏有两个玩家，一个红色一个蓝色，分别在左侧和右侧。玩家可以发射火球，相互攻击。最后剩余生命值为0的玩家输掉游戏。玩家的生命值显示在他们的头顶上。您可以尝试在此基础上添加更多功能和改进。