基于JS制作一个网页版的猜数字小游戏
作者：Java猿~
这篇文章主要为大家详细介绍了如何利用HTML+CSS+JavaScript实现一个简单的网页版的猜数字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一. 游戏简介
在输入框内输一个数字，点击后面的“猜”按钮，系统会根据你猜的数字的大小，返回你是猜大猜小还是猜正确，系统还会统计你猜的次数，在猜数字的途中你点击按钮随时可以重新开始游戏
二. 页面预览
因为是简易版，所以没有太多的样式
猜数字之前：
猜小了：
猜大了：
猜对了：
三. 页面实现
页面框架：
<body>
<div id="i1">
<span>请输入您猜的数字：</span>
<input type="text" id="text">
<input type="button" value="猜" id="guess">
<br>
<span>您已经猜的次数：</span>
<span id="count">0</span>
<br>
结果：<span class="c1"></span>
<br>
<br>
<input type="button" value="重新开始游戏" id="reBu">
</div>
</body>页面简单样式：
#i1 {
box-sizing: border-box;
width: 400px;
height: 300px;
border-style: dashed;
border-color:blue;
padding: 85px;
margin-top: 150px;
margin-left: 500px;
}
四. 功能实现
使用document.querySelector()获取页面上的元素：
var text = document.querySelector("#text");//获取输入元素
var count = document.querySelector("#count");//获取次数元素
var result = document.querySelector(".c1");//获取结果元素
var guessBu = document.querySelector("#guess");//获取“猜”按钮元素
var reBu = document.querySelector("#reBu");//获取“重新开始”按钮元素
var sum = 0;//猜的总次数
生成随机数：
var guessNumber = Math.floor(Math.random()*100)+1;//生成随机数
说明：Math.random()随机生成[0,1)的数字，乘上100范围为[0,100)，加上1，范围为[1,101)，使用Math.floor()去掉小数部分，最后生成数字的范围为[0,100]
给“猜”按钮绑定点击事件：
- 点击按钮后，启动比较功能
- 首先将猜的总次数sum++，并将sum设置到页面中
- 需要先用parseInt()将输入框的内容转为整数，再进行比较
- 若输入的数大，则将提示颜色调整为红色，并设置到页面中
- 若输入的数小，则将提示颜色调整为红色，并设置到页面中
- 若输入的数为系统生成的随机数，则将提示信息调整为绿色，并设置到页面中
guessBu.onclick = function(){ //给“猜”按钮绑定点击功能
sum++;
count.innerHTML = sum;
var userGuess = parseInt(text.value);//获取输入的数字
if(userGuess > guessNumber){ //如果输入大于系统生成数字
result.innerHTML = "很遗憾，您猜大了！";
result.style.color = "red"; //调正颜色为红色
}else if(userGuess < guessNumber){//如果输入小于系统生成数字
result.innerHTML = "很遗憾，您猜小了！";
result.style.color = "red";
}else { //输入等于系统生成数字
result.className = "c2";
result.innerHTML = "恭喜您，您猜对了！";
result.style.color = "green";//调整颜色为绿色
}
}给“重新开始游戏”按钮绑定点击事件：
- 首先重新生成随机数
- 再将猜测的总次数置0，并设置到页面中
- 再将提示信息置空，并设置到页面中
- 最后将输入框数字置空，并设置到页面中
reBu.onclick = function(){//给“重新开始”按钮绑定点击事件
guessNumber = Math.floor(Math.random()*100)+1;//重新生成随机数
sum = 0;//猜的总次数置0
count.innerHTML = sum;//将0填充
result.innerHTML = "";//结果置空
text.value = "";//输入框置空
}
五. 参考源码
拿来即可在自己电脑上运行，大家快来试试吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜数字游戏！！！</title>
<style>
#i1 {
box-sizing: border-box;
width: 400px;
height: 300px;
border-style: dashed;
border-color:blue;
padding: 85px;
margin-top: 150px;
margin-left: 500px;
}
</style>
</head>
<body>
<div id="i1">
<span>请输入您猜的数字：</span>
<input type="text" id="text">
<input type="button" value="猜" id="guess">
<br>
<span>您已经猜的次数：</span>
<span id="count">0</span>
<br>
结果：<span class="c1"></span>
<br>
<br>
<input type="button" value="重新开始游戏" id="reBu">
</div>
</body>
<script>
var text = document.querySelector("#text");//获取输入元素
var count = document.querySelector("#count");//获取次数元素
var result = document.querySelector(".c1");//获取结果元素
var guessBu = document.querySelector("#guess");//获取“猜”按钮元素
var reBu = document.querySelector("#reBu");//获取“重新开始”按钮元素
var guessNumber = Math.floor(Math.random()*100)+1;//生成随机数
var sum = 0;//猜的总次数
guessBu.onclick = function(){ //给“猜”按钮绑定点击功能
sum++;
count.innerHTML = sum;
var userGuess = parseInt(text.value);//获取输入的数字
if(userGuess > guessNumber){ //如果输入大于系统生成数字
result.innerHTML = "很遗憾，您猜大了！";
result.style.color = "red"; //调正颜色为红色
}else if(userGuess < guessNumber){//如果输入小于系统生成数字
result.innerHTML = "很遗憾，您猜小了！";
result.style.color = "red";
}else { //输入等于系统生成数字
result.className = "c2";
result.innerHTML = "恭喜您，您猜对了！";
result.style.color = "green";//调整颜色为绿色
}
}
reBu.onclick = function(){//给“重新开始”按钮绑定点击事件
guessNumber = Math.floor(Math.random()*100)+1;//重新生成随机数
sum = 0;//猜的总次数置0
count.innerHTML = sum;//将0填充
result.innerHTML = "";//结果置空
text.value = "";//输入框置空
}
</script>
</html>以上就是基于JS制作一个网页版的猜数字小游戏的详细内容，更多关于JS猜数字游戏的资料请关注脚本之家其它相关文章！