JavaScript猜词游戏开发教程详解

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《JavaScript互动猜词游戏开发教程》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

本教程详细介绍了如何使用JavaScript构建一个简单的网页版猜词游戏。我们将学习如何随机选择一个电影名称，将其字符拆分并初始化显示为下划线，然后通过监听用户输入实现单词猜测功能，并提供即时反馈。文章还将探讨如何扩展该逻辑以支持单个字母的猜测，帮助读者掌握前端交互式应用开发的基础。

1. 游戏结构与界面初始化

一个交互式猜词游戏通常包含显示待猜词语的区域和用户输入猜测的区域。我们将使用HTML来构建这些元素，并通过CSS进行基本样式设置。

1.1 HTML 结构

我们需要一个 div 元素来承载每个字母的显示，以及一个 input 元素供用户输入猜测。

<div id="display"></div>
<span>请输入字母或整个标题 </span><input type="text" id="entry">

display div 将用于动态插入表示电影标题中每个字母的

标签。entry 是用户输入猜测的文本框。

1.2 CSS 样式

为了让界面更具可读性，我们可以为字母方块和页面背景添加一些基本样式。

p {
  float: left; /* 让字母方块水平排列 */
  margin: 10px;
  background-color: white;
  width: 50px; /* 示例宽度 */
  height: 50px; /* 示例高度 */
  line-height: 50px; /* 垂直居中文字 */
  text-align: center; /* 水平居中文字 */
  font-size: 24px; /* 字体大小 */
  border: 1px solid #ccc; /* 边框 */
  box-sizing: border-box; /* 确保宽度和高度包含内边距和边框 */
}

body {
  background-color: lightgray;
  margin-top: 100px;
  font-family: Arial, sans-serif;
  text-align: center; /* 居中内容 */
}

/* .tile 样式在当前实现中可能未直接使用，但可作为未来扩展的参考 */
.tile {
  width: 50px;
  height: 50px;
  float: left;
  background-color: black;
  margin: 10px;
}

这些样式将使每个字母显示为一个白色方块，并且页面背景为浅灰色，提升用户体验。

2. JavaScript 核心逻辑

JavaScript是游戏交互性的核心。它负责选择电影标题、初始化显示、处理用户输入以及判断猜测是否正确。

2.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)];
let text = selection; // 将选定的标题赋值给 text 变量
const game = text.split(""); // 将标题拆分为字符数组

// 用于追踪每个字母是否已被正确猜出（当前示例主要用于单词猜测，但在字母猜测时会用到）
// 对于包含空格的标题，空格部分应默认为已猜对，或者特殊处理
var correctGuesses = new Array(game.length).fill(false);
for (let i = 0; i < game.length; i++) {
    if (game[i] === ' ') { // 如果是空格，则默认视为已猜对
        correctGuesses[i] = true;
    }
}

// 在页面上显示与标题长度相等的下划线或空格
for (var i = 0; i < game.length; i++) {
  var newEl = document.createElement('p');
  var displayChar = (game[i] === ' ') ? ' ' : '_'; // 如果是空格则显示空格，否则显示下划线
  var newNode = document.createTextNode(displayChar);
  newEl.appendChild(newNode);
  document.getElementById("display").appendChild(newEl);
}

这段代码确保了每次游戏开始时都有一个新的随机标题，并且用户看到的是一个待填充的下划线序列。对于标题中的空格，我们直接显示出来，以符合常规的猜词游戏体验。

2.2 实现猜测逻辑

本教程将提供一个结合了单词猜测和字母猜测功能的逻辑，以满足更全面的需求。

// 获取用户输入框元素
var userInput = document.getElementById('entry');

// 核心猜测处理函数
function processGuess(guess) {
  guess = guess.toLowerCase().trim(); // 将猜测转换为小写并去除首尾空格

  if (!guess) { // 检查输入是否为空
    alert("请输入您的猜测！");
    userInput.value = "";
    return;
  }

  // 获取所有显示字母的p标签
  var pElements = document.getElementById("display").getElementsByTagName('p');

  let foundMatch = false; // 标记本次猜测是否命中任何字母或单词

  if (guess.length === 1) { // 如果用户输入的是单个字母
    let letterFound = false;
    for (let i = 0; i < game.length; i++) {
      if (game[i].toLowerCase() === guess && !correctGuesses[i]) { // 匹配且该位置未被猜中
        correctGuesses[i] = true;
        pElements[i].textContent = game[i]; // 更新显示
        letterFound = true;
        foundMatch = true;
      }
    }
    if (!letterFound) {
      alert("字母 '" + guess.toUpperCase() + "' 不在标题中或已猜过。");
      // 可以在这里添加错误次数计数等逻辑
    }
  } else if (guess.length > 1) { // 如果用户输入的是整个单词
    if (game.join('').toLowerCase() === guess) {
      alert("恭喜您！您猜对了电影标题！");
      // 显示所有字母
      for (let i = 0; i < game.length; i++) {
        pElements[i].textContent = game[i];
        correctGuesses[i] = true; // 标记所有字母为已猜对
      }
      foundMatch = true; // 标记为猜对
    } else {
      alert("单词猜测错误。请再试一次。");
    }
  }

  // 检查是否所有字母都已猜对（针对字母猜测或单词猜对后）
  // every() 方法用于检测数组所有元素是否都符合指定条件
  if (correctGuesses.every(val => val === true)) {
    alert("恭喜您！您已成功猜出整个标题！游戏结束！");
    // 可以在这里添加重置游戏的逻辑
  }

  userInput.value = ""; // 清空输入框
}

// 监听用户输入框的 'change' 事件
// 'change' 事件在元素的值被改变并且失去焦点时触发（或按Enter键）
userInput.addEventListener('change', function() {
  processGuess(userInput.value); // 调用核心猜测处理函数
});

此 processGuess 函数结合了字母猜测和单词猜测的逻辑。它首先判断用户输入是单个字母还是一个完整的单词，然后执行相应的比较和界面更新。correctGuesses 数组用于跟踪每个字符是否已经被正确揭示，确保重复猜对的字母不会再次触发更新。

3. 完整代码示例

将上述HTML、CSS和JavaScript代码整合，即可运行一个基础的猜词游戏。

HTML (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜词游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="display"></div>
    <span>请输入字母或整个标题 </span><input type="text" id="entry">

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

CSS (style.css)

p {
  float: left;
  margin: 10px;
  background-color: white;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 24px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-weight: bold; /* 让字母更突出 */
}

body {
  background-color: lightgray;
  margin-top: 100px;
  font-family: Arial, sans-serif;
  text-align: center;
  display: flex; /* 使用flex布局使内容居中 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */
  justify-content: flex-start; /* 顶部对齐 */
  min-height: calc(100vh - 100px); /* 减去margin-top */
}

#entry {
    padding: 10px;
    font-size:

好了，本文到此结束，带大家了解了《JavaScript猜词游戏开发教程详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！