js实现一个猜数字游戏


Posted in Javascript onMarch 31, 2017

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

效果图:

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
JS图片轮播与索引变色功能实例详解
Jul 06 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 Javascript
JS模拟实现京东快递单号查询
Nov 30 Javascript
微信小程序页面间通信的5种方式
Mar 31 #Javascript
ES6新特性之Symbol类型用法分析
Mar 31 #Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 #Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 #Javascript
ES6新特性之Object的变化分析
Mar 31 #Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 #Javascript
ES6新数据结构Map功能与用法示例
Mar 31 #Javascript
You might like
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
JavaScript 撑出页面文字换行
2009/06/15 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
python datetime中strptime用法详解
2019/08/29 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
详解Anaconda 的安装教程
2020/09/23 Python
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
保安拾金不昧表扬信
2014/01/15 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
纪律教育月活动总结
2014/08/26 职场文书
前台岗位职责
2015/02/13 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书