js实现猜字游戏

最新推荐文章于 2023-04-23 21:45:59 发布

余语-

最新推荐文章于 2023-04-23 21:45:59 发布

阅读量1.6k

点赞数 1

文章标签： javascript 游戏前端

本文链接：https://blog.csdn.net/hhazjyh5210/article/details/126117789

版权

本文介绍如何使用JavaScript创建一个猜数字游戏。游戏规则是系统随机生成一个0到20之间的数字，用户输入猜测，根据用户的猜测给出相应提示（猜大了、猜小了或猜对了）。游戏还提供再来一次的功能，猜对数字后，用户可以选择继续游戏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、使用js实现基本的猜字游戏

js实现猜字游戏，随机产生数字，猜大猜小了提示，猜对了可以再来一次

二、使用步骤

代码如下（示例）：

        <div id="res"></div>
       <input type="text" id="num">
       <button id="guess">猜一猜</button>
       <button id="reguess">再来一次</button>
       <script>
           var random = Math.floor(Math.random() * 20); //第一次生成随机数
           console.log(random);
           var _guess = document.querySelector("#guess"); //猜一猜按钮
           var _reguess = document.querySelector("#reguess"); //再来一次
           var _res = document.querySelector("#res"); //猜的结果
           var _num = document.querySelector("#num"); //用户输入框
           _reguess.style.display = "none"; //默认再来一次隐藏


           //点击猜一猜的操作
           _guess.onclick = function() {
               var num = _num.value; //获取用户输入数据
               //比较
               if (num > random) {
                   _res.innerHTML = "猜大了"
               }
               if (num < random) {
                   _res.innerHTML = "猜小了"
               }
               //猜对，再来一次显示
               if (num == random) {
                   _res.innerHTML = "猜对了"
                   _reguess.style.display = "block";
               }
           }

           //点击再来一次的操作
           _reguess.onclick = function() {
               // 再来一次显示
               _res.innerHTML = "";
               _num.value = "";
               _reguess.style.display = "none";
               // 重新生成随机数
               random = Math.floor(Math.random() * 20);
               console.log(random);
           }
       </script>