轻松实现数字猜谜游戏

最新推荐文章于 2025-04-23 16:19:42 发布

White graces

最新推荐文章于 2025-04-23 16:19:42 发布

阅读量773

点赞数 15

文章标签：前端游戏 html javascript css json

本文链接：https://blog.csdn.net/qq_34471880/article/details/140848409

版权

🙉专栏推荐:Java入门知识🙉

🐹今日诗词:朱雀桥边野草花，乌衣巷口夕阳斜🐹

目录（点击跳转）

1.页面搭建

5. 所有代码

美图分享

⛳️点赞 ☀️收藏⭐️关注💬卑微小博主🙏

所有代码在最后, 有需要的可以直接跳到最后复制即可

1.页面搭建

首先通过html实现以上页面, 代码非常简单
    <button id = "again">重新开始一局游戏</button><br>
    请输入要猜的数字:<input type="text" name="guestNum" id="guestNum"><button id = "guest">猜</button><br>
    已经猜的次数:<span id = "getGuest"></span><br>
    结果:<span id = "result"></span>
设置id是为了让js选择到,从而继续实现""猜""的效果, 于是我们就构建出了以下效果

2.引入JQuery库

有两种引入方式

1. 在线链接引入

2. 将JQuery库下载到本地
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
这里是在线链接引入

3. 生成随机数

let num =  Math.floor(Math.random()*100) + 1;
Math.random() 这个函数随机生成0-1之间的数字

乘100之后就生成0-99之间的随机数了(包含小数)

floor向下取整,再+1表示生成1-100之间的随机整数

4. 实现"猜"操作

 $("#guest").click(function() {
            count++;
            let guestNum = $("#guestNum").val();
            if(num > guestNum) {
                //猜小了
                tmp = "猜小了";
            } else if(num < guestNum) {
                //猜大了
                tmp = "猜大了";
            } else {
                //猜对了
                tmp = "猜对了";
            }
            $("#getGuest").text(count);
            $("#result").text(tmp);
        });

4. 实现"重新开始"操作

$("#again").click(function() {
            count = 0;
            $("#guestNum").val("");
            $("#getGuest").text(count);
            $("#result").text("");
            num =  Math.floor(Math.random()*100) + 1;
        });

5. 所有代码

温馨提示: 如果复制所有代码到自己的电脑上运行失败

原因只有一个: 就是引入的JQuery库有问题, 这个跟你当前网络环境有关, 可以尝试将JQuery库下载到本地再引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id = "again">重新开始一局游戏</button><br>
    请输入要猜的数字:<input type="text" name="guestNum" id="guestNum"><button id = "guest">猜</button><br>
    已经猜的次数:<span id = "getGuest"></span><br>
    结果:<span id = "result"></span>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        //生成随机数
        let num =  Math.floor(Math.random()*100) + 1;
        let count = 0;
        let tmp;
        $("#again").click(function() {
            count = 0;
            $("#guestNum").val("");
            $("#getGuest").text(count);
            $("#result").text("");
            num =  Math.floor(Math.random()*100) + 1;
        });

        $("#guest").click(function() {
            count++;
            let guestNum = $("#guestNum").val();
            if(num > guestNum) {
                //猜小了
                tmp = "猜小了";
            } else if(num < guestNum) {
                //猜大了
                tmp = "猜大了";
            } else {
                //猜对了
                tmp = "猜对了";
            }
            $("#getGuest").text(count);
            $("#result").text(tmp);
        });
    </script>
</body>
</html>