用canvas创建趣味月饼点击游戏，动动手指就能捡月饼

前端

2024-01-01 05:20:26

趣味十足的“打月饼”游戏：尽情享受收集月饼的乐趣！

各位游戏爱好者，准备好体验一款简单却令人着迷的休闲游戏了吗？欢迎来到“打月饼”的世界，在这里，您将化身一名敏捷的月饼收集者，用您的速度和技巧捕捉那些美味诱人的月饼。准备好迎接一场刺激的冒险了吗？那就让我们深入了解这款游戏的精彩内容吧！

游戏目标：收集月饼，避免错过

在这个快节奏的游戏中，您的首要目标是收集尽可能多的月饼。这些月饼以其金黄的外皮和誘人的香气而闻名，将不断从屏幕顶部落下。您的任务是使用鼠标或键盘点击或按相应的键，来收集这些月饼。

不过，请注意屏幕底部不断移动的“扣分线”。如果您错过了一个月饼，它将落入扣分线并扣除您的分数。因此，时刻保持警惕，不要让任何月饼溜走！

控制您的玩家，提升得分

您将扮演一位身手敏捷的玩家，可以使用鼠标或键盘按键左右移动。您的目标是捕捉尽可能多的月饼，同时避免它们落入扣分线。每收集到一个月饼，您的分数就会增加。

要控制您的玩家，只需使用鼠标或键盘上的左右箭头键即可。如果您使用鼠标，只需点击屏幕上相应的区域即可移动您的玩家。

游戏进程：挑战难度不断升级

随着游戏的进行，月饼下落的速度会逐渐加快，扣分线的移动也会变得更加频繁和不可预测。这意味着您需要不断提高反应能力和手眼协调能力，才能收集到更多的月饼并获得更高的分数。

结束条件：生命值耗尽或时间耗尽

这款游戏有两种结束条件：一是生命值耗尽，二是时间耗尽。如果您错过太多月饼，您的生命值就会耗尽，游戏结束。同样，如果您未能及时收集到足够的月饼，时间耗尽后游戏也会结束。

代码示例：用 JavaScript 实现“打月饼”游戏

如果您对这款游戏的实现细节感兴趣，这里提供了一个简化的 JavaScript 代码示例，展示了如何创建基本的“打月饼”游戏：

// 创建画布和上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 创建月饼类
class Mooncake {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.radius = 20;
    this.color = 'yellow';
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    ctx.fillStyle = this.color;
    ctx.fill();
  }
}

// 创建玩家类
class Player {
  constructor() {
    this.x = canvas.width / 2;
    this.y = canvas.height - 50;
    this.width = 50;
    this.height = 50;
    this.color = 'blue';
  }

  draw() {
    ctx.beginPath();
    ctx.rect(this.x, this.y, this.width, this.height);
    ctx.fillStyle = this.color;
    ctx.fill();
  }
}

// 创建游戏类
class Game {
  constructor() {
    this.mooncakes = [];
    this.player = new Player();
    this.score = 0;
    this.lives = 3;
  }

  start() {
    this.intervalId = setInterval(() => {
      this.update();
      this.draw();
    }, 1000 / 60);
  }

  update() {
    this.moveMooncakes();
    this.checkCollisions();
  }

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

    this.mooncakes.forEach((mooncake) => {
      mooncake.draw();
    });

    this.player.draw();

    ctx.font = '30px Arial';
    ctx.fillStyle = 'black';
    ctx.fillText(`Score: ${this.score}`, 10, 30);
    ctx.fillText(`Lives: ${this.lives}`, 10, 60);
  }

  moveMooncakes() {
    this.mooncakes.forEach((mooncake) => {
      mooncake.y += 2;

      if (mooncake.y > canvas.height) {
        this.mooncakes.splice(this.mooncakes.indexOf(mooncake), 1);
      }
    });
  }

  checkCollisions() {
    this.mooncakes.forEach((mooncake) => {
      if (this.player.x < mooncake.x + mooncake.radius &&
          this.player.x + this.player.width > mooncake.x - mooncake.radius &&
          this.player.y < mooncake.y + mooncake.radius &&
          this.player.y + this.player.height > mooncake.y - mooncake.radius) {
        this.score++;
        this.mooncakes.splice(this.mooncakes.indexOf(mooncake), 1);
      }
    });
  }
}

// 启动游戏
const game = new Game();
game.start();