蝙蝠岛资源网

js实现一个猜数字游戏
网络编程 2025/11/5 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

看你需要猜几次才能猜到那个正确的数字！

效果图：

js实现一个猜数字游戏

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>猜数字游戏</title>
    <script type="text/javascript" charset="utf-8">
      window.onload = newgame; //页面载入的时候就开始一个新的游戏
      window.onpopstate = popState; //处理历史记录相关事件
      var state, ui; //全局变量，在newgame()方法中会对其初始化
      function newgame(playagain) {
        ui = {
          heading: null, //文档最上面的<h1>元素
          prompt: null, //要求用户输入一个猜测数字
          input: null, //用户输入猜测数字的地方
          low: null, //可视化的三个表格单元格
          mid: null, //猜测的数字范围
          high: null,
        };
        //查询这些元素中每个元素的id
        for(var id in ui) ui[id] = document.getElementById(id);
        //给input字段定义一个事件处理程序函数
        ui.input.onchange = handleGuess;
        //生成一个随机的数字并初始化游戏状态
        state = {
          n: Math.floor(99 * Math.random())+1, //整数： 0 < n <100
          low: 0, //可猜数字范围下限
          high: 100, //可猜数字范围上限
          guessnum: 0, //猜测的次数
          guess: undefined //最后一次猜测
        };
        //修改文档内容来显示该初始状态
        display(state);
        if (playagain === true)save(state);
      }
      function save(state) {
        if (!history.pushState) return; //如果pushState()方法没有定义，则什么也不做

        //将一个保存的状态和url关联起来
        var url = "#guess" + state.guessnum;

        history.pushState(state, //要保存的状态对象
        "", //状态标题：当前浏览器会忽视它
        url); //状态URL：对书签是没有用的
      }
      //这是onpopstate的事件处理程序，用于恢复历史状态
      function popState(event) {
        if (event.state) {
          //如果事件有一个状态对象，则恢复该状态
          state = event.state; //恢复历史状态
          display(state); //显示恢复的状态
        }else{
          history.replaceState(state, "", "#guess" + state.guessnum);
        }
      };
      //每次猜测一个数字的时候，都会调用此事件处理程序
      //此处理程序用于更新游戏的状态、保存游戏状态并显示游戏状态
      function handleGuess() {
        //从input字段中获取用户猜测的数字
        var g = parseInt(this.value);
        //如果该值是限定范围中的一个数字
        if ((g > state.low) && (g < state.high)) {
          //对应的更新状态
          if (g < state.n) state.low =g;
          else if (g > state.n) state.high = g;
          state.guess = g;
          state.guessnum++;
          //在浏览器历史记录中保存新的状态
          save(state);
          //根据用户猜测情况来修改文档
          display(state);
        }else{
          //无效的猜测：不保存状态
          alert("请输入大于" + state.low + "和小于" + state.high);
        }
      }
      //修改文档来显示游戏当前状态
      function display(state) {
        //显示文档的导航和标题
        ui.heading.innerHTML = document.title ="我在想一个" + state.low + "到" + state.high + "之间的数字！";

        //使用一个表格来显示数字的取值范围
        ui.low.style.width = state.low + "%";
        ui.mid.style.width = (state.high-state.low) + "%";
        ui.high.style.width = (100-state.high) + "%";

        //确保input字段是可见的、空的并且是聚焦的
        ui.input.style.visibility = "visible";
        ui.input.value = "";
        ui.input.focus();

        //根据用户最近猜测，设置提示
        if (state.guess === undefined)
          ui.prompt.innerHTML = "输入你的猜测：";
        else if (state.guess < state.n)
          ui.prompt.innerHTML = state.guess + "低了，再猜一次：";
        else if (state.guess > state.n)
          ui.prompt.innerHTML = state.guess + "高了，再猜一次：";
        else {
          //当猜对了的时候，就隐藏input字段并显示“再玩一次”按钮
          ui.input.style.visibility = "hidden";
          ui.heading.innerHTML = document.title = state.guess + "正确！";
          ui.prompt.innerHTML = "你赢了 <button onclick='newgame(true)'>再玩一次</button>";
        }
      }
    </script>
    <style>
      #prompt { font-size: 16pt;}
      table { width: 90%; margin:10px; margin-left:5%;}
      #low, #high { background-color:lightgray; height:1em; }
      #mid { background-color:green;}
    </style>
  </head>
  <body>
    <h1 id="heading">我在想一个数字...</h1>
    <table>
      <tr>
        <td id="low"></td>
        <td id="mid"></td>
        <td id="high"></td>
      </tr>
    </table>
    <label id="prompt"></label>
    <input id="input" type="text">
  </body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

标签：
js,猜数字
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“js实现一个猜数字游戏”

暂无js实现一个猜数字游戏的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 MicroAirGrinder 南强小屋 幽灵资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 HerbalExtract 蝙蝠岛资源网 白云城资源网 天枫庄资源网 无争山庄资源网 HerbalExtracts FoodColouring NaturalHerbal HerbalOnline NaturalColouring 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com