JavaScript实现文字猜测游戏：构建一个简单的“猜词”应用-js教程-PHP中文网

JavaScript实现文字猜测游戏：构建一个简单的“猜词”应用

本文将指导您如何使用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)

<div id="display"></div>
<span>Please guess a letter or the whole title </span><input type="text" id="entry">

登录后复制

<div id="display"></div>: 这个 div 将用于动态地显示电影名称的占位符（下划线）。
<span>...</span>: 提示用户输入。
<input type="text" id="entry">: 这是用户输入猜测的文本框。

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容器中生成相应数量的下划线 _ 作为占位符。

Hour One

AI文字到视频生成

查看详情

// ... (接上一节的JavaScript代码)

// 根据电影名称的长度，在页面上生成对应数量的下划线作为占位符
for (var i = 0; i < game.length; i++) {
  var newEl = document.createElement('p'); // 创建一个新的<p>元素
  var newNode = document.createTextNode("_"); // 创建一个文本节点，内容为下划线
  newEl.appendChild(newNode); // 将文本节点添加到<p>元素中
  document.getElementById("display").appendChild(newEl); // 将<p>元素添加到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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Movie Guessing Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="display"></div>
    <span>Please guess a letter or the whole title </span><input type="text" id="entry">

    <script src="script.js"></script>
</body>
</html>

登录后复制

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动画或过渡效果增强视觉反馈。
错误处理：可以添加对空输入或非字母输入的校验。