基于JavaScript的几何图形识别游戏开发问题咨询

嘿，我懂你现在的需求——把之前的JS简易测验脚本改成几何图形匹配的图像识别游戏，还要加上错误次数统计，而且错到一定次数就不让继续了对吧？我给你整理了具体的改造步骤和代码示例，直接就能复用：

原来的测验数据是文字题，现在要改成包含主图、选项图和正确选项索引的结构，这样方便后续渲染和判断：

// 定义游戏题目数据，你可以根据自己的图片路径修改
const shapeMatchGameData = [
  {
    mainShape: 'images/main-square.png',
    options: [
      'images/rectangle.png',
      'images/square.png',
      'images/circle.png',
      'images/triangle.png'
    ],
    correctOptionIndex: 1 // 对应options数组里的正确选项位置
  },
  {
    mainShape: 'images/main-circle.png',
    options: [
      'images/oval.png',
      'images/triangle.png',
      'images/circle.png',
      'images/star.png'
    ],
    correctOptionIndex: 2
  },
  // 可以继续添加更多题目
];

在脚本里声明作用域内的变量，用来记录错误次数和设置允许的最大错误上限：

let errorCount = 0;
const MAX_ALLOWED_ERRORS = 3; // 你可以根据需求调整这个数值
let currentQuestionIndex = 0; // 记录当前正在展示的题目索引

把原来渲染文字题的逻辑改成渲染图片，包括主图和下方的选项图：

function renderCurrentQuestion() {
  // 渲染主几何图形
  const mainShapeElement = document.getElementById('main-shape');
  mainShapeElement.src = shapeMatchGameData[currentQuestionIndex].mainShape;
  mainShapeElement.alt = 'Main geometric shape to match';

  // 渲染选项图形
  const optionsContainer = document.getElementById('options-container');
  optionsContainer.innerHTML = ''; // 清空之前的选项

  shapeMatchGameData[currentQuestionIndex].options.forEach((optionPath, index) => {
    const optionImage = document.createElement('img');
    optionImage.src = optionPath;
    optionImage.alt = `Option ${index + 1}`;
    optionImage.classList.add('shape-option');
    optionImage.dataset.index = index; // 存储选项索引，方便点击时判断
    optionImage.addEventListener('click', handleOptionClick);
    optionsContainer.appendChild(optionImage);
  });
}

这部分是重点，要判断用户选的是不是正确选项，统计错误次数，达到上限后禁用所有选项：

function handleOptionClick(e) {
  const selectedIndex = parseInt(e.target.dataset.index);
  const currentQuestion = shapeMatchGameData[currentQuestionIndex];

  if (selectedIndex === currentQuestion.correctOptionIndex) {
    // 答对的情况：提示用户，然后切换到下一题（如果还有的话）
    alert('答对啦！👍');
    if (currentQuestionIndex < shapeMatchGameData.length - 1) {
      currentQuestionIndex++;
      renderCurrentQuestion();
    } else {
      alert('恭喜你完成所有题目！🎉');
      // 这里可以添加游戏完成后的逻辑，比如重置游戏
    }
  } else {
    // 答错的情况：统计错误次数，判断是否达到上限
    errorCount++;
    alert(`答错了😥！错误次数：${errorCount}/${MAX_ALLOWED_ERRORS}`);
    
    if (errorCount >= MAX_ALLOWED_ERRORS) {
      // 达到最大错误次数，禁用所有选项，禁止继续答题
      const allOptions = document.querySelectorAll('.shape-option');
      allOptions.forEach(option => {
        option.removeEventListener('click', handleOptionClick);
        option.style.opacity = '0.5';
        option.style.pointerEvents = 'none'; // 禁止点击
      });
      alert(`游戏结束！你已经答错${MAX_ALLOWED_ERRORS}次了`);
      // 可以添加一个重新开始按钮，方便用户再来一次
    }
  }
}

你需要在HTML里准备好容器，让JS可以动态插入图片：

<div class="game-container">
  <h2>几何图形匹配游戏</h2>
  <div class="main-shape-container">
    <img id="main-shape" width="150" height="150" alt="Main shape">
  </div>
  <div id="options-container" class="options-grid">
    <!-- 选项图片会在这里动态生成 -->
  </div>
  <button id="reset-game" style="margin-top: 2rem;">重新开始游戏</button>
</div>

给选项加一点基础样式，让界面更友好：

.options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.shape-option {
  width: 120px;
  height: 120px;
  cursor: pointer;
  border: 2px solid #ddd;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.shape-option:hover {
  border-color: #555;
  transform: scale(1.05);
}

最后加上初始化逻辑，页面加载时启动游戏，绑定重置按钮的事件：

function initGame() {
  errorCount = 0;
  currentQuestionIndex = 0;
  renderCurrentQuestion();
  
  // 重置按钮逻辑
  const resetBtn = document.getElementById('reset-game');
  resetBtn.addEventListener('click', initGame);
}

// 页面加载完成后启动游戏
document.addEventListener('DOMContentLoaded', initGame);

这样改造下来，你的脚本就能完美适配图像识别游戏的需求，既统计错误次数，又能在达到上限后禁止继续答题啦！

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