php写猜数字游戏代码,JavaScript实现猜数字游戏实例代码

本文主要介绍了js实现一个猜数字游戏的实例代码。具有很好的参考价值，下面跟着小编一起来看下吧

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

效果图：

代码如下：

猜数字游戏

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

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

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

function newgame(playagain) {

ui = {

heading: null, //文档最上面的

元素

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 = "你赢了 再玩一次";

}

}

#prompt { font-size: 16pt;}

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

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

#mid { background-color:green;}

我在想一个数字...