Hangman游戏开发求助：输入与答案不匹配时绿色矩形未变红

看起来你的核心问题出在错误判断时的矩形操作逻辑上——每次不管哪个输入框答错，你都只修改同一个矩形（坐标10,30的那个）的颜色，而且没有在每次计算前重置矩形的初始绿色状态，这就导致错误提示的逻辑完全不符合预期。另外，你的循环遍历14个输入框，但只画了3个绿色矩形，推测你是想通过红色矩形的数量来表示错误次数？我基于这个理解来帮你修正代码：

先分析原代码的问题 #

• 错误判断在循环内，只要某一个输入框不匹配，就重复覆盖同一个矩形的颜色，无法区分错误数量或位置
• 每次计算前没有重置矩形为绿色，导致上次的红色会残留到下一次计算
• 输入值没有去除首尾空格，可能导致输入空格时的误判

修正后的代码 #

var total = 0;
// 把三个矩形的坐标存成数组，方便统一管理
const rectPositions = [
  { x: 10, y: 30, width: 30, height: 30 },
  { x: 80, y: 30, width: 30, height: 30 },
  { x: 150, y: 30, width: 30, height: 30 }
];

// 初始化所有矩形为绿色的工具函数
function resetRectsToGreen() {
  gameboard.fillStyle = 'green';
  rectPositions.forEach(rect => {
    gameboard.fillRect(rect.x, rect.y, rect.width, rect.height);
  });
}

// 页面加载时先初始化绿色矩形
resetRectsToGreen();

$('#total_score').on('click', calculate);

function calculate() {
  total = 0;
  let errorNum = 0;
  // 每次计算前先把矩形恢复成初始绿色
  resetRectsToGreen();

  for (let index = 0; index < 14; index++) {
    // 去除输入值的首尾空格，避免空格导致的误判
    const userInput = $('#' + index).val().trim();
    if (userInput === answers[index]) {
      total += 1;
    } else {
      errorNum += 1;
    }
  }

  // 根据错误数量，把对应数量的矩形改成红色（最多3个，因为你只画了3个）
  for (let i = 0; i < errorNum && i < rectPositions.length; i++) {
    gameboard.fillStyle = 'red';
    const rect = rectPositions[i];
    gameboard.fillRect(rect.x, rect.y, rect.width, rect.height);
  }

  $('#display_total').text(total);
};

关键修正点说明 #

1. 统一管理矩形位置：把三个矩形的坐标存成数组，后续修改或扩展矩形数量时更方便
2. 重置矩形状态：每次计算前先调用resetRectsToGreen()，确保上次的红色不会残留
3. 统计错误数量：用errorNum变量统计答错的输入框数量，再根据这个数量对应切换矩形颜色
4. 处理输入空格：用trim()去除输入值的首尾空格，避免用户不小心输入空格导致的误判
5. 优化变量逻辑：把total的重置放在函数开头，逻辑更清晰

如果你的需求不是用红色矩形数量表示错误次数，而是每个输入框对应一个独立的矩形，那你需要调整rectPositions数组的数量（比如改成14个），并在循环判断错误时直接修改对应索引的矩形颜色。

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