本文手把手教你用原生 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 {
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 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 {
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 的绝佳范例。现在，你可以放心运行它，并在此基础上添加动画、音效或计分系统！
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
