目录
前言
今天我们使用JavaScript来做一个猜数字小游戏。
一、猜1-100中的数字
实现效果:随机生成一个一到一百的整数,由玩家进行猜测,总共设置了五次机会,每次猜完结束都要提醒玩家是否猜对,猜的结果是大了还是小了并将结果显示出来。
二、实现效果图
效果图如下:
我将设置游戏次数为5次 玩家用完则弹出游戏结束并设置玩家不能再次输入,禁用表单文本输入和按钮,防止用户在游戏结束后提交更多的猜测,否则游戏的规则将会被破坏。
三、实现方法
1.随机生成一个1到100的整数,使用Math.random()方法。
2.需要一直猜到正确为止,所以使用的是while循环更简单
3.核心方法:使用else if多分支语句来判断大于,小于,等于
四,实现代码
<!DOCTYPE html>
<html lang="en">
<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>
<style>
body{
width: 50%;
max-width: 800px;
min-width: 480px;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>猜数字游戏</h1>
<div>
我随机选定了一个100以内的数字,看你是否能在10次以内猜中,
每次我都会告诉你所猜的结果是大了还是小了
<p>你总共有5次机会哦!</p>
</div>
<br>
<div class="s1">
<label for="guessfiled">请猜数:</label>
<input type="text" id="guessfiled" class="Guessfiled">
<input type="submit" value="确定" id="guesssubmit" class="Guesssubmit">
</div>
<div id="resultparas">
<p id="lastresult"></p>
<p class="guess"></p>
<p id="low"></p>
<p id="low1"></p>
</div>
</body>
</html>
<script>
const guess1=document.querySelector('.guess')
let secret=Math.floor(Math.random()*100)+1;
let guesscount=1;
function Random(){
var userguess=Number(guessfiled.value);
if(guesscount===1){
guess1.textContent='上次猜的数:'
}
guess1.textContent += userguess + ' ';
if(userguess===secret){
lastresult.textContent= '猜对了'
lastresult.style.backgroundColor='green' //将<p>标签改颜色
}else if(guesscount===5){
lastresult.textContent='!!!GAME OVER!!!'
guessfiled.disabled=true
guesssubmit.disabled=true
lastresult.style.backgroundColor = 'yellow';
}
else{
lastresult.textContent = '你猜错了!';
lastresult.style.backgroundColor = 'red';
if(userguess>secret){
low.textContent='你猜大了'
}else if(userguess<secret){
low.textContent='你猜小了'
}
}
guesscount++;
guessfiled.value=' '
guessfiled.focus()
}
guesssubmit.addEventListener('click',Random);
</script>