JavaScript实现简易猜词游戏：基于Web的互动应用开发教程-js教程-PHP中文网

JavaScript实现简易猜词游戏：基于Web的互动应用开发教程

本教程将指导您如何使用JavaScript、HTML和CSS构建一个基础的网页版猜词游戏。我们将涵盖从随机选择词语、初始化隐藏显示、到处理用户输入并判断其对错的核心逻辑。通过本教程，您将学习到Web前端开发中事件监听、DOM操作和基本游戏逻辑实现的实用技巧，为开发更复杂的互动应用奠定基础。

引言：构建互动猜词游戏

猜词游戏是一种经典的互动应用，它挑战玩家根据线索猜测隐藏的词语。本教程将以一个简化的“猜电影名”游戏为例，展示如何利用前端技术实现这一功能。我们的目标是创建一个网页，随机展示一个电影名（以占位符表示），并允许用户输入猜测的词语，然后判断其是否正确。

项目结构与初始设置

首先，我们需要准备HTML结构、CSS样式以及JavaScript逻辑。

HTML结构

HTML部分非常简洁，主要包含一个用于显示游戏进度的容器div和一个供用户输入猜测的文本框。

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

登录后复制

id="display": 这个div将用来动态显示电影名的占位符（例如下划线）。
id="entry": 用户将在这个input文本框中输入他们的猜测。

CSS样式

为了让页面看起来更清晰，我们添加一些基本的CSS样式。这些样式主要控制了字符方块的浮动、间距和背景色，以及页面的整体布局。

p {
  float: left;
  margin: 10px;
  background-color: white;
}

body {
  background-color: lightgray;
  margin-top: 100px;
}

.tile { /* 这个样式在当前提供的JS代码中未直接使用，但可用于未来扩展 */
  width: 50px;
  height: 50px;
  float: left;
  background-color: black;
  margin: 10px;
}

登录后复制

p: 用于显示每个字母占位符的p标签样式，使其水平排列。
body: 设置页面背景色和顶部边距。

游戏界面的动态生成与初始化

游戏开始时，我们需要从一个电影名列表中随机选择一个，并将其以隐藏（下划线）的形式展示给用户。

立即学习“Java免费学习笔记（深入）”；

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'); // 创建一个新的p元素
  var newNode = document.createTextNode("_"); // 创建一个文本节点，内容为下划线
  newEl.appendChild(newNode); // 将文本节点添加到p元素
  document.getElementById("display").appendChild(newEl); // 将p元素添加到display容器中
}

登录后复制

movietitles: 存储所有可选电影名的数组。
selection: 使用Math.random()和Math.floor()从movietitles中随机选择一个电影名。
game: 将选中的电影名字符串通过split("")方法拆分成单个字符的数组，例如 "Iron Man" 会变成 ['I', 'r', 'o', 'n', ' ', 'M', 'a', 'n']。
占位符生成: 循环遍历game数组，为每个字符动态创建一个<p>元素，并将其文本内容设置为_（下划线），然后添加到ID为display的div中。这样，用户一开始看到的就是一串下划线，代表了隐藏的电影名。

用户输入处理机制

游戏的核心是处理用户的猜测。当用户在输入框中输入内容并按下回车键（或者输入框失去焦点，触发change事件）时，我们需要捕获他们的输入并进行处理。

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

// 为输入框添加事件监听器
userInput.addEventListener('change', function() {
  guessWord(userInput.value); // 调用guessWord函数处理用户输入
  userInput.value = ""; // 猜测后清空输入框
});

登录后复制

userInput.addEventListener('change', ...): 这是一个事件监听器，它会在userInput元素的内容发生改变并且该元素失去焦点时触发（或者在某些浏览器中，用户按下回车键时触发）。
guessWord(userInput.value): 当事件触发时，它会调用guessWord函数，并将当前输入框的值作为参数传递过去。
userInput.value = "": 每次猜测后，清空输入框，方便用户进行下一次输入。

核心猜词逻辑

guessWord函数是判断用户猜测是否正确的关键。在本示例中，我们实现的是“猜整个词语”的逻辑。

Smart Picture

Smart Picture 智能高效的图片处理工具

查看详情

function guessWord(guess) {
  // 将原始电影名字符数组重新连接成字符串，并转换为小写进行比较
  // 将用户输入也转换为小写，实现不区分大小写的比较
  var correctGuess = game.join('').toLowerCase() === guess.toLowerCase();

  if (correctGuess) {
    alert("恭喜！您已正确猜出电影标题！"); // 猜测正确
  } else {
    alert("猜测错误，请再试一次。"); // 猜测错误
  }
}

登录后复制

game.join(''): 将之前拆分的字符数组game重新连接成一个完整的字符串。例如，['I', 'r', 'o', 'n', ' ', 'M', 'a', 'n']会变回 "Iron Man"。
.toLowerCase(): 这是实现不区分大小写比较的关键。无论是原始电影名还是用户的输入，都将其转换为小写，这样 "iron man"、"Iron Man" 或 "IRON MAN" 都会被视为相同的猜测。
alert(): 根据猜测结果，通过弹窗向用户提供即时反馈。

完整代码示例

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

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>
    <style>
        p {
            float: left;
            margin: 10px;
            background-color: white;
            padding: 10px; /* 增加内边距使下划线更明显 */
            border: 1px solid #ccc; /* 添加边框 */
        }

        body {
            background-color: lightgray;
            margin-top: 100px;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #display {
            display: flex;
            margin-bottom: 20px;
            flex-wrap: wrap; /* 允许换行 */
            justify-content: center;
        }

        input[type="text"] {
            padding: 10px;
            font-size: 1.2em;
            width: 300px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        span {
            font-size: 1.2em;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="display"></div>
    <span>请猜测一个字母或整个标题 </span><input type="text" id="entry">

    <script>
        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 nodeContent = game[i] === ' ' ? '\u00A0' : '_'; // \u00A0 是不间断空格
            var newNode = document.createTextNode(nodeContent);
            newEl.appendChild(newNode);
            document.getElementById("display").appendChild(newEl);
        }

        function guessWord(guess) {
            var correctGuess = game.join('').toLowerCase() === guess.toLowerCase();
            if (correctGuess) {
                alert("恭喜！您已正确猜出电影标题！");
                // 游戏胜利后可以考虑重置游戏或显示完整标题
                document.getElementById("display").innerHTML = ""; // 清空当前显示
                game.forEach(char => { // 显示正确答案
                    var newEl = document.createElement('p');
                    newEl.textContent = char === ' ' ? '\u00A0' : char;
                    document.getElementById("display").appendChild(newEl);
                });
            } else {
                alert("猜测错误，请再试一次。");
            }
        }

        var userInput = document.getElementById('entry');

        userInput.addEventListener('change', function() {
            guessWord(userInput.value);
            userInput.value = "";
        });
    </script>
</body>
</html>

登录后复制

注：在完整的代码示例中，对CSS进行了微调以改善布局，并在JavaScript中增加了对空格字符的特殊处理，使其显示为实际的空格而非下划线，提升用户体验。同时，在猜对后，会将下划线替换为正确的电影名，提供更完整的游戏体验。