“猜数字”游戏的框架程序（javascript版）

最新推荐文章于 2022-08-27 12:14:12 发布

Colie-Li

最新推荐文章于 2022-08-27 12:14:12 发布

阅读量2.5k

点赞数 1

分类专栏：前端技术文章标签： javascript 游戏框架 function jquery input

本文链接：https://blog.csdn.net/guvcolie/article/details/7457624

版权

前端技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

想必大家小时候都玩过文曲星上的“猜数字”游戏，当时就想什么时候能自己把这个游戏搞出来，转眼之间已成研究生，好快。

以下是我在大学时编写的“猜数字”程序，原理很简单。首先游戏初始化时要自动生成四位不相同的数字，并初始化游戏界面（我做的界面很简单），输入自己要猜的数字，点击猜数字按钮进行猜，而且在猜之前我们还要进行一些格式检测，比如是否输入四位数字？是否各不相同？是否有字母输入等等。当格式检测正确后，将输入的四位数跟生成的四位随机数比对输出结果。

以下是我的源码，javascript语言编写的，代码很短，而且比较容易理解。

// JavaScript Document
$(document).ready(function(){
	
	//刷新时要清空text框中的内容
	$("#guessBox").val("");
	$("#textResult").val("");
	
	//定义变量
	var randomNumber;
	var randomResult=new Array(4);
	
	//获取最高位（千位）
	randomNumber=Math.random()*10;
	randomNumber=Math.floor(randomNumber);
	randomResult[3]=randomNumber;
	
	//获取百位
	do{
		randomNumber=Math.random()*10;
		randomNumber=Math.floor(randomNumber);
	}	while(randomNumber==randomResult[3]);
	randomResult[2]=randomNumber;
	
	//获取十位
	do{
		randomNumber=Math.random()*10;
		randomNumber=Math.floor(randomNumber);
	}	while(randomNumber==randomResult[3]||randomNumber==randomResult[2]);
	randomResult[1]=randomNumber;
	
	//获取个位
	do{
		randomNumber=Math.random()*10;
		randomNumber=Math.floor(randomNumber);
	}	while(randomNumber==randomResult[3]||randomNumber==randomResult[2]||randomNumber==randomResult[1]);
	randomResult[0]=randomNumber;
	
	//显示系统生成的四位随机数
	$("#buttonResult").click(function(){
		//下面的代码不能显示千位为0的四位数，所以改为字符串
		//var numberResult=randomResult[3]*1000+randomResult[2]*100+randomResult[1]*10+randomResult[0];
		var numberResult=String(randomResult[3])+randomResult[2]+randomResult[1]+randomResult[0];
		$("#textResult").val(numberResult);
	});
	
	//定义变量
	var inputContent;
	var inputNumber;
	var guessResult=new Array(4);
	var stringResult="";
	
	
	//判断是否为数字字符串
	$("#guessButton").click(function(){
		
		//检测输入的字符串是否为数字
		inputContent=$("#guessBox").val();
		if(isNaN(inputContent)){
			alert("请输入一个合法的4位数！");
			$("#guessBox").val("");
			return;
		}
		
		//检测输入的数字字符串是否为4位
		if(inputContent.length!=4){
			alert("输入的数字要为4位数！");
			return;
		}
		
		
		//获取输入的4位数的每一位
		inputNumber=inputContent.charAt(0);
		guessResult[3]=inputNumber;
		inputNumber=inputContent.charAt(1);
		guessResult[2]=inputNumber;
		inputNumber=inputContent.charAt(2);
		guessResult[1]=inputNumber;
		inputNumber=inputContent.charAt(3);
		guessResult[0]=inputNumber;
		
		//检测这4位数字是否互不相同
		var i,j;
		for(i=0;i<=3;i++){
			for(j=i+1;j<=3;j++){
				if(guessResult[i]==guessResult[j]){
					alert("请输入一个各位互不相同的4位数！");
					return;	
				}
			}
		}
		
		//将每位的字符转换为数字
		for(i=0;i<=3;i++){
			guessResult[i]=parseInt(guessResult[i]);	
		}
		
		//检测有几个“A+B含有”数
		var numA=0,numBplusA=0,numB=0;
		for(i=0;i<=3;i++){
			for(j=0;j<=3;j++){
				if(randomResult[i]==guessResult[j]){
					numBplusA++;
				}
			}
		}
		
		//检测有几个“A含有”数
		for(i=0;i<=3;i++){
			if(randomResult[i]==guessResult[i]){
					numA++;
				}
		}
		
		//计算出有几个“B含有”数
		numB=numBplusA-numA;
		
		//显示结果
		stringResult+=""+guessResult[3]+guessResult[2]+guessResult[1]+guessResult[0]+" "+numA+"A"+numB+"B"+"<br>";
		$("#divResult").html(stringResult);
		
		//清空输入框中的数字，而且使焦点指向输入框，减少用户操作
		$("#guessBox").val("").focus();
	});	
});

下面是我的HTML源码

<!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="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="guessNumber.js"></script>
<title>无标题文档</title>
</head>

<body>
	<div>开始游戏！！</div>
	<input type="button" value="生成的4位系统随机数为：" id="buttonResult"/>
    <input type="text" id="textResult"></input>
    
    <p><p>
    <input type="text" id="guessBox" maxlength="4"></input>
    <input type="button" id="guessButton" value="猜！"></input>
    
    <p><p>
    <div id="divResult" ></div>
</body>
</html>

我的程序是基于JQuery框架的，所以事先要下载jquery框架。

后来我把这个程序改写为Android版的猜数字，代码相对复杂些，将近两千行代码，不久我也会贴到空间中。

Colie-Li

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
“猜数字”游戏的框架程序（javascript版）

想必大家小时候都玩过文曲星上的“猜数字”游戏，当时就想什么时候能自己把这个游戏搞出来，转眼之间已成研究生，好快。以下是我在大学时编写的“猜数字”程序，原理很简单。首先游戏初始化时要自动生成四位不相同的数字，并初始化游戏界面（我做的界面很简单），输入自己要猜的数字，点击猜数字按钮进行猜，而且在猜之前我们还要进行一些格式检测，比如是否输入四位数字？是否各不相同？是否有字母输入等等。当格式检测正确后
复制链接

扫一扫

专栏目录