猜成语小游戏

焦个朋友吧
5 阅读5分钟

这是一个猜成语的网页游戏，用户根据显示的成语 首字母 来猜测对应的四字成语。

例如 ABBS = 哀兵必胜 ABJB = 按部就班

屏幕截图 2025-05-19 155410.png

功能特点

  • 随机生成四字成语的首字母缩写
  • 用户输入猜测的成语并提交验证
  • 正确 / 错误答案的反馈
  • 重置功能，确保游戏流程顺畅
  • 界面元素合理布局，视觉层次分明

技术实现

  • 使用idioms对象数组存储成语信息，每个对象包含：
    • code：成语中文写法
    • letter：成语首字母缩写
    • explain：成语解释
  • DOM 操作：通过document.getElementById获取和操作页面元素
  • 事件监听：使用addEventListener绑定按钮点击事件
  • 随机数生成：Math.random()用于随机选择成语
  • 字符串处理：验证用户输入与正确答案

项目结构

QQ20250519-102954.png

项目代码

一、游戏界面和基本结构

整体结构：页面使用了简单的垂直布局，从上到下依次是标题、游戏规则说明和游戏区域。

  1. 使用<link>标签，并行加载CSS文件
  2. 同时在页面中适当添加了[emoji表情]，增加页面的趣味性(emoji6.com/emojiall/)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜成语游戏</title>
    <link rel="stylesheet" href="guess.css">
</head>
<body>
    <h1>🎉欢迎来到猜成语游戏！🎉</h1>
    <div class="rule">
        ✨️游戏规则：请根据这个四字成语首字母，来猜出所对应的四字成语
        <br>点击"提示"按钮可以获得成语的解释
    </div>
    <div class="game">
        <div id="clue">abdc</div>
        <input type="text" id="answer" placeholder="请输入成语">
        <button id="submit-btn">提交答案</button>
        <div id="result"></div>
        <button id="hint-btn">提示</button>
        <div id="hint"></div>
        <button id="next-btn">下一个成语</button>
    </div>
    <!-- 引入js文件 -->
    <script src="guess.js"></script>
</body>
</html>

背景设置：使用彩虹图片作为背景，并设置为覆盖整个页面,省去了使用标签，然后设置样式的步骤，避免图片元素对文档流的影响，保持了 HTML 结构的简洁

body{
      background-image:url('img/彩虹.jpg');
      background-size:cover;
    }

游戏区域：

  • 成语首字母显示区：以大号字体展示成语首字母
  • 输入框：用户输入猜测的成语
  • 提交按钮：提交答案
  • 结果显示区：显示用户猜测的结果
  • 提示按钮：获取成语解释
  • 下一个成语按钮：开始新的一轮游戏

样式设置： 1.游戏区域使用margin-top: 50px;属性实现整体下移，不遮挡图片

        h1 {
            font-size: 60px;
            text-align: center;
            color: #ee2746;
        }
        .rule {
            text-align: center;
            font-size: 25px;
            color: whitesmoke;
        }
        .game {
            margin: auto;//居中
            width: 900px;
            height: 450px;
            text-align: center;
            margin-top: 50px;
        }
        #clue {
            font-size: 130px;
            font-weight: bold;
            /* 字母间距 */
            letter-spacing: 20px;
            margin: 20px 0;
            color: black;
        }
        .result {
            margin: 20px 0;
            font-size: 18px;
        }
        .hint {
            margin: 10px 0;
            font-size: 30px;
            color: #1ba784;
        }
        input{
            padding: 18px 30px;
            font-size: 35px;
            border: 2px solid #1ba784;
            border-radius: 5px;
        }

2.对按钮进行了样式设置，添加了鼠标悬停效果,使按钮变得更加好看，这里的颜色我是通过[中国色]选择的，里面有特别多颜色，可供选择，其他两个按钮同理(www.zhongguose.com/)

QQ20250519-153142.png

二、代码实现

把信息存储到数组中： 这里成语数据页可以进行自行添加

  1. 使用 Math.random() 生成一个 0 到 1 之间的随机小数，乘以 idioms 数组的长度后取整，得到一个随机的成语索引。
  2. 根据随机索引从 idioms 数组中获取对应成语的首字母缩写。
// 成语数据
        const idioms = [
            { code: "安步当车", letter: "ABDC", explain: "以从容的步行代替乘车。形容轻松缓慢地行走。也指人闲适自得，从容而行。" },
            { code: "爱不释手", letter: "ABSS", explain: "喜爱得舍不得放手。" },
            { code: "按部就班", letter: "ABJB", explain: "按照一定的步骤、顺序进行。也指按老规矩办事，缺乏创新精神。" },
            { code: "八拜之交", letter: "BBZJ", explain: "旧时朋友结为兄弟的关系。" }
            ];
        let currentIdiomIndex = 0;
        // 随机生成首字母
        function generateClue() {
            currentIdiomIndex = Math.floor(Math.random() * idioms.length);//生成随机数，得到一个随机的成语索引
            const letter = idioms[currentIdiomIndex].letter;//从 idioms 数组中获取对应成语的首字母缩写
            document.getElementById('clue').innerText = letter;//将首字母缩写显示在页面上的 clue 元素中
            document.getElementById('result').innerText = '';
            document.getElementById('hint').innerText = '';//清空元素内容
            document.getElementById('next-btn').style.display = 'none';//隐藏按钮
        }

对提交答案按钮进行监听

检查答案是否正确，并给出提示，同时显示 下一个成语 按钮

        // 监听提交答案按钮的点击事件， 
        document.getElementById('submit-btn').addEventListener('click', function () {
            const userAnswer = document.getElementById('answer').value.trim();
            const correctAnswer = idioms[currentIdiomIndex].code;
            if (userAnswer === correctAnswer) {
                document.getElementById('result').innerText = '🎊恭喜你，猜对了，棒棒哒,请继续加油哦！';
                document.getElementById('result').style.color = '#1ba784';
                document.getElementById('result').style.fontSize = '30px';
            } else {
                document.getElementById('result').innerText = '🧨很遗憾，猜错了，请点击提示按钮，再试一次吧！';
                document.getElementById('result').style.color = '#e16c96';
                document.getElementById('result').style.fontSize = '30px';
            }
            document.getElementById('next-btn').style.display = 'inline-block';
        });

提示功能

将当前随机选中成语的解释，显示在页面上的 hint 元素中

        // 提示功能，将当前随机选中成语的解释显示在页面上的 hint 元素中
        document.getElementById('hint-btn').addEventListener('click', function () {
            const explanation = idioms[currentIdiomIndex].explain;
            document.getElementById('hint').innerText = explanation;
        });

生成下一个成语并初始化游戏

调用 generateClue 函数重新随机选取一个成语并显示首字母缩写

        // 下一个成语
        document.getElementById('next-btn').addEventListener('click', function () {
            generateClue();//重新随机选取一个成语并显示首字母缩写
            document.getElementById('answer').value = '';//同时清空用户输入框
        });
        // 初始化游戏
        generateClue();

总结

这是一个由HTML+CSS+JS组成的猜成语小游戏，同时为用户提供了一个有趣且易于使用的成语学习工具

当然我的项目还有不足之处，欢迎大家留言点评，我后续也会进行完善！

avatar
文章
阅读
粉丝