基于html的猜数字游戏设计
一、原示例代码
主界面代码
<!DOCTYPE html>
<html>
<head>
<!--设置字体格式为utf-8-->
<meta charset="UTF-8">
<title>实验三、猜数</title>
<!--导入外部41shwHangman.css文件-->
<link href="Guessthenumbe.css" type="text/css" rel="stylesheet" />
<!--引入外部41shwHangman.js文件-->
<script src="Guessthenumbe.js" type="text/javascript"></script>
</head>
<body>
<div id="page">
<div id="title">
<!--第一段欢迎来到在页面上居中显示-->
欢迎来到<br />
<!--第二段猜数字游戏在页面上居中显示-->
猜数字游戏<br />
</div>
<div id="random">
<div id="Tips">
</div>
<div id="Init">
<!--默认打开为初始化.jpg图片,在浏览器无法载入图像时,替换文本属性告诉失去的信息。-->
<img src="初始化.jpg" alt="hangman" /><br></div>
</div>
</div>
<div id="new">按“开始”按钮重新开始游戏!</div>
<div>
<div id="submit" align="center">
<!--get提交：数据会显示在浏览器的地址栏,数据大小有限制-->
<form action="#" method="get">
<!--填写所猜数字的文本框-->
<input type="text" id="guessNum" name="guessNum" />
<!--提交所填写到文本框中的数字-->
<input type="button" id="guess" name="guess" onclick="checknum()" value="提交" />
<button onclick="begin();">开始</button>
</form>
</div>
<!--猜测数据记录显示-->
<div id="guesses"><br /></div>
</div>
</body>
</html>
比较大小代码
if (s1 > ran) {
//所猜测的数值，大了
document.getElementById("Tips").innerHTML =" 大了";
s--; //猜测次数每次减1
document.getElementById("Init").innerHTML="<img src='猜大了.jpg' />";
guesses+=s1+"\n";
guessArea.innerHTML="猜过的数字:"+guesses;
} else if(s1 < ran){
//所猜测的数值，小了
document.getElementById("Tips").innerHTML = " 小了";
s--; //猜测次数每次减1
document.getElementById("Init").innerHTML="<img src='猜小了.jpg' />"; //输出相应的数值小了的图片
guesses+=s1+"\n";
guessArea.innerHTML="猜过的数字:"+guesses;
}
else{
//所猜测的数值正确，游戏结束
document.getElementById("Tips").innerHTML ="! 正确，游戏结束" ;
s=-1; //此时将所猜测数置为-1，游戏结束的标记
document.getElementById("Init").innerHTML="<img src='成功了.jpg' />"; //显示数值输入正确时的图片
guesses+=s1+"\n";
guessArea.innerHTML="猜过的数字:"+guesses;
}
主界面
挑战失败
猜测数字太小
猜测数字太大
挑战成功
完整源代码和文件：
[猜数字游戏源代码]
(https://download.csdn.net/download/qq_45171581/83623676)