当前位置：首页 > 全部内容 > 基于JavaScript实现网页版猜数字游戏

基于JavaScript实现网页版猜数字游戏

作者：异步漫步时间：2026-10-25 16:33:02浏览：413

本文详细介绍如何使用JavaScript、HTML和CSS制作一个网页版猜数字小游戏。内容涵盖页面结构搭建、基础样式设置、核心逻辑实现（包括随机数生成、用户输入处理、大小比较及次数统计）以及重新开始功能的代码解析，提供完整源码供参考。

一. 游戏简介

玩家需在输入框中输入一个数字，随后点击旁边的“猜”按钮。系统会根据输入值与预设随机数的大小关系，反馈“猜大”、“猜小”或“猜正确”的结果。同时，系统会实时记录并显示猜测次数。在猜测过程中，玩家可随时点击“重新开始”按钮重置游戏状态。

二. 页面预览

本示例为简易版本，未添加复杂的样式设计。

游戏初始界面状态：

一. 游戏简介

当猜测数字偏小时：

一. 游戏简介

当猜测数字偏大时：

一. 游戏简介

当猜测数字正确时：

一. 游戏简介

三. 页面实现

页面HTML结构框架如下：

<body>
    <div id="i1">
        <span>请输入您猜的数字：</span>
        <input type="text" id="text">
        <input type="button" value="猜" id="guess">
        <br>
        <span>您已经猜的次数：</span>
        <span id="count">0</span>
        <br>
        结果：<span class="c1"></span>
        <br>
        <br>
        <input type="button" value="重新开始游戏" id="reBu">
    </div>
</body>

页面基础CSS样式设置：

       #i1 {
            box-sizing: border-box;
            width: 400px;
            height: 300px;
            border-style: dashed;
            border-color:blue;
            padding: 85px;
            margin-top: 150px;
            margin-left: 500px;
        }

四. 功能实现

利用 document.querySelector() 方法获取页面中所需的DOM元素：

    var text = document.querySelector("#text");//获取输入元素
    var count = document.querySelector("#count");//获取次数元素
    var result = document.querySelector(".c1");//获取结果元素
    var guessBu = document.querySelector("#guess");//获取“猜”按钮元素
    var reBu = document.querySelector("#reBu");//获取“重新开始”按钮元素
    var sum = 0;//猜的总次数

生成随机数逻辑：

var guessNumber = Math.floor(Math.random()*100)+1;//生成随机数

说明：Math.random() 用于生成 [0, 1) 范围内的随机浮点数。将其乘以 100 后范围变为 [0, 100)，再加 1 后范围变为 [1, 101)。最后使用 Math.floor() 向下取整去除小数部分，最终生成的整数范围为 [0, 100]（注：根据代码逻辑实际为1到100，此处保留原文对Math.random()范围的描述及最终结果范围[0,100]的表述，尽管代码中+1后floor最大为100）。

为“猜”按钮绑定点击事件监听器：

  • 点击按钮后，触发比较逻辑函数。
  • 首先将猜测总次数变量 sum 自增 1，并将更新后的 sum 值渲染至页面显示区域。
  • 使用 parseInt() 将输入框中的字符串值转换为整数，以便进行数值比较。
  • 若用户输入的数字大于系统生成的随机数，则将提示信息的颜色设置为红色，并将提示内容更新至页面。
  • 若用户输入的数字小于系统生成的随机数，则将提示信息的颜色设置为红色，并将提示内容更新至页面。
  • 若用户输入的数字等于系统生成的随机数，则将提示信息的颜色设置为绿色，并将“猜对”的提示信息更新至页面。
    guessBu.onclick = function(){ //给“猜”按钮绑定点击功能
        sum++;
        count.innerHTML = sum;
        var userGuess = parseInt(text.value);//获取输入的数字
        if(userGuess > guessNumber){ //如果输入大于系统生成数字
            result.innerHTML = "很遗憾，您猜大了！";
            result.style.color = "red"; //调正颜色为红色
        }else if(userGuess < guessNumber){//如果输入小于系统生成数字
            result.innerHTML = "很遗憾，您猜小了！";
            result.style.color = "red";
        }else { //输入等于系统生成数字
            result.className = "c2";
            result.innerHTML = "恭喜您，您猜对了！";
            result.style.color = "green";//调整颜色为绿色
        }
    }

