使用Canvas渲染少女心爆棚的猫猫小游戏

前言

在看到官方这次互动宣传图时，我萌生了创作一款类似的超萌小游戏的念头，以表达我对活动的参与和喜爱。而这款“少女心爆棚的猫猫小游戏”就此诞生了。

技术栈

这款小游戏使用了以下技术栈：

• HTML5
• Canvas
• JavaScript

游戏玩法

这是一款休闲益智小游戏，玩法很简单：

1. 屏幕上会随机生成多个不同颜色的猫咪图案。
2. 玩家需要点击或触摸相同颜色的猫咪图案，将它们消除。
3. 当所有猫咪图案都被消除时，游戏通关。

开发步骤

1. 创建画布

<canvas id="myCanvas" width="500" height="500"></canvas>

2. 获取画布上下文

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

3. 定义猫咪图案类

class Cat {
  constructor(x, y, color) {
    this.x = x;
    this.y = y;
    this.color = color;
  }

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

4. 生成猫咪图案

const numCats = 25;
const catColors = ["#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#00FF7F"];

const cats = [];
for (let i = 0; i < numCats; i++) {
  const x = Math.random() * canvas.width;
  const y = Math.random() * canvas.height;
  const color = catColors[Math.floor(Math.random() * catColors.length)];
  cats.push(new Cat(x, y, color));
}

5. 绘制猫咪图案

for (const cat of cats) {
  cat.draw();
}

6. 处理用户交互

canvas.addEventListener("click", (e) => {
  const x = e.clientX - canvas.offsetLeft;
  const y = e.clientY - canvas.offsetTop;

  for (let i = 0; i < cats.length; i++) {
    const cat = cats[i];
    if (
      x >= cat.x - 20 &&
      x <= cat.x + 20 &&
      y >= cat.y - 20 &&
      y <= cat.y + 20
    ) {
      cats.splice(i, 1);
      break;
    }
  }

  if (cats.length === 0) {
    alert("游戏通关！");
  }
});

7. 运行游戏

requestAnimationFrame(gameLoop);

function gameLoop() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制猫咪图案
  for (const cat of cats) {
    cat.draw();
  }

  // 继续游戏循环
  requestAnimationFrame(gameLoop);
}

结语

以上就是这款“少女心爆棚的猫猫小游戏”的开发过程。希望您能够从中有所收获，并将其应用到自己的游戏开发项目中。如果您有任何问题或建议，欢迎随时提出。