一. 游戏简介
在输入框内输一个数字,点击后面的“猜”按钮,系统会根据你猜的数字的大小,返回你是猜大猜小还是猜正确,系统还会统计你猜的次数,在猜数字的途中你点击按钮随时可以重新开始游戏
二. 页面预览
因为是简易版,所以没有太多的样式
猜数字之前:
猜小了:
猜大了:
猜对了:
三. 页面实现
页面框架:
<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猜数字游戏的资料请关注阿兔在线工具其它相关文章!