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

来源：互联网发布：web工程师和java哪个好编辑：程序博客网时间：2024/06/05 20:08

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

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

以下是我的源码，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版的猜数字，代码相对复杂些，将近两千行代码，不久我也会贴到空间中。