JS写的猜数的小游戏，一个是步数限制的，一个是限制时间的资源-CSDN下载

共2个文件

html：2个

需积分: 50 126 浏览量 2015-10-23 20:59:15 上传评论收藏 3KB ZIP 举报

在这个JS编写的猜数字游戏中，我们有两个不同的版本：一个是基于步数限制的，另一个是基于时间限制的。这个游戏的核心逻辑是让玩家在限定的条件下猜测一个由程序随机生成的数字。接下来，我们将深入探讨这两个版本的游戏实现以及它们涉及到的JS和HTML基础知识。对于步数限制的版本，游戏的主要流程可能如下： 1. **生成随机数**：使用JavaScript的`Math.random()`函数生成一个在特定范围内的随机整数。例如，如果范围是1到100，可以通过`Math.floor(Math.random() * 100) + 1`来生成。 2. **设定步数上限**：预先设定一个允许的最大猜测次数，比如10次。 3. **用户输入**：使用HTML创建一个输入框让用户输入他们的猜测，并添加一个按钮触发猜数的事件。 4. **事件监听**：在JavaScript中，使用`addEventListener('click', function)`监听按钮点击事件，当用户点击时，读取输入框的值并进行比较。 5. **比较和反馈**：将用户输入与随机数进行比较，如果猜对了，显示恭喜信息；如果猜错了，检查剩余步数，如果还有步数，提示用户继续猜测或显示失败信息。 6. **计步器**：每次用户猜测后，减去一次步数，直到达到预设的步数上限。对于时间限制的版本，游戏流程会有所改变： 1. **设定时间限制**：使用JavaScript的`setTimeout`或`setInterval`函数设置一个时间限制，例如60秒。 2. **开始计时**：当游戏开始时启动计时器，同时显示倒计时。 3. **用户输入和比较**：与步数限制版本类似，但在此版本中，用户需要在时间耗尽前猜出数字。 4. **结束条件**：当用户猜中或时间耗尽时，停止计时，显示结果。 5. **计时器控制**：使用`clearTimeout`或`clearInterval`在适当的时候停止计时器。这两个版本的游戏都涉及到JS的变量、条件语句（如`if...else`）、循环（可能用于计步或计时）、事件处理和DOM操作。HTML部分主要涉及创建用户界面元素，如`<input>`用于输入猜测，`<button>`用于触发事件，以及可能的`<p>`或`<div>`用于显示提示信息。在实际开发中，CSS可以用来增强用户体验，如通过样式设置按钮、输入框的外观，以及游戏成功或失败时的动画效果。尽管在这个例子中没有使用CSS，但它是构建具有吸引力的用户界面不可或缺的一部分。这两个猜数游戏实例展示了如何利用JavaScript进行简单的交互式应用开发，同时也涉及到了HTML的基础结构。这种练习有助于理解和熟练掌握JS的动态特性以及与HTML的协同工作。对于初学者来说，这是一个很好的实践项目，可以帮助他们巩固基础知识并提升编程技能。

资源推荐

资源详情

资源评论

收起资源包目录

Whpu猜数的两个实现.zip （2个子文件）

猜数的两个实现

Js猜数.html 3KB

Js时间限制.html 3KB

<!doctype html>  <html> <head> <meta charset="UTF-8"> <title>限制次数的猜数游戏</title> <style type="text/css"> </style> </head> <body> <div id="con"> <h3>每次猜数前请点击“获得随机数”</h3> 预测帝,come on:<input type="text" id="guessNumber" /> <input type="button" onclick="get()" value="获得随机数" id="get1"/> <input type="button" onclick="game()" value="接下来就是见证奇迹的时刻" id="but" style="display:none;"/> <input type="button" onclick="reset()" value="paly again" id="reset"/> <p id="tip"></p> <p id="chishu"></p> </div> <script type="text/javascript"> var num;//获得随机数 var n =5;//定义步数设置全局变量 var get1 = document.getElementById("get1"); var lost = document.getElementById("but"); function game(){ var now_guess = document.getElementById("guessNumber").value; var reg=/^[1-9]\d*$|^0$/; if(reg.test(now_guess)==true) { var guess = parseInt(now_guess); if(guess ==num){ bingo(); gameOver(); } else if(guess>num) { n--; tooHigh(); } else { n--; tooLow(); } } else { alert("请输入一个大于0-100的整数"); } if(n==0) //判断每次点击后是否在规定步数内 { gameOver(); alert("下次努力！数据是："+num); } } function bingo(){ document.getElementById("tip").innerHTML="NB,这都行,兄弟你可以去买彩票了"; document.getElementById("chishu").innerHTML=""; } function tooHigh(){ document.getElementById("tip").innerHTML="有点大了兄弟"; document.getElementById("chishu").innerHTML="你还有"+n+"步"; document.getElementById("guessNumber").value=""; } function tooLow(){ document.getElementById("tip").innerHTML="太小了兄弟"; document.getElementById("chishu").innerHTML="你还有"+n+"步"; document.getElementById("guessNumber").value=""; } function gameOver(){ lost.style.display="None"; get1.style.display="None"; } function reset(){ n = 5; var lost = document.getElementById("but"); get1.style.display=""; document.getElementById("tip").innerHTML=""; document.getElementById("chishu").innerHTML="你还有"+n+"步"; num = getNum(); document.getElementById("guessNumber").value=""; } function getNum(){ var rand = Math.round(Math.random()*99+1); return rand; } function get(){ num = getNum(); console.log(num);//为了测试 get1.style.display="None"; lost.style.display=""; } </script> </body> </html>

评论收藏

内容反馈