无需APP，随时随地玩转“捉蝴蝶”！用JS打造休闲时刻，享受解压时光

在快节奏的现代生活中，休闲小游戏无疑是放松身心的绝佳选择。而当这款游戏融入趣味十足的兴趣涂鸦元素时，又会碰撞出怎样的火花呢？今天，我将带领大家亲手用JavaScript打造一款“捉蝴蝶”小游戏，带你领略兴趣涂鸦的魅力，在轻松愉快的游戏中释放压力，享受片刻的解压时光。

这款游戏操作简单，规则清晰，玩家只需用鼠标控制小狗在花园中追逐蝴蝶，点击蝴蝶即可得分。虽然规则简单，但游戏中却暗藏着许多有趣的小细节，等待玩家去探索和发现。

首先，在进入游戏前，玩家可以选择自己喜欢的狗狗形象，包括呆萌可爱的柴犬、优雅灵动的柯基、威风凛凛的哈士奇等等。不同的狗狗不仅外形各异，而且拥有不同的特殊技能，比如柴犬擅长快速奔跑，柯基擅长跳跃，哈士奇擅长追踪。玩家可以选择自己喜欢的狗狗，为游戏增添更多趣味。

进入游戏后，玩家将置身于一个充满生机的花园中，五颜六色的花朵竞相开放，绿意盎然的草坪随风摇曳，还有形态各异的蝴蝶在花丛中翩翩起舞。玩家需要操控小狗在花园中奔跑追逐蝴蝶，点击蝴蝶即可得分。

随着游戏的进行，蝴蝶的种类和数量会不断增加，难度也会逐渐提升。玩家需要不断提高自己的反应速度和手眼协调能力，才能在游戏中取得高分。

值得一提的是，这款游戏还加入了“兴趣涂鸦”的元素，玩家可以随时暂停游戏，用鼠标在花园中任意涂鸦，尽情发挥自己的想象力。涂鸦完成后，玩家还可以选择将涂鸦保存下来，与朋友分享自己的创意。

不过，这款小游戏也存在一些需要改进的地方，比如偶尔会出现小狗穿模的bug，还有就是游戏背景音乐稍显单调。这些问题我会在后续的版本中逐步优化，为大家带来更加完善的游戏体验。

总的来说，这款“捉蝴蝶”小游戏是一款操作简单、趣味十足的休闲小游戏，非常适合在闲暇时间放松身心。它不仅可以锻炼玩家的反应速度和手眼协调能力，还能激发玩家的想象力和创造力。欢迎大家亲自体验这款小游戏，在轻松愉快的游戏中享受片刻的解压时光！

最后，附上这款小游戏的代码，供大家参考学习：

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

// 2. 定义小狗和蝴蝶的类
class Dog {
  constructor(x, y, color) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.speed = 5;
  }

  // 3. 定义小狗的绘制和移动方法
  draw() {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, 30, 30);
  }

  move(direction) {
    switch (direction) {
      case 'up':
        this.y -= this.speed;
        break;
      case 'down':
        this.y += this.speed;
        break;
      case 'left':
        this.x -= this.speed;
        break;
      case 'right':
        this.x += this.speed;
        break;
    }
  }
}

class Butterfly {
  constructor(x, y, color) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.speed = 2;
  }

  // 4. 定义蝴蝶的绘制和移动方法
  draw() {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, 20, 20);
    ctx.fillRect(this.x + 10, this.y + 10, 20, 20);
  }

  move() {
    this.x += this.speed * (Math.random() - 0.5);
    this.y += this.speed * (Math.random() - 0.5);
  }
}

// 5. 初始化小狗和蝴蝶
const dog = new Dog(50, 50, 'red');
const butterflies = [];
for (let i = 0; i < 10; i++) {
  const butterfly = new Butterfly(Math.random() * canvas.width, Math.random() * canvas.height, 'blue');
  butterflies.push(butterfly);
}

// 6. 定义游戏主循环
function gameLoop() {
  // 7. 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 8. 绘制小狗和蝴蝶
  dog.draw();
  butterflies.forEach((butterfly) => butterfly.draw());

  // 9. 更新小狗和蝴蝶的位置
  dog.move();
  butterflies.forEach((butterfly) => butterfly.move());

  // 10. 检查小狗是否与蝴蝶碰撞
  butterflies.forEach((butterfly) => {
    if (dog.x < butterfly.x + 20 && dog.x + 30 > butterfly.x && dog.y < butterfly.y + 20 && dog.y + 30 > butterfly.y) {
      // 11. 如果碰撞，删除蝴蝶
      butterflies.splice(butterflies.indexOf(butterfly), 1);
    }
  });

  // 12. 循环调用游戏主循环
  requestAnimationFrame(gameLoop);
}

// 13. 添加键盘事件监听器
document.addEventListener('keydown', (event) => {
  switch (event.key) {
    case 'ArrowUp':
      dog.move('up');
      break;
    case 'ArrowDown':
      dog.move('down');
      break;
    case 'ArrowLeft':
      dog.move('left');
      break;
    case 'ArrowRight':
      dog.move('right');
      break;
  }
});

// 14. 启动游戏主循环
gameLoop();

希望这篇文章能够激发你的灵感，让你也能用JavaScript创造出更多有趣的小游戏。如果你有什么好的想法或建议，欢迎随时与我交流。