本文将指导您如何使用HTML、CSS和JavaScript构建一个基础的文字猜测游戏，类似于“字母盘”的猜词环节。您将学习如何随机选择一个词语、将其分解为单个字符、在页面上以占位符形式显示，并处理用户的整词猜测输入，判断其是否正确，从而完成一个功能性的网页游戏。
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元素的动态创建与更新、用户输入事件的监听以及基本的逻辑判断。这个基础框架可以作为您进一步开发更复杂、功能更丰富的文字游戏（如经典的“刽子手”游戏）的起点。
以上就是JavaScript实现文字猜测游戏：构建一个简单的“猜词”应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1511072.html
微信扫一扫 
支付宝扫一扫 
