效果图:
代码:
<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>