PHP代码猜数字游戏,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;}
我在想一个数字...
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
PHP代码猜数字游戏,js实现一个猜数字游戏相关推荐
- Java黑皮书课后题第7章:***7.35(游戏:猜字词游戏)编写一个猜字词游戏,随机产生一个单词,当用户猜测正确后,正确的字母显示出来。当用户猜出一个单词,显示猜错的次数,并询问用户是否继续猜测
***7.35(游戏:猜字词游戏)编写一个猜字词游戏,随机产生一个单词,当用户猜测正确后,正确的字母显示出来.当用户猜出一个单词,显示猜错的次数,并询问用户是否继续猜测 题目 题目描述与运行示例 破题 ...
- 前端三小时用html和js写一个贪吃蛇游戏,非常简单带讲解,代码可直接用,功能完整
目录 游戏主体部分--普通模式 游戏主体部分--地狱模式 游戏主页入口 预览图 游戏入口代码 1.html 2.css 3.js 注册页面代码 游戏实现很简单,只写游戏主体的话只要三小时就够了. 话不 ...
- c语言计算机猜数字100以内,求一个猜数字C语言代码,要求如下 计算机生成一个100以内的随机数,玩家来猜 记录猜的次数,最后打...
满意答案 itpotato 推荐于 2017.10.09 采纳率:51% 等级:12 已帮助:4600人 /* *百度知道越来越水了,这么简单的题就一个回答 *没见过限定头文件数目的..而且是限 ...
- 原生js实现一个连连看小游戏(一)
前几天使用原生的js写了一个连连看小游戏,地址:连连看(js),基本功能都实现了,运行截图为: 根据游戏规则获取开发思路 创建棋盘格 生成随机不重复数字 映射到棋盘格 鼠标点击事件 寻路,无通路,则到 ...
- 教你前端如何用js写一个跑酷小游戏
在线体验地址:http://summer.pkec.net/ 源码地址:https://gitee.com/ihope_top/juejin-summer 前言 不知不觉夏天又到了,提到夏天你们能想到 ...
- 分布式数字身份 —— 从创建一个Weidentity数字身份开始
分布式数字身份--创建一个Weidentity数字身份 前言 DID Weid 前置环境准备 基础配置 FISCO BCOS 链 部署 Weidentity 合约 部署 Weidentity Rest ...
- 不到50行代码,HTML+CSS+JS创建一个简单的色轮
简单,其实就是调库! 文档在这里 Get Started | iro.js 我也写了一个简单的样例在下面可以参考一下
- vue.js:利用vue.js做一个抽奖小游戏
MVVM模式是什么:M=Model(模型),V=View(视图),VM= ViewModel(简写成MVVM) . 代码如下: 运行代码结果: 1.你没有中奖: 2.恭喜你,你中奖了: 转载于:htt ...
- html做一个抽奖游戏,js实现大转盘抽奖游戏实例
/p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> js抽奖 td{width:50px;he ...
最新文章
- 面向自动驾驶领域的3D点云目标检测方法汇总!(单模态+多模态/数据+代码)
- android防治方法被反射,通过去classLoader避免Android P反射限制后还原classLoader的方法...
- python简单代码input-python基础 input()函数
- 数字录音系统服务器,Internet呼叫中心坐席全程录音系统录音模块
- ubuntu安装高版本ruby
- [回归分析][14]--Logistic回归
- python 主要内容,介绍一些有关python的重要内容
- 自定义按钮动态变化_新闻价值的变化定义
- 成为一名成功的程序员要做到以下10点?网友:是真的吗?
- python把485读回来的转为位_我能用Python读取从计算机上接收到的Modbus RS485数据吗?...
- int(a) 和 (int ) a 及 数据存储地址的探究
- React组件生命周期-正确执行运行阶段的函数
- java 多线程基础(一)
- ES6基础教程一 学习笔记
- java bundle类_java ResourceBundle介绍
- 类中定义接口-匿名内部类
- line vty 0 4 和line vty 5 15 区别
- Julia: 关于SubString
- VlanIF和Vlan间路由
- 直观理解偏导数、方向导数和法向量和梯度