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+"次机会!");
}
}
}
}
2.1.3 成果展示
- 输入界面
- 提示界面
- 猜对界面
- 输入非法界面提示
- 次数用完提示界面