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 相关文章推荐
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
React服务端渲染(总结)
Jul 01 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
react 原生实现头像滚动播放的示例
Apr 21 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
微信小程序页面间通信的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的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
js正确获取元素样式详解
2009/08/07 Javascript
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
金士达面试非笔试
2012/03/14 面试题
我的画教学反思
2014/04/28 职场文书
大学生求职信例文
2014/06/29 职场文书
化学教育专业自荐信
2014/07/04 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
学术会议通知
2015/04/15 职场文书
小学美术教学反思
2016/02/17 职场文书
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle