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>

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