效果图：

代码：

<body>

<script type="text/javascript">

window.onload = newgame;		//页面载入的时候就开始一个新的游戏

window.onpopstate = popState;	//处理历史记录相关事件

var state,ui;			//全局变量，在newgame()方法中会对其初始化

function newgame( playagin ){	//开始一个新的猜数字游戏

	//初始化一个包含需要的文档元素的对象

	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);

	/**

	 * 此函数会作为onload事件处理程序调用，

	 * 同时当单机显示在游戏最后的“再玩一次”按钮时候，也会调用它

	 * 在第二种调用情况下，playagain参数值为true

	 * 如果playagain为true，则保存新的游戏状态

	 * 但是如果是作为onload事件处理程序调用的情况下，则不保存状态

	 * 这是因为，当通过浏览器历史记录从其他文档状态回退到当前的游戏状态时，

	 * 也会出发load事件，如果这种情况下，也保存状态的话

	 * 会将真正的游戏历史状态记录覆盖掉

	 * 在支持pushState（）方法的浏览器中，load事件之后总是有一个popstate事件

	 * 因此，这里的处理方式是，等待popstate事件而不是之间进行状态保存

	 * 如果该事件提供一个状态对象，则直接使用该对象即可

	 * 如果该事件没有状态对象，就表示这实际上是一个新的游戏

	 * 则使用replaceState来保存最新的游戏状态

	 */

	if(playagin ==true)

		save(state);

}

//如果支持的话，就使用pushState（）方法将游戏状态保存到浏览器历史记录中

function save(state){

	if(!history.pushState)

		return;		//如果pushState（）方法没有定义的话，则什么也不做

	//这里会将一个保存的状态和URL关联起来

	//该URL显示猜测的数字，但是不对游戏状态进行编码

	//因此，这对于书签是没有用的

	//不能简单地游戏状态写到URL中，因为这会将游戏一些机密数字暴露在地址栏中

	var url = "#guess"+state.guessnum;

	//保存状态对象和URL

	history.pushState(state,	//要保存的状态对象

			"",					//状态标题，当前浏览器会忽略它

			url 				//状态URL：对书签是没有用的

		);

}

//这是onpopstate的事件处理程序，用于恢复历史状态