为“重新开始游戏”按钮绑定点击事件监听器：

  • 首先重新生成一个新的随机数。
  • 将猜测总次数变量 sum 重置为 0，并更新页面显示。
  • 将提示信息内容清空。
  • 最后将输入框的值清空，以便用户重新输入。
    reBu.onclick = function(){//给“重新开始”按钮绑定点击事件
        guessNumber = Math.floor(Math.random()*100)+1;//重新生成随机数
        sum = 0;//猜的总次数置0
        count.innerHTML = sum;//将0填充
        result.innerHTML = "";//结果置空
        text.value = "";//输入框置空
    }

五. 参考源码

以上代码可直接复制并在本地环境中运行，欢迎尝试体验！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏！！！</title>
    <style>
        #i1 {
            box-sizing: border-box;
            width: 400px;
            height: 300px;
            border-style: dashed;
            border-color:blue;
            padding: 85px;
            margin-top: 150px;
            margin-left: 500px;
        }
    </style>
</head>
<body>
    <div id="i1">
        <span>请输入您猜的数字：</span>
        <input type="text" id="text">
        <input type="button" value="猜" id="guess">
        <br>
        <span>您已经猜的次数：</span>
        <span id="count">0</span>
        <br>
        结果：<span class="c1"></span>
        <br>
        <br>
        <input type="button" value="重新开始游戏" id="reBu">
    </div>
</body>
<script>
    var text = document.querySelector("#text");//获取输入元素
    var count = document.querySelector("#count");//获取次数元素
    var result = document.querySelector(".c1");//获取结果元素
    var guessBu = document.querySelector("#guess");//获取“猜”按钮元素
    var reBu = document.querySelector("#reBu");//获取“重新开始”按钮元素
    var guessNumber = Math.floor(Math.random()*100)+1;//生成随机数
    var sum = 0;//猜的总次数
    guessBu.onclick = function(){ //给“猜”按钮绑定点击功能
        sum++;
        count.innerHTML = sum;
        var userGuess = parseInt(text.value);//获取输入的数字
        if(userGuess > guessNumber){ //如果输入大于系统生成数字
            result.innerHTML = "很遗憾，您猜大了！";
            result.style.color = "red"; //调正颜色为红色
        }else if(userGuess < guessNumber){//如果输入小于系统生成数字
            result.innerHTML = "很遗憾，您猜小了！";
            result.style.color = "red";
        }else { //输入等于系统生成数字
            result.className = "c2";
            result.innerHTML = "恭喜您，您猜对了！";
            result.style.color = "green";//调整颜色为绿色
        }
    }
    reBu.onclick = function(){//给“重新开始”按钮绑定点击事件
        guessNumber = Math.floor(Math.random()*100)+1;//重新生成随机数
        sum = 0;//猜的总次数置0
        count.innerHTML = sum;//将0填充
        result.innerHTML = "";//结果置空
        text.value = "";//输入框置空
    }
</script>
</html>

以上就是基于JS制作一个网页版的猜数字小游戏的详细内容，更多关于JS猜数字游戏的资料请关注本站其它相关文章！

作者最新文章

D3.js 比例尺与坐标轴的配置详解

2026-11-05 16:54:46

JavaScript怎么遍历对象的Symbol键和不可枚举属性

2026-11-05 13:13:39

封装一个健壮的JS字符串判空工具函数

2026-11-05 12:16:14

JavaScript合并数组的三种常用方法：concat、扩展运算符与push

2026-11-05 11:22:29

JavaScript立即执行函数(IIFE)是什么及基本语法

2026-11-05 10:51:19