js实现一个猜数字游戏
看你需要猜几次才能猜到那个正确的数字！
效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>猜数字游戏</title>
<script type="text/javascript" charset="utf-8">
window.onload = newgame; //页面载入的时候就开始一个新的游戏
window.onpopstate = popState; //处理历史记录相关事件
var state, ui; //全局变量，在newgame()方法中会对其初始化
function newgame(playagain) {
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);
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 = "你赢了 <button onclick='newgame(true)'>再玩一次</button>";
}
}
</script>
<style>
#prompt { font-size: 16pt;}
table { width: 90%; margin:10px; margin-left:5%;}
#low, #high { background-color:lightgray; height:1em; }
#mid { background-color:green;}
</style>
</head>
<body>
<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 id="input" type="text">
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
js猜数字小游戏的简单实现代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="
-
js实现一个猜数字游戏
看你需要猜几次才能猜到那个正确的数字! 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>猜数字游戏</title> <script type="text/javascript" cha
-
js实现弹窗猜数字游戏
本文实例为大家分享了js实现弹窗猜数字游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var num = Math.floor(Math.random() * 100 + 1); // 产生0-100的
-
纯JavaScript实现猜数字游戏
开发一个猜数字游戏,游戏应随机选择一个 100 以内的自然数, 然后邀请玩家在 10 轮以内猜出这个数字.每轮后都应告知玩家的答案正确与否,如果出错了,则告诉他数字是低了还是高了.并且应显示出玩家前一轮所猜的数字.一旦玩家猜对,或者用尽所有机会,游戏将结束.游戏结束后,可以让玩家选择再次开始. 思维: 1.随机生成一个100以内的自然数 2.记录玩家当前的轮数.从1开始 3.为玩家提供一种猜测数字的方法 4.一旦有结果提交,先将其记录下来,以便用户可以看到他们先前的猜测 5.然后检查他是否正确
-
java编写猜数字游戏
本文实例为大家分享了java实现猜数字游戏的具体代码,供大家参考,具体内容如下 用java的循环还有选择做了一个猜数字游戏,挺简单的 1.首先我们要猜的数字,当然这里你可以固定一个值,也可以通过随机数产生一定范围的数,这样是比较公平的吧. 用随机数产生要猜的数字 Random rand = new Random(); //创建一个随机数 int GuessNumber = rand.nextInt(100)+1; //每次产生随机数1-100的需要猜测的数字 2.设置一个循环,限定猜的次数比如5
-
Python实现简单猜数字游戏
本文实例为大家分享了Python实现简单猜数字游戏的具体代码,供大家参考,具体内容如下 一.需求分析 编写一个猜数字游戏,游戏规则:计算机给出一个1-20的之间的随机数字,让玩家来猜猜它是几,计算机会告诉你每次猜出的数字或大或小,如在6次内猜到正确数字,即赢了. 二.编写思路 1.首先导入random随机模块 ,然后定义随机数的范围,然后定义次数. 2.使用while循环来判断是否符合随机数和输入数值的比较,并且设置次数递减 3.使用 isdigit 函数来完成判断玩家数据类型,避免报错. 4.
-
Java简单实现猜数字游戏附C语言版本
目录 前言 一.C语言版本 代码 运行结果 二.Java版本 代码 运行结果 总结 前言 以前在学C语言的时候,做过一个猜数字游戏,这两天学了Java的逻辑结构,试着用Java实现下. 一.C语言版本 以前做的C语言版本. 代码 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include <time.h> void menu() { printf("******
-
Java实现斗地主与猜数字游戏详细流程
目录 斗地主小游戏之洗牌发牌 任务描述 运行结果 任务目标 实现思路 实现代码 猜数字游戏 任务描述 运行结果 任务目标 实现思路 实现代码 总结 斗地主小游戏之洗牌发牌 任务描述 编写一个斗地主发牌洗牌的程序,要求按照斗地主的规则完成洗牌发牌的过程,牌面由花色色和数字(包括J,Q,K,A字母)组成,花色有红桃,黑桃,方块,梅花组成.还设有大王和小王.将这54张牌的顺序打乱,有三位玩家参与游戏,每人轮流一次摸一张牌,剩余的三张作为底牌,程序结束,打印出每人手中的纸牌和底牌. 运行结果 任务目标
-
JS猜数字游戏实例讲解
本文实例为大家分享了JS实现猜数字游戏的具体代码,供大家参考,具体内容如下 猜数字游戏: 1)利用JS的Math内置对象,实现在1-50内选取一个整数随机数作为游戏答案 2)输入数字进行判断,共有10次输入机会 3)若大于答案数字,则提示猜大了,若小于答案数字,则提示猜小了 4)直至10次机会用完或者猜对答案了,则结束游戏 <script type="text/javascript"> // 猜数字案例 function guessTip(min, max) { min =
-
如何利用Python开发一个简单的猜数字游戏
前言 本文介绍如何使用Python制作一个简单的猜数字游戏. 游戏规则 玩家将猜测一个数字.如果猜测是正确的,玩家赢.如果不正确,程序会提示玩家所猜的数字与实际数字相比是"大(high)"还是"小(low)",如此往复直到玩家猜对数字. 准备好Python3 首先,需要在计算机上安装Python.可以从Python官网下载并安装.本教程需要使用最新版的Python 3(版本3.x.x). 确保选中将Python添加到PATH变量的框.如果不这样做,将很难运行该程序.
-
基于PyQt5制作一个猜数字小游戏
开始之前,直接来看一下实现后的效果.想自己实现或者需要源码的童鞋直接进场... 将PyQt5的相关模块直接导入即可. from PyQt5.QtGui import * from PyQt5.QtCore import * from PyQt5.QtWidgets import * 为了照顾一下新关注的童鞋,这里介绍一下PyQt5的安装,还是采用pip的安装方式. pip install PyQt5 将准备好的样式导入到代码块中. # 主题样式模块引用 from QCandyUi import