一个猜数字的小游戏,用JavaScript实现

最新推荐文章于 2019-12-23 20:26:44 发布

原创最新推荐文章于 2019-12-23 20:26:44 发布 · 3.8k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #JavaScript #弹窗 #猜数字 #随机数

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的猜数字小游戏，系统会根据玩家选择的难度生成随机数，玩家需通过输入数字来猜测，猜对后显示游戏用时。游戏提供初级（1-100）、中级（1-1000）和高级（1-10000）三种难度。

一个猜数字的小游戏,用JavaScript实现

一个猜数字的小游戏,系统产生一个随机数,范围由游戏难度决定,玩家输入数字进行猜测, 猜对后得到游戏花费时间.,三种游戏难度,初级(1-100),中级(1-1000),高级(1-10000)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>一个猜数字小游戏</title>
		<script type="text/javascript">
			var random=0; //随机数
			var start=0; //开始时间
			var end=0;  //结束时间
			function startTime(){
				start=new Date();
			}
			function endTime(){
				end=new Date();
			}
			//三种游戏模式,结束后在框体中输出所选游戏模式和成功完成游戏所花时间
			function primary(){
				random=parseInt(Math.random()*99+1);
				var timeprimary=startgame();
				document.getElementById("his").innerHTML="初级:"+timeprimary+"秒";
			}
			function middle(){
				random=parseInt(Math.random()*999+1);
				var timemiddle=startgame();
				document.getElementById("his").innerHTML="中级:"+timemiddle+"秒";
			}
			function high(){
				random=parseInt(Math.random()*9999+1);
				var timehigh=startgame();
				document.getElementById("his").innerHTML="高级:"+timehigh+"秒";
			}
			
			//如果没有输入按了确定或者取消,prompt仍然返回值 为空或空字符串,还有输入的值不是数字的时候,返回字符串"NULL"
			function shuru(){
				var temp=prompt("你猜");
				if(temp==""||temp==null){
					alert("不能输入为空");
					return "NULL";
				}else{
					if(isNaN(temp)){
						return "NULL";
					}else{
						return parseInt(temp);
					}
				}
			}
			
			//当识别到输入出错(返回值为字符串"NULL")时,提示错误,返回Error,否则进行判断
			function jiaoyan(){
				var que=shuru();
				if(que!="NULL"){
					if(que==random){
						alert("恭喜你回答正确");
						return true;   
					}else if(que>random){
						alert("输入大了");
						return false;
					}else{
						alert("输入小了");
						return false;
					}
				}else{
					alert("请重新开始游戏");
					return Error; 
				}
			}
			
			//当校验返回的值为Error时返回一个无穷大时间同时结束了函数继续运行,当校验返回的值为false时说明输入错误,继续弹框输入,为true时,输入正确,结束循环,并计算用时
			function startgame(){
				startTime();
				var a=false;
				while(!a){
					a=jiaoyan();
					if(a==Error){
						return 9999;
					}
				}
				endTime();
				var time=(end-start)/1000;
				alert("用时"+time+"秒");
				return time;
			}
		</script>
		
		<style type="text/css">
			#his{
				font-size: 20;
				width: 150px;
				height: 25px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div>
			一个猜数字小游戏
			<br />
			选择难度,初级(1-100),中级(1-1000),高级(1-10000)
			<br />
			<input type="button" value="初级" onclick="primary()"/>
			<input type="button" value="中级" onclick="middle()"/>
			<input type="button" value="高级" onclick="high()"/>
			<div id="his">
				
			</div>
		</div>
	</body>
</html>