1. 游戏核心逻辑：随机选取与初始化
构建任何猜测游戏的第一步是确定要猜测的内容。在这个示例中，我们使用一个电影名称数组。程序会从中随机选择一个作为本轮游戏的答案，并将其分解成单个字符，以便后续处理和显示。
// 定义一个电影名称数组作为猜测的词库
var movietitles = ['Iron Man', 'Jaws', 'Avengers', 'Evil Dead', 'It', 'Transformers', 'Little Mermaid', 'Mulan', 'Scooby Doo'];
// 从数组中随机选择一个电影名称作为本轮游戏的答案
const selection = movietitles[Math.floor(Math.random() * movietitles.length)];
// 将选定的电影名称赋值给text变量
let text = selection;
// 将电影名称分解成单个字符的数组，方便后续处理
const game = text.split("");
// 初始化一个与答案长度相同的布尔数组，用于追踪每个字母是否被猜对（本示例主要用于整词猜测，但保留此结构便于扩展）
var correctGuesses = new Array(game.length).fill(false);这段代码首先定义了一个包含多个电影名称的数组。Math.random() 和 Math.floor() 组合用于从数组中随机选取一个元素。text.split("") 是一个关键步骤，它将选定的字符串（如"Iron Man"）拆分成一个字符数组 ['I', 'r', 'o', 'n', ' ', 'M', 'a', 'n']。correctGuesses 数组虽然在当前整词猜测的实现中未使用，但它为后续添加单个字母猜测功能提供了基础。
2. HTML结构与CSS样式：搭建游戏界面
为了让用户能够看到游戏进度并输入猜测，我们需要相应的HTML结构和CSS样式。HTML负责提供显示区域和输入框，而CSS则负责美化这些元素。
HTML结构 (index.html)
Please guess a letter or the whole title - : 这个 div 将用于动态地显示电影名称的占位符（下划线）。
- ...: 提示用户输入。
- : 这是用户输入猜测的文本框。
CSS样式 (style.css)
立即学习“Java免费学习笔记（深入）”；
p {
float: left;
margin: 10px;
background-color: white;
}
body {
background-color: lightgray;
margin-top: 100px;
}
/* .tile 样式在当前实现中未使用，但保留以防未来扩展 */
.tile {
width: 50px;
height: 50px;
float: left;
background-color: black;
margin: 10px;
}这些CSS规则定义了页面和动态生成的 p 元素的样式。p 元素将用于显示每个字符的占位符（下划线），通过 float: left 使它们水平排列，形成一个词语的视觉效果。
动态显示占位符
在JavaScript中，我们需要根据选定的电影名称长度，在display容器中生成相应数量的下划线 _ 作为占位符。
// ... (接上一节的JavaScript代码)
// 根据电影名称的长度，在页面上生成对应数量的下划线作为占位符
for (var i = 0; i < game.length; i++) {
var newEl = document.createElement('p'); // 创建一个新的元素
var newNode = document.createTextNode("_"); // 创建一个文本节点，内容为下划线
newEl.appendChild(newNode); // 将文本节点添加到
元素中
document.getElementById("display").appendChild(newEl); // 将
元素添加到id为"display"的div中
}
这段代码遍历 game 数组（即电影名称的字符数组），为每个字符创建一个 p 元素，并将其文本内容设置为下划线 _，然后添加到 display 容器中。这样，用户在游戏开始时会看到一串下划线，代表待猜测的电影名称。
3. JavaScript事件处理与猜测机制
游戏的核心交互在于捕获用户的输入并判断其是否正确。我们通过监听输入框的 change 事件来实现这一点。
// ... (接上一节的JavaScript代码)
// 获取用户输入框的DOM元素
var userInput = document.getElementById('entry');
/**
* 处理用户整词猜测的函数
* @param {string} guess - 用户输入的猜测词语
*/
function guessWord(guess) {
// 将答案和用户的猜测都转换为小写，进行不区分大小写的比较
var correctGuess = game.join('').toLowerCase() === guess.toLowerCase();
if (correctGuess) {
alert("Congratulations! You have correctly guessed the movie title!"); // 猜测正确
// 可以在此处添加游戏胜利后的逻辑，如重置游戏或显示完整答案
} else {
alert("Incorrect guess. Please try again."); // 猜测错误
}
}
// 监听用户输入框的'change'事件
// 'change'事件在元素的值被改变且失去焦点时触发（例如，用户输入后按Enter键或点击页面其他地方）
userInput.addEventListener('change', function() {
guessWord(userInput.value); // 调用guessWord函数，传入用户输入的值
userInput.value = ""; // 清空输入框，方便用户进行下一次猜测
});- userInput.addEventListener('change', ...): 这行代码是事件监听器，它会在用户在 entry 输入框中输入内容并按下回车键或将焦点移开时触发。
-
guessWord(guess) 函数:
- game.join(''): 将字符数组 game 重新组合成一个完整的字符串（即原始的电影名称）。
- .toLowerCase(): 将原始答案和用户猜测都转换为小写，确保比较时不区分大小写，提高用户体验。
- ===: 严格比较两个字符串是否相等。
- 根据比较结果，通过 alert() 函数向用户提供即时反馈。
- userInput.value = "";: 在每次猜测后清空输入框，方便用户进行下一次输入。
4. 完整代码示例
将上述所有代码片段整合，即可得到一个完整的、可运行的文字猜测游戏。
index.html
Movie Guessing Game
Please guess a letter or the whole title
style.css
p {
float: left;
margin: 10px;
background-color: white;
padding: 5px 10px; /* 增加一些内边距，使下划线看起来更像一个方块 */
border: 1px solid #ccc; /* 添加边框 */
min-width: 20px; /* 确保每个下划线有最小宽度 */
text-align: center;
font-size: 1.2em;
font-weight: bold;
}
body {
background-color: lightgray;
margin-top: 100px;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: calc(100vh - 100px); /* 确保内容居中 */
}
span {
margin-top: 20px;
font-size: 1.1em;
}
input[type="text"] {
padding: 8px;
margin-left: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1em;
width: 200px;
}
/* .tile 样式在当前实现中未使用，但保留以防未来扩展 */
.tile {
width: 50px;
height: 50px;
float: left;
background-color: black;
margin: 10px;
}script.js
var movietitles = ['Iron Man', 'Jaws', 'Avengers', 'Evil Dead', 'It', 'Transformers', 'Little Mermaid', 'Mulan', 'Scooby Doo'];
const selection = movietitles[Math.floor(Math.random() * movietitles.length)];
let text = selection;
const game = text.split("");
var correctGuesses = new Array(game.length).fill(false); // 暂时未用于当前整词猜测逻辑
// 根据电影名称的长度，在页面上生成对应数量的下划线作为占位符
for (var i = 0; i < game.length; i++) {
var newEl = document.createElement('p');
var newNode = document.createTextNode("_");
newEl.appendChild(newNode);
document.getElementById("display").appendChild(newEl);
}
// 获取用户输入框的DOM元素
var userInput = document.getElementById('entry');
/**
* 处理用户整词猜测的函数
* @param {string} guess - 用户输入的猜测词语
*/
function guessWord(guess) {
// 将答案和用户的猜测都转换为小写，进行不区分大小写的比较
var correctGuess = game.join('').toLowerCase() === guess.toLowerCase();
if (correctGuess) {
alert("Congratulations! You have correctly guessed the movie title!");
// 游戏胜利后，可以考虑显示完整的答案，或者禁用输入框
// 例如：
// for (var i = 0; i < game.length; i++) {
// document.getElementById("display").children[i].textContent = game[i];
// }
// userInput.disabled = true;
} else {
alert("Incorrect guess. Please try again.");
}
}
// 监听用户输入框的'change'事件
userInput.addEventListener('change', function() {
guessWord(userInput.value);
userInput.value = ""; // 清空输入框
});5. 注意事项与扩展思路
-
当前实现仅支持整词猜测：本教程提供的解决方案主要侧重于整词猜测。如果您希望实现单个字母猜测功能，您需要：
- 在 guessWord 函数中判断用户输入是单个字母还是整个词语。
- 如果输入是单个字母，遍历 game 数组，检查该字母是否存在。
- 如果存在，更新 correctGuesses 数组中对应位置的布尔值为 true。
- 然后，遍历 correctGuesses 数组，根据其值更新 display 容器中 p 元素的文本内容（显示字母或下划线）。
- 引入一个变量来跟踪已猜错的次数，并在达到上限时结束游戏。
-
用户体验优化：
- 显示已猜错的字母列表。
- 限制猜测次数。
- 在猜对后，将下划线替换为正确的字母，而不仅仅是弹窗提示。
- 添加“重新开始”按钮。
- 通过CSS动画或过渡效果增强视觉反馈。
- 错误处理：可以添加对空输入或非字母输入的校验。
总结
通过本教程，您已经掌握了如何使用HTML、CSS和JavaScript构建一个简单的文字猜测游戏。这包括随机词语选择、DOM元素的动态创建与更新、用户输入事件的监听以及基本的逻辑判断。这个基础框架可以作为您进一步开发更复杂、功能更丰富的文字游戏（如经典的“刽子手”游戏）的起点。