function popState(event){

	if(event.state){	//如果事件有一个状态对象，则恢复该状态

		//要注意的是，event.state是对已保存状态对象的一个深拷贝

		//因此无须改变保存的值就可以修改该对象

		state = event.state;		//恢复历史状态

		display(state);				//显示恢复的状态

	}else{

		//当第一次载入页面时，会触发一个没有状态的popstate事件

		//用真实的状态将null状态替换掉： 参见newgame（）方法中的注释

		//这里不需要调用display（）方法

		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)+"%";

	//根据用户最近的猜测，设置提示

	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 type="text/css">

#prompt {font-size: 16pt;}

table{width: 90%; margin: 10px; margin-left: 5%;}

#low,#high{ background: lightgray; height: 1em; }

#mid{background-color: green;}

</style>

	<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 type="text" id="input">

</body>

　　

JavaScript一个猜数字游戏的更多相关文章

  1. 用Python写一个猜数字游戏

    2015.5.25第一天下载Python IDLE,写个猜数字的小游戏来熟悉这门语言: times=6 letters=[100] for i in range(1,times): a = input ...

  2. 用MFC完成一个简单的猜数字游戏: 输入的四位数中，位置和数字都正确为A，数字相同而位置不同的为B。

    最近学习了MFC一些比较基础的知识,所以打算通过做一个简单的数字游戏来理解MFC的流程并进一步熟悉其操作. 在这里,我做了一个猜数字的小游戏.第一步当然是设计主界面,先给大家展示一下游戏界面: 主界面 ...

  3. python新手如何编写一个猜数字小游戏

    此文章只针对新手,希望大家勿喷,感谢!话不多说先上代码: import random if __name__ == '__main__': yourname = input("你好! 你的名 ...

  4. Java初学者作业——实现控制台的猜数字游戏。游戏运行时产生一个1～100之间的随机数字

    返回本章节 返回作业目录 需求说明: (1)实现控制台的猜数字游戏.游戏运行时产生一个1-100之间的随机数字 (2)要求用户从控制台输入数字,若输入的数字比随机数小,则输出"太小了,再大一 ...

  5. 不一样的猜数字游戏 — leetcode 375. Guess Number Higher or Lower II

    好久没切 leetcode 的题了,静下心来切了道,这道题比较有意思,和大家分享下. 我把它叫做 "不一样的猜数字游戏",我们先来看看传统的猜数字游戏,Guess Number H ...

  6. jQuery学习（1）猜数字游戏

      jQuery是一个快捷.小型且特征丰富的JavaScript库.它使得HTML文档遍历及操作,事件处理,动画,Ajax等更简洁方便.它通过调用一个简单易用的API,就能在各种浏览器中使用.由于jQ ...

  7. HTML5 Canvas之猜数字游戏

    主要的内容描述的是如何渲染一个矩形的边框和填充背景,以及文字. 代码中有详细的注释: 效果图: 以下是代码: <!DOCTYPE html> <html lang="cn& ...

  8. C语言猜数字游戏

    猜数字游戏,各式各样的实现方式,我这边提供一个实现方式,希望可以帮到新手. 老程序猿就不要看了,黑呵呵 源代码1 include stdio.h include stdlib.h include ti ...

  9. 【原创Android游戏】--猜数字游戏Version 0.1

    想当年高中时经常和小伙伴在纸上或者黑板上或者学习机上玩猜数字的游戏,在当年那个手机等娱乐设备在我们那还不是很普遍的时候是很好的一个消遣的游戏,去年的时候便写了一个Android版的猜数字游戏,只是当时 ...

随机推荐

  1. mysql5.6 rpm安装配置

    检查MySQL及相关RPM包,是否安装,如果有安装,则移除(rpm –e 名称)   [root@localhost share]# rpm -qa | grep -i mysql MySQL-cli ...

  2. Java的必备开发工具

    身为一个Java开发的爱好者,你不得不承认需要安装以下软件 NO.1 Java开发工具包 Java JDK 可以说这个工具包不得不安装,因为这个工具包是开发Java程序的核心! Java JDK工具包 ...

  3. 生成JSON数据--Gson（谷歌）方法

    Gson生成JSON数据方法: 创建相应的类,然后创建对象,toJson()进去就可以了 要求:生成如下JSON数据 1.{"age":4,"name":&qu ...

  4. Java IO流之缓冲流

    一.缓冲流简介 二.BufferedInputStream 三.其他三种缓冲流

  5. JAVAEE学习——struts2_02：结果跳转方式、访问servletAPI方式、获得参数以及封装和练习:添加客户

    一.结果跳转方式 <action name="Demo1Action" class="cn.itheima.a_result.Demo1Action" m ...

  6. 2017年Web前端开发工程师薪资越来越高？

    放眼全球,不仅在国内的互联网行业,在国外,前端工程师一样是需求旺盛.供不应求的香饽饽.所以在供不应求的前端招聘市场上,优秀的前端工程师才是有话语权的那一方. 前端开发是做什么的? 前端是互联网时代软件 ...

  7. MVC分层含义与开发方式

    真正的服务层是面向数据的,假想一切数据都是从参数获得 控制层是接受页面层数据,再传给服务层,然后将结果返回给页面层的(客户) 页面层是提交格式化的数据的(容易小混乱,无格式,所以要格式化,可以在中间加 ...

  8. 网页 cookie

    定义: 从JavaScript的角度看,cookie 就是一些字符串信息.这些信息存放在客户端的计算机中,用于客户端计算机与服务器之间传递信息. 使用:document.cookie = 'usern ...

  9. PHP面试题详解

    自己从网上找了几份常考到的PHP面试题进行了整理,然后才有了这份PHP面试题,并且我把所有的题目进行了详细分析和代码分析,希望可以对大家有帮助,谢谢大家. 这份试题我也上传到了百度云,有需要的可以直接 ...

  10. WCF入门, 到创建一个简单的WCF应用程序

    什么是WCF?  WCF, 英文全称(windows Communication Foundation) , 即为windows通讯平台. windows想到这里大家都知道了 , WCF也正是由微软公 ...