ES6让你的手写辨色小游戏，一展身手！

前端

2023-10-07 11:30:07

前言
犹记几年前，辨色小游戏在朋友圈风靡一时，挑战者们需在限定时间内，找到与其他矩形颜色不同的那个。近日，突发奇想，决定亲自手写一款类似的游戏，话不多说，先奉上Demo。

项目源码

此游戏基于ES6实现，兼容IE9及以上版本。

项目结构

该项目主要以js实现游戏功能，在html和css中，以下文件值得注意：

index.html：主HTML文件，包含游戏的整体结构和逻辑。
style.css：样式表，定义了游戏元素的外观。
script.js：包含了游戏的主要逻辑和功能。

游戏实现

1. 准备工作

首先，我们需要一个画布来显示游戏元素，因此我们在HTML中加入如下代码：

<canvas id="canvas" width="600" height="400"></canvas>

接着，我们用js获取这个画布元素并获取其上下文：

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

2. 创建矩形数组

接下来，我们定义一个数组来存储矩形的对象，每个对象包含矩形的颜色、位置和尺寸。

const rects = [];

for (let i = 0; i < 25; i++) {
  const rect = {
    color: randomColor(),
    x: Math.random() * (canvas.width - 100) + 50,
    y: Math.random() * (canvas.height - 100) + 50,
    width: 100,
    height: 100,
  };

  rects.push(rect);
}

其中，randomColor()函数用于生成随机颜色。

3. 绘制矩形

现在，我们利用fillRect()方法，在画布上绘制矩形：

for (const rect of rects) {
  ctx.fillStyle = rect.color;
  ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
}

4. 随机改变一个矩形颜色

为了增加游戏趣味性，我们需要随机改变某个矩形颜色，为此，我们用setInterval()函数每隔一段时间执行一次以下代码：

setInterval(() => {
  const randomRectIndex = Math.floor(Math.random() * rects.length);
  rects[randomRectIndex].color = randomColor();
}, 1000);

5. 捕捉点击事件

当用户点击画布时，我们要检查他们是否点击到了与其他矩形颜色不同的矩形，如果是，则显示“成功”字样，否则显示“失败”字样。

canvas.addEventListener("click", (event) => {
  const clickX = event.clientX - canvas.offsetLeft;
  const clickY = event.clientY - canvas.offsetTop;

  for (const rect of rects) {
    if (
      clickX >= rect.x &&
      clickX <= rect.x + rect.width &&
      clickY >= rect.y &&
      clickY <= rect.y + rect.height
    ) {
      if (rect.color !== targetColor) {
        alert("失败!");
      } else {
        alert("成功!");
      }

      break;
    }
  }
});

6. 游戏结束判断

为了让游戏更具挑战性，我们设置了时间限制，当时间耗尽时，游戏结束，此时会显示最终得分。

const timer = 60;
let remainingTime = timer;

setInterval(() => {
  remainingTime--;

  if (remainingTime <= 0) {
    clearInterval(intervalId);

    alert(`游戏结束，你的得分是：${score}`);
  }
}, 1000);