效果图：

代码：

<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. 开源网络操作系统--VyOS

    User Guide Jump to: navigation, search Contents 1 Introduction 2 Installation 3 Using the Command-Li ...

  2. AtomicInteger的使用

    JDK API 1.7相关介绍 可以用原子方式更新的 int 值.有关原子变量属性的描述,请参阅 java.util.concurrent.atomic 包规范.AtomicInteger 可用在应用 ...

  3. 模仿ICE的structured panorama小按钮

    这个按钮的目的是用于手动排列图片序列,应该说写得比较精巧,我使用csharp进行模仿,主要采用的是自动控件创建技术.结果比较简陋,实现功能而已,放出来大家一起学习. ;        ;        ...

  4. 运行容器的最佳实践 - 每天5分钟玩转 Docker 容器技术（24）

    按用途容器大致可分为两类:服务类容器和工具类的容器. 1. 服务类容器以 daemon 的形式运行,对外提供服务.比如 web server,数据库等.通过 -d 以后台方式启动这类容器是非常合适的. ...

  5. mongoDB数据库的简单使用

    我的第一篇小文章,以前总是写Evernote. mongodb属于非关系型数据库中的文档型数据库. 1.下载安装mongoDB, 文件自动 存放在这个目录下:C:\Program Files\Mong ...

  6. 如何实现windows命令提示符的tab补全

    1:使用win+r打开 运行 控制台 2:输入 regedit 打开注册表 3:进入HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Command Processor\Co ...

  7. mysql之 MySQL 主从基于 GTID 复制原理概述

    一. 什么是GTID ( Global transaction identifiers ):MySQL-5.6.2开始支持,MySQL-5.6.10后完善,GTID 分成两部分,一部分是服务的UUid ...

  8. 关于QT5使用QtScript解析QJsonArray数组的问题

    首先得在pro文件中加入QT+=script 然后导入相应的头文件 include <QStringList> #include <QtScript/QScriptEngine> ...

  9. H5拖拽 构造拖拽及缩放 pdf展示

    前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...

  10. 如何在前端模版引擎开发中避免使用eval函数

    前段时间,想着自己写一个简单的模版引擎,便于自己平时开发demo时使用.于是根据自己对模版引擎的理解,定义自己的模版格式,然后,根据自己定义的格式,编写处理函数,将模版标签中的字符串,解析成可执行的字 ...