JS基础-任务-实战训练3(猜数字)

最新推荐文章于 2024-05-23 23:33:04 发布

i初学者i

最新推荐文章于 2024-05-23 23:33:04 发布

阅读量807

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_54075643/article/details/125958716

版权

1.1 任务目标

本任务旨在编写一个基于浏览器的猜数字小游戏。通过本任务，您可以练习for循环、条件分支、变量命名、Math内置对象等相关知识点。

1.2 任务说明

猜数字游戏会生成一个0-100之间的随机整数，让用户来猜这个数字是多少。该游戏需要让用户可以输入数字（使用prompt函数来实现），并且给用户结果提示（使用alert函数实现），结果提示中包含用户这次猜的数字是大了还是小了。

1.3 具体要求

生成一个0-100随机整数
接收用户输入
判断用户输入和这个数字的大小并给出提示
重复执行第2和第3步若干次。例如10次
如果用户执行完10次仍没有猜中，结束游戏；若用户中途就猜中也结束游戏；若用户在使用prompt函数弹出的输入框中点击取消也结束游戏

2.1 任务分析

2.1.1 界面分析

首先从效果展示上分析出一个简单的html界面，由一个按钮组成，按钮绑定了点击事件，然后点击会进行猜数字功能
html界面代码如下：

<!DOCTYPE html>
<html lang="zh">
<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>
</head>
<body>
    <input type="button" value="点一下猜数字" id = 'btn1'>
    <script src="./js/demo3.js"></script>
</body>
</html>

效果图：
在这里插入图片描述

2.1.2 猜数字功能分析

因为要生成随机0~100之间的整数，所以用到随机函数Math.random()
要接收用户输入，所以要用到prompt() 函数，prompt函数会向用户展示一个输入框，用户输入内容后点击确认，用户输入的值即为该函数的返回值。可以使用这个函数来接收用户的输入。
因为判断用户输入的数字，并且给出提示，所以要用到alert()函数，alert函数会向用户展示一段文本。
具体的js代码如下：

var btn = document.getElementById('btn1');
btn.onclick = guessNum;

function guessNum(){
    // 设置一个初始值为true的标志位，用于猜数字的循环
    var flag = true;
    // 可以猜的次数初始为10
    var frequency = 10;
    // 随机生成一个被猜的数字
    var num = Math.floor(Math.random()*100);
    while(flag)
    {
         var gNum=prompt("请输入您猜的数字:");
        //  如果猜的数字和随机生成的数字一样，标志位设为false，跳出循环
         if (gNum == num) {
         document.write("你好，数字是" +num + "！恭喜你，答对了！")
         flag = false;
        }
        else if(gNum > num){
            --frequency;
            if(frequency == 0)
            {
                alert("对不起，您的机会用完了，请下次再来！");
                flag = false;
            }else{
                 alert("再接再厉，您的数字大了，您还有"+frequency+"次机会！");
            }
           
        }
        // 判断是否取消猜数字，如果取消，则跳出猜数字的循环
        else if(gNum === null)
        {
            flag = false;
        }
        // 判断输入的是否是数字或者整数
        else if(isNaN(gNum) || gNum % 1 != 0)
        {
            alert("请您输入整数！");
        }
        else if(gNum < num){
            --frequency;
            if(frequency == 0)
            {
                alert("对不起，您的机会用完了，请下次再来！");
                flag = false;
            }else{
                 alert("再接再厉，您的数字小了，您还有"+frequency+"次机会！");
            }
        }
       
      
    }
   
}