抢红包小游戏：Canvas 实现金币收集挑战

这是一款使用 Canvas 开发的简单抢红包小游戏，玩家需要在 20 秒内点击屏幕上的红包，尽可能地收集金币。红包会随机出现，并且每秒钟会消失一个。快来挑战你的手速和反应能力，看看你能收集到多少金币吧！

游戏规则：

屏幕上会出现一些红包，玩家需要通过点击红包来获得里面的金币。
红包每秒钟会消失一个，同时场上最多只能存在 5 个红包。
玩家需要在 20 秒内尽可能地抢到更多的金币。

实现思路：

使用 canvas 绘制游戏界面，包括倒计时、得分、红包等元素。
定义一个红包对象，包括红包的位置、速度、大小等属性，以及一个方法用于绘制红包。
定义一个数组用于存储场上的红包，以及一个定时器用于控制红包的出现和消失。
监听用户的点击事件，判断点击的位置是否在红包的范围内，如果是则将红包从场上移除并增加得分。
在倒计时结束时结束游戏，弹出得分提示。
可以加入音效和特效增加游戏的趣味性。

代码实现（仅供参考）：

<canvas id='canvas' width='500' height='500'></canvas>

<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 定义红包对象
function RedPacket() {
  this.x = Math.random() * (canvas.width - 50);
  this.y = Math.random() * (canvas.height - 50);
  this.vx = Math.random() * 5 + 1;
  this.vy = Math.random() * 5 + 1;
  this.size = 50;
}

// 绘制红包
RedPacket.prototype.draw = function() {
  ctx.fillStyle = 'red';
  ctx.fillRect(this.x, this.y, this.size, this.size);
}

var packets = []; // 存储红包的数组
var score = 0; // 得分
var time = 20; // 倒计时
var timer; // 定时器

// 添加红包
function addPacket() {
  if (packets.length >= 5) {
    return;
  }
  var packet = new RedPacket();
  packets.push(packet);
}

// 移除红包
function removePacket(packet) {
  packets.splice(packets.indexOf(packet), 1);
}

// 绘制游戏界面
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.font = '20px Arial';
  ctx.fillStyle = 'black';
  ctx.fillText('得分：' + score, 10, 30);
  ctx.fillText('倒计时：' + time + '秒', 10, 60);
  // 绘制红包
  for (var i = 0; i < packets.length; i++) {
    packets[i].draw();
  }
}

// 更新红包位置
function update() {
  for (var i = 0; i < packets.length; i++) {
    packets[i].x += packets[i].vx;
    packets[i].y += packets[i].vy;
    // 边界检测
    if (packets[i].x <= 0 || packets[i].x + packets[i].size >= canvas.width) {
      packets[i].vx = -packets[i].vx;
    }
    if (packets[i].y <= 0 || packets[i].y + packets[i].size >= canvas.height) {
      packets[i].vy = -packets[i].vy;
    }
    // 检测是否被点击
    if (canvas.onclick) {
      var x = event.pageX - canvas.offsetLeft;
      var y = event.pageY - canvas.offsetTop;
      if (x >= packets[i].x && x <= packets[i].x + packets[i].size && y >= packets[i].y && y <= packets[i].y + packets[i].size) {
        score += 10;
        removePacket(packets[i]);
      }
    }
  }
}

// 倒计时
function countdown() {
  time--;
  if (time <= 0) {
    clearInterval(timer);
    alert('游戏结束，得分：' + score);
  }
}

// 开始游戏
function startGame() {
  timer = setInterval(function() {
    addPacket();
    draw();
    update();
    countdown();
  }, 1000);
}

startGame();
</script>