您的位置：首页 > Web前端 > JavaScript

用JS写的简单的猜数的游戏，一个是步数限制的，一个是有时间限制的。

2015-10-23 20:40 701 查看
一、限制步数

<!doctype html>
<!--
用于调试，请在console中查看每次的随机值
-->
<html>
<head>
<meta charset="UTF-8">
<title>限制步数的猜数游戏</title>
<style type="text/css">
</style>
</head>
<body>
<div id="con">
<h3>每次猜数前请点击“获得随机数”，猜数的范围是1-100</h3>
预测帝,come on:<input type="text" id="guessNumber" disabled="true" />
<input type="button" onclick="get()" value="获得随机数" id="get1"/>
<input type="button" onclick="game()" value="接下来就是见证奇迹的时刻" id="but" style="display:none;"/>
<input type="button" onclick="reset()" value="paly again" id="reset"/>

<p id="tip"></p>
<p id="chishu"></p>
</div>
<script type="text/javascript">
var num;//获得随机数
var n =6;//定义步数 设置全局变量 可以自己修改 理论上7步是绝对能猜得到1-100的随机数的
var get1 = document.getElementById("get1");
var lost = document.getElementById("but");
function game(){
var now_guess = document.getElementById("guessNumber").value;
var reg=/^[1-9]\d*$|^0$/;  //判断值的类型 提示输入1-100的整数
if(reg.test(now_guess)==true)
{
var guess = parseInt(now_guess);//转换数据的类型
if(guess ==num){
bingo();
gameOver();
}
else if(guess>num)
{
n--;
tooHigh();
}
else
{
n--;
tooLow();
}
}

else
{
alert("请输入一个1-100的整数");
}
if(n==0) //判断每次点击后是否在规定步数内
{
gameOver();
alert("下次努力！数据是："+num);
}
}
function bingo(){
document.getElementById("tip").innerHTML="that's right";
document.getElementById("chishu").innerHTML="";
}
function tooHigh(){
document.getElementById("tip").innerHTML="有点大了兄弟";
document.getElementById("chishu").innerHTML="你还有"+n+"步";
document.getElementById("guessNumber").value="";
}
function tooLow(){
document.getElementById("tip").innerHTML="太小了兄弟";
document.getElementById("chishu").innerHTML="你还有"+n+"步";
document.getElementById("guessNumber").value="";
}
function gameOver(){

lost.style.display="None";
get1.style.display="None";
}

function reset(){
n = 6;
document.getElementById("guessNumber").disabled = true;
var lost = document.getElementById("but");

get1.style.display="";
document.getElementById("tip").innerHTML="";
document.getElementById("chishu").innerHTML="你还有"+n+"步";
num = getNum();
document.getElementById("guessNumber").value="";
}

function getNum(){
var rand = Math.floor(Math.random()*100+1);
return rand;
}
function get(){
document.getElementById("guessNumber").disabled = false;
num = getNum();
console.log(num);
get1.style.display="None";
lost.style.display="";
}
</script>
</body>
</html>


二、限制时间

<!doctype html>
<!--
用于调试，请在console中查看每次的随机值
-->
<html>
<head>
<meta charset="UTF-8">
<title>限制时间的猜数游戏</title>
<style type="text/css">
</style>
</head>
<body>
<div id="con">
<h3>每次猜数前请点击“获得随机数”，猜数的范围是1-100</h3>
预测帝,come on:<input type="text" id="guessNumber" disabled=true />
<input type="button" onclick="get()" value="获得随机数" id="get1"/>
<input type="button" onclick="game()" value="接下来就是见证奇迹的时刻" id="but" style="display:none;"/>
<input type="button" onclick="reset()" value="paly again" id="reset"/>
<p id="tip"></p>
<p id="yourTime"></p>
</div>
<script type="text/javascript">
var num;//获得随机数
var n = 30;//定义时间 设置全局变量 时间为30秒
var t;
var time = document.getElementById("yourTime");
function yourTime(){
n--;
time.innerHTML="你还有"+n+"秒";
t = setTimeout("yourTime()",1000);
if(n<=0)
{
gameOver();
alert("下次努力！数据是："+num);
clearTimeout(t);
}
}

var get1 = document.getElementById("get1");
var lost = document.getElementById("but");
function game(){
var now_guess = document.getElementById("guessNumber").value;
var reg=/^[1-9]\d*$|^0$/;
if(reg.test(now_guess)==true)
{
var guess = parseInt(now_guess);
if(guess ==num){
bingo();
gameOver();
}
else if(guess>num)
{
tooHigh();
}
else
{
tooLow();
}
}
else
{
alert("请输入一个1-100的整数");
}

}
function bingo(){
document.getElementById("tip").innerHTML="that's right";
}
function tooHigh(){
document.getElementById("tip").innerHTML="有点大了兄弟";
document.getElementById("guessNumber").value="";
}
function tooLow(){
document.getElementById("tip").innerHTML="太小了兄弟";
document.getElementById("guessNumber").value="";
}
function gameOver(){

lost.style.display="None";
get1.style.display="None";
clearTimeout(t);
}

function reset(){
document.getElementById("guessNumber").disabled = true;
n = 30;
get1.style.display="";
lost.style.display="None";
document.getElementById("tip").innerHTML="";
num = getNum();
document.getElementById("guessNumber").value="";
time.innerHTML="你还有"+n+"秒";
clearTimeout(t);
}

function getNum(){
var rand = Math.floor(Math.random()*100+1);
return rand;
}
function get(){
document.getElementById("guessNumber").disabled = false;
num = getNum();
console.log(num);
get1.style.display="None";
lost.style.display="";
yourTime();
}

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航