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

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

2012-04-13 14:10 323 查看

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

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航