JavaScript implementation of guessing number game example code-JS Tutorial-php.cn

JavaScript implementation of guessing number game example code

零下一度

Release： 2017-04-21 10:00:09

Original

6119 people have browsed it

This article mainly introduces the example code of js to implement a guessing game. It has a very good reference value. Let’s take a look with the editor.

See how many guesses you need to guess the correct number!

Rendering:

##The code is as follows:

<!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=&#39;newgame(true)&#39;>再玩一次</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>

Copy after login

The above is the detailed content of JavaScript implementation of guessing number game example code. For more information, please follow other related articles on the PHP Chinese website!