HTML5 Canvas盒子匹配游戏：随机数比对与胜负判定实现咨询

嘿，我来帮你梳理这个匹配游戏的核心逻辑！其实关键就是跟踪已翻开的盒子，并在凑够两个时对比它们的数字，下面是一步步的实现思路和代码示例：

1. 先优化你的盒子数据结构 #

原来的盒子只有位置尺寸，得加上「是否已翻开」「当前数字」这两个关键属性，方便后续跟踪状态：

// 用数组管理所有盒子，后续操作更便捷
const boxes = [
  { x: 30, y: 150, width: 100, height: 100, isFlipped: false, number: null },
  { x: 150, y: 150, width: 100, height: 100, isFlipped: false, number: null },
  // 继续添加其他盒子...
];

2. 跟踪已翻开的盒子和游戏状态 #

加两个变量用来记录当前状态，避免玩家快速点击导致逻辑混乱：

let flippedBoxes = []; // 最多存2个已翻开的盒子
let isProcessing = false; // 标记是否在处理匹配结果，防止重复点击

3. 核心点击事件处理逻辑 #

给Canvas绑定点击事件，判断点击位置是否命中未翻开的盒子，生成随机数后做比对：

const canvas = document.getElementById('your-canvas-id');
canvas.addEventListener('click', function(e) {
  // 正在处理匹配时，直接忽略新的点击
  if (isProcessing) return;

  // 把浏览器点击坐标转换成Canvas内部的相对坐标
  const canvasRect = canvas.getBoundingClientRect();
  const clickX = e.clientX - canvasRect.left;
  const clickY = e.clientY - canvasRect.top;

  // 找到被点击的未翻开盒子
  const clickedBox = boxes.find(box => {
    return clickX >= box.x && clickX <= box.x + box.width &&
           clickY >= box.y && clickY <= box.y + box.height &&
           !box.isFlipped;
  });

  // 没点中有效盒子，直接结束
  if (!clickedBox) return;

  // 生成指定范围的随机数（这里示例是1-5，你可以自己调整）
  clickedBox.number = Math.floor(Math.random() * 5) + 1;
  clickedBox.isFlipped = true;
  flippedBoxes.push(clickedBox);

  // 调用你的绘制函数，更新这个盒子的显示（比如画出数字）
  drawBox(clickedBox);

  // 凑够2个已翻开盒子时，开始比对
  if (flippedBoxes.length === 2) {
    isProcessing = true;
    const [firstBox, secondBox] = flippedBoxes;

    if (firstBox.number === secondBox.number) {
      // 匹配成功！触发获胜逻辑
      alert('匹配成功，你赢啦！');
      // 这里可以重置游戏，或者开启下一轮
      resetGame();
    } else {
      // 匹配失败，延迟1秒后翻回盒子（给玩家时间记数字）
      setTimeout(() => {
        firstBox.isFlipped = false;
        secondBox.isFlipped = false;
        flippedBoxes = [];
        isProcessing = false;
        // 重新绘制所有盒子，恢复未翻开状态
        redrawAllBoxes();
      }, 1000);
    }
  }
});

4. 补充辅助函数示例 #

你需要自己实现几个基础辅助函数，比如：

• drawBox(box)：根据盒子的isFlipped状态，绘制未翻开的样式或显示数字
• redrawAllBoxes()：清空Canvas后，重新绘制所有盒子
• resetGame()：重置所有盒子状态，清空已翻开列表，准备新游戏

小提示 #

• 可以给匹配成功的盒子加特殊样式（比如变绿色），让玩家更直观看到结果
• 如果是多组匹配的游戏（比如8个盒子4组数字），可以加计数器，判断所有盒子匹配成功才算最终胜利

内容的提问来源于stack exchange，提问作者smythdev