JavaScript 实现猜数字小游戏:逻辑与代码详解

作者:异步漫步

时间:2026-10-31

浏览:418

本文介绍如何使用 JavaScript 开发一个简单的猜数字游戏。通过生成 1 到 100 的随机整数,结合 for 循环限制 10 次尝试机会,并利用 prompt 和 parseInt 处理用户输入。文章详细解析了 Math.random 与 Math.floor 的配合使用、循环控制及条件分支逻辑,帮助开发者巩固基础语法与逻辑思维。

文章目录

引言:

在编程学习中,通过动手实践小型项目来巩固所学知识是高效的学习路径。本文将展示如何利用 JavaScript 编写一个基础的猜数字游戏。该实践不仅有助于掌握 JS 基础语法,还能有效提升逻辑思维能力。

游戏规则

系统会随机生成一个介于 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 用于追踪用户的猜测次数,初始值设为 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,以确保玩家仅有 10 次机会。在循环体的第一步,使 (次数计数器)加 1。

for (let i = 0; i < 10; i++) {
    /* 每次循环+1次 */
    guessFois++;
}

3. 声明变量 用于存储用户的猜测值,并通过 if...else if...else 结构进行逻辑判断:区分猜对、猜大或猜小的情况。

调用 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 猜数字内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章