JavaScript实现猜数字小功能

 更新时间:2025年01月26日 09:58:41   作者:Enti7c  
本文主要介绍了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 猜数字内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS对象数组排序方法测试代码示例

    JS对象数组排序方法测试代码示例

    这篇文章主要给大家介绍了关于JS对象数组排序方法测试的相关资料,在  相信大家对数组排序都不陌生,在开发中我们通常会使用sort方法进行数组的排序,需要的朋友可以参考下
    2024-06-06
  • JS克隆,属性,数组,对象,函数实例分析

    JS克隆,属性,数组,对象,函数实例分析

    这篇文章主要介绍了JS克隆,属性,数组,对象,函数,结合实例形式分析了javascript中面向对象程序设计相关的对象、属性、函数及数组等相关技巧,需要的朋友可以参考下
    2016-11-11
  • 微信小程序之左右布局的实现代码

    微信小程序之左右布局的实现代码

    这篇文章主要介绍了微信小程序之左右布局的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • JS Web Flex弹性盒子模型代码实例

    JS Web Flex弹性盒子模型代码实例

    这篇文章主要介绍了JS Web Flex弹性盒子模型代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • swiper移动端轮播插件(触碰图片之后停止轮播)

    swiper移动端轮播插件(触碰图片之后停止轮播)

    这篇文章主要为大家详细介绍了swiper移动端轮播插件,触碰图片之后停止轮播,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • 利用JS延迟加载百度分享代码,提高网页速度

    利用JS延迟加载百度分享代码,提高网页速度

    相信大家经常在一些网站上看到有快捷分享到各大流行网站的按钮,目前流行的有JiaThis、百度分享、Bshare等,目前用百度分享的居多
    2013-07-07
  • JavaScript制作简易的微信打飞机

    JavaScript制作简易的微信打飞机

    这篇文章主要介绍了JavaScript制作简易的微信打飞机,只有简单的功能,大神们可以自由扩展哈。有需要的小伙伴可以参考下。
    2015-03-03
  • threejs全景图和锚点编辑的实现方案

    threejs全景图和锚点编辑的实现方案

    大家都知道可以利用Threejs中的立方体或者球体实现全景图功能,下面这篇文章主要给大家介绍了关于threejs全景图和锚点编辑的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • asp.net和asp下ACCESS的参数化查询

    asp.net和asp下ACCESS的参数化查询

    最近因项目需要用ACCESS做数据库开发WEB项目看论坛上还许多人问及ACCESS被注入的安全问题 许多人解决的方法仍然是用Replace替换特殊字符,然而这样做也并没有起到太大做用
    2008-06-06
  • javascript的防抖节流函数解析

    javascript的防抖节流函数解析

    这篇文章主要为大家介绍了javascript防抖节流函数,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01

最新评论