JavaScript实现猜数字小功能
目录
引言:
在学习编程的过程中,通过实际的小项目来巩固知识是非常有效的方法。今天,我们将使用 JavaScript 来实现一个简单的猜数字游戏。这个游戏不仅能让我们熟悉 JavaScript 的基本语法,还能锻炼我们的逻辑思维能力。
游戏规则
游戏会随机生成一个 1 到 100 之间的整数,玩家有 10 次机会来猜出这个数字。每次猜测后,程序会给出相应的提示,告诉玩家猜大了、猜小了还是猜对了。如果 10 次机会用完仍未猜对,程序会显示正确答案。
效果图:
代码实现:
let getNumber = Math.floor(Math.random() * 100) + 1; let guessFois = 0; /* 次数 */ for (let i = 0; i < 10; i++) { /* 每次循环+1次 */ guessFois++; let guess = parseInt(prompt("请输入1 - 100之间的数字")); if (guess == getNumber) { alert("猜对了"); break; } else if (guess < getNumber) { alert("猜小了"); } else { alert("猜大了"); } if (i == 9) { alert("10次机会用完了,正确数字是 " + getNumber + " ,下次再试试吧。"); } }
代码详细解释:
1.首先在全局声明并赋值guessFois(总次数)与getNumber(随机数)。
-guessFois
用于记录用户猜测的次数,初始值为 0。
-Math.random()
是 JavaScript 内置的函数,它会生成一个 0(包含)到 1(不包含)之间的随机小数。乘以 100 后,得到的结果是一个 0(包含)到 100(不包含)之间的随机小数。
-Math.floor()
函数用于向下取整,将这个随机小数转换为整数。最后加上 1,得到一个 1 到 100 之间的整数,作为要猜测的目标数字。
let getNumber = Math.floor(Math.random() * 100) + 1; let guessFois = 0; /* 次数 */
2. 利用for循环遍历,并且i小于10,实现只有十次机会,for循环里第一步使guessFois(次数)加一
for (let i = 0; i < 10; i++) { /* 每次循环+1次 */ guessFois++; }
3. 声明guess为猜测数字的弹窗,并且给出if else if条件判断:猜对了/猜大了/猜小了。
使用 prompt()
函数弹出一个输入框,让用户输入一个数字。parseInt()
函数将用户输入的字符串转换为整数,赋值给变量 guess
。
for (let i = 0; i < 10; i++) { /* 每次循环+1次 */ guessFois++; let guess = parseInt(prompt("请输入1 - 100之间的数字")); if (guess == getNumber) { alert("猜对了"); break; } else if (guess < getNumber) { alert("猜小了"); } else { alert("猜大了"); } }
当循环到第 10 次(即 i
等于 9)时,说明 10 次机会已经用完,弹出提示框显示正确答案和提示信息。
for (let i = 0; i < 10; i++) { /* 每次循环+1次 */ guessFois++; let guess = parseInt(prompt("请输入1 - 100之间的数字")); if (guess == getNumber) { alert("猜对了"); break; } else if (guess < getNumber) { alert("猜小了"); } else { alert("猜大了"); } if (i == 9) { alert("10次机会用完了,正确数字是 " + getNumber + " ,下次再试试吧。"); } }
总结
通过这个简单的猜数字游戏,我们学习了如何使用 JavaScript 生成随机数、处理用户输入、使用循环和条件语句进行逻辑判断。
到此这篇关于JavaScript实现猜数字小功能的文章就介绍到这了,更多相关JavaScript 猜数字内容请搜索科站长以前的文章或继续浏览下面的相关文章希望大家以后多多支持科站长!
您可能感兴趣的文章
- 02-11js中基本事件的总结(onclick、onblur、onchange等)
- 02-11详解如何在Node.js中使用中间件处理请求
- 02-11Vue3中Provide和Inject的用法及工作原理详解
- 02-11Vue+vant实现图片上传添加水印
- 02-11快速解决 keep-alive 缓存组件中定时器干扰问题
- 02-11uniapp 使用 tree.js 解决模型加载不出来的问题及解决方法
- 02-11基于uniapp vue3 的滑动抢单组件实例代码
- 02-10JavaScript 中的 Map使用指南
- 02-10vue3中使用print-js组件实现打印操作步骤
- 02-10Vue 中v-model的完整用法及v-model的实现原理解析


阅读排行
推荐教程
- 04-23JavaScript Array实例方法flat的实现
- 04-23THREE.JS使用TransformControls对模型拖拽的代码实例
- 04-23Vue3使用v-if指令进行条件渲染的实例代码
- 04-23vue3+ts项目搭建的实现示例
- 04-23JavaScript实现下载超大文件的方法详解
- 04-23vue如何使用pdf.js实现在线查看pdf文件功能
- 04-23vue.js调用python脚本并给脚本传数据
- 12-18使用JavaScript遍历输出页面中的所有元素的方法详解
- 04-23JS加密解密之保存到桌面书签
- 12-18Vue实现滚动加载更多效果的示例代码