本文手把手教你用原生 javascript 构建一个功能完整的 hangman（绞刑架）猜词游戏，涵盖单词初始化、字母匹配、实时显示、生命值管理及胜利/失败判定，并提供可直接运行的优化代码。
本文手把手教你用原生 javascript 构建一个功能完整的 hangman（绞刑架）猜词游戏，涵盖单词初始化、字母匹配、实时显示、生命值管理及胜利/失败判定，并提供可直接运行的优化代码。
构建一个交互式 Hangman 游戏的核心在于：正确响应用户点击的字母、精准比对目标单词、动态更新界面状态，并合理管理游戏流程。下面我们将基于你提供的 HTML 结构与初始逻辑，整合并重构出一套健壮、可维护、无冗余的实现方案。
✅ 关键设计思路
- 统一状态管理：用数组 guessed 存储当前猜测状态（如 ['_','_','_']），每个下标对应原单词字母位置；
- 大小写安全匹配：将目标单词转为小写进行查找（result.toLowerCase()），但展示时保留原始大小写（result[i]）；
- 事件委托替代重复绑定：为所有 .letter 按钮批量添加监听器，复用同一个处理函数 letterHandler；
- 防重复点击：使用 this.disabled = true 禁用已点击按钮，比仅改 opacity 更可靠（避免多次触发）；
- 胜利/失败即时反馈：通过 guessed.join('') === result 判定通关；生命值归零时弹出提示。
? 完整可运行脚本（script.js）
// DOM 元素引用（使用 const 保证不可重赋值）
const wordEl = document.querySelector('.word');
const livesEl = document.querySelector('.lives');
const clueEl = document.querySelector('.clue');
const hintBtn = document.querySelector('.hint');
const playAgainBtn = document.querySelector('.play-again');
const letters = document.querySelectorAll('.letter');
// 游戏配置
const gameWords = ['Doctor', 'MichaelJackson', 'Prince', 'Giraffe', 'LionKing'];
let result = gameWords[Math.floor(Math.random() * gameWords.length)];
let userLives = 10;
const guessed = []; // 动态维护当前猜测状态
// 初始化：生成下划线占位符（如 "D o c t o r" → "_ _ _ _ _ _"）
for (let i = 0; i < result.length; i++) {
guessed.push('_');
}
wordEl.textContent = guessed.join(' ');
// 更新生命显示
livesEl.textContent = `You have ${userLives} lives!`;
// 提示按钮逻辑（简化为单次绑定）
hintBtn.addEventListener('click', () => {
const clueMap = {
'MichaelJackson': 'Clue - Music Artist',
'Prince': 'Clue - Music Artist',
'Giraffe': 'Clue - Animal',
'Doctor': 'Clue - Occupation',
'LionKing': 'Clue - Movie'
};
clueEl.textContent = clueMap[result] || 'Clue - Unknown';
});
// 核心字母处理函数
function handleLetterClick() {
const clickedLetter = this.textContent.toLowerCase(); // 获取点击的字母（转小写用于匹配）
const lowerResult = result.toLowerCase();
if (lowerResult.includes(clickedLetter)) {
// ✅ 字母存在：逐位比对，还原原始大小写
for (let i = 0; i < lowerResult.length; i++) {
if (lowerResult[i] === clickedLetter) {
guessed[i] = result[i]; // 保留原单词的大小写格式
}
}
wordEl.textContent = guessed.join(' ');
// ? 胜利判定
if (guessed.join('') === result) {
alert('? Congratulations! You guessed the word!');
disableAllLetters();
return;
}
} else {
// ❌ 字母不存在：扣生命值
userLives--;
livesEl.textContent = `You have ${userLives} lives!`;
if (userLives <= 0) {
alert(`? Game Over! The word was: "${result}"`);
disableAllLetters();
}
}
// 禁用已点击按钮（视觉+逻辑双重防护）
this.disabled = true;
}
// 批量绑定事件监听器
letters.forEach(btn => btn.addEventListener('click', handleLetterClick));
// 辅助函数：禁用所有字母按钮（用于游戏结束）
function disableAllLetters() {
letters.forEach(btn => btn.disabled = true);
}
// “再玩一次”按钮（可选增强）
playAgainBtn.addEventListener('click', () => {
// 重置游戏状态
result = gameWords[Math.floor(Math.random() * gameWords.length)];
userLives = 10;
guessed.length = 0; // 清空数组
for (let i = 0; i < result.length; i++) guessed.push('_');
wordEl.textContent = guessed.join(' ');
livesEl.textContent = `You have ${userLives} lives!`;
clueEl.textContent = 'Clue - ';
// 启用所有字母按钮
letters.forEach(btn => {
btn.disabled = false;
btn.style.opacity = '1'; // 可选：恢复透明度
});
});⚠️ 注意事项与最佳实践
- HTML 中确保字母按钮内容为小写（如 ），否则 this.textContent.toLowerCase() 可能失效；
- 避免在循环中反复调用 innerHTML：使用 textContent 更安全、性能更好（防止 XSS，且不解析 HTML）；
- guessed.join('') === result 是精确全字匹配的关键——注意不要用 == 或忽略空格；
- 如需扩展难度（如支持空格、连字符），可在初始化 guessed 时预处理 result（例如：if (result[i] === ' ') guessed[i] = ' '）；
- 后续可集成绘图系统（用 Canvas/SVG 绘制绞刑架），实现“错一次画一笔”的经典体验。
这套实现简洁清晰、逻辑内聚、易于调试和扩展，是学习 DOM 操作、字符串处理与状态驱动 UI 的绝佳范例。现在，你可以放心运行它，并在此基础上添加动画、音效或计分系统！
