如何实现Hangman游戏的字母替换与错误绘图功能？

1. 随机生成单词（按分类） #

先定义分类单词库，点击"New Word"按钮时，根据选中分类随机抽取单词并初始化游戏状态：

<!-- HTML：分类选择与游戏启动按钮 -->
<select id="categorySelect">
  <option value="animals">动物</option>
  <option value="fruits">水果</option>
</select>
<button onclick="startNewGame()">New Word</button>
<div id="wordDisplay"></div>

// 分类单词库
const wordCategories = {
  animals: ["tiger", "elephant", "giraffe", "monkey"],
  fruits: ["apple", "banana", "orange", "strawberry"]
};

let currentWord = "";
let displayedWord = [];
let wrongGuesses = 0;
const maxWrongGuesses = 6; // 对应Hangman的6个身体部位

function startNewGame() {
  // 重置游戏状态
  wrongGuesses = 0;
  displayedWord = [];
  
  // 获取选中分类并随机选单词
  const selectedCategory = document.getElementById("categorySelect").value;
  const wordList = wordCategories[selectedCategory];
  currentWord = wordList[Math.floor(Math.random() * wordList.length)];
  
  // 初始化下划线数组
  for (let i = 0; i < currentWord.length; i++) {
    displayedWord.push("_");
  }
  
  updateWordDisplay();
  resetHangmanCanvas();
}

function updateWordDisplay() {
  document.getElementById("wordDisplay").textContent = displayedWord.join(" ");
}

2. 字母匹配与下划线替换 #

实现字母猜测逻辑，匹配成功则替换对应下划线，失败则累计错误次数：

<!-- HTML：字母按钮区域 -->
<div id="letterButtons">
  <button onclick="guessLetter('a')">A</button>
  <button onclick="guessLetter('b')">B</button>
  <!-- 其余字母按钮可按需补充 -->
</div>

function guessLetter(letter) {
  let isCorrect = false;
  
  // 遍历单词匹配字母，替换对应下划线
  for (let i = 0; i < currentWord.length; i++) {
    if (currentWord[i] === letter) {
      displayedWord[i] = letter;
      isCorrect = true;
    }
  }
  
  if (!isCorrect) {
    wrongGuesses++;
    drawHangmanPart();
    // 检查是否游戏失败
    if (wrongGuesses >= maxWrongGuesses) {
      alert(`游戏结束！正确单词是「${currentWord}」`);
      startNewGame();
    }
  }
  
  updateWordDisplay();
  
  // 检查是否游戏获胜
  if (!displayedWord.includes("_")) {
    alert("恭喜你猜对了！");
    startNewGame();
  }
}

3. 错选时绘制Hangman元素 #

用Canvas实现分步绘制，每错一次绘制一个身体部位：

<!-- HTML：Hangman绘制画布 -->
<canvas id="hangmanCanvas" width="200" height="300"></canvas>

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

function resetHangmanCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 绘制绞刑架基础结构
  ctx.beginPath();
  ctx.moveTo(50, 250);
  ctx.lineTo(150, 250); // 底座
  ctx.lineTo(100, 250);
  ctx.lineTo(100, 50); // 竖杆
  ctx.lineTo(180, 50); // 横杆
  ctx.lineTo(180, 80); // 绳子
  ctx.stroke();
}

function drawHangmanPart() {
  switch(wrongGuesses) {
    case 1:
      // 画头
      ctx.beginPath();
      ctx.arc(180, 100, 20, 0, Math.PI * 2);
      ctx.stroke();
      break;
    case 2:
      // 画身体
      ctx.beginPath();
      ctx.moveTo(180, 120);
      ctx.lineTo(180, 180);
      ctx.stroke();
      break;
    case 3:
      // 画左手
      ctx.beginPath();
      ctx.moveTo(180, 130);
      ctx.lineTo(150, 160);
      ctx.stroke();
      break;
    case 4:
      // 画右手
      ctx.beginPath();
      ctx.moveTo(180, 130);
      ctx.lineTo(210, 160);
      ctx.stroke();
      break;
    case 5:
      // 画左脚
      ctx.beginPath();
      ctx.moveTo(180, 180);
      ctx.lineTo(150, 220);
      ctx.stroke();
      break;
    case 6:
      // 画右脚
      ctx.beginPath();
      ctx.moveTo(180, 180);
      ctx.lineTo(210, 220);
      ctx.stroke();
      break;
  }
}

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