<!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>
.container {
margin: auto auto;
width: 600px;
height: 400px;
}
.title_style {
font-size: 50px;
color: rgb(209, 21, 21);
}
.gametitle {
color: #000;
}
.display {
display: flex;
flex-direction: column;
text-align: center;
}
.style2 {
margin-left: 10%;
}
.m {
width: 300px;
height: 30px;
}
.m2 {
width: 80px;
height: 35px;
border: 1px solid black;
}
#buttonrestrat {
display: none;
}
#buttonStart {
display: inline-block;
}
.m2:hover {
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="container">
<div class="display">
<div>
<h1 class="title_style">猜数游戏</h1>
</div>
<div class="gametitle">
<h1>请输入一个0-100之间的随机整数：</h1>
</div>
<div>
<input type="text" class="m" id="buttonAction" value="">
<input type="button" class="m2" id="buttonSubmit" onclick="GetData()" value="提交">
<input type="button" class="m2" id="buttonStart" onclick="randomnum()" value="开始">
<input type="button" class="m2" id="buttonrestrat" value="重新开始">
</div>
</div>
<div class="style2">
<div>
<h2>结果: <span id="gameresult"></span></h2>
</div>
<div>
<h2>当前还可以猜测次数：<span id="gamescore"></span>   次</h2>
</div>
</div>
</div>
</body>
<script>
var getrandom = 0
var time = 10
var usedtime = 0
gamescore.innerText = time
//定义生成随机数方法，返回0-100随机整数
let randomnum = () => {
let getr = Math.floor(Math.random() * 100)
console.log(getr);
getrandom = getr;
alert("游戏已经开始啦")
time = 10
usedtime = 0
gamescore.innerText = time - usedtime
}
//定义获取html数据
let GetData = () => {
this.buttonAction = document.querySelector('#buttonAction');
this.buttonSubmit = document.querySelector('#buttonSubmit');
this.gameresult = document.querySelector('#gameresult');
//开始游戏后可选择重新开始游戏
this.gamestart = document.querySelector('#buttonStart');
this.gamerestart = document.querySelector('#buttonrestrat');
this.gamestart.style.display = "none"
this.gamerestart.style.display = "inline-block"
gamerestart.addEventListener('click', function () {
window.location.reload()
})
//判断用户输入数字是否为规定范围
let GetNum = this.buttonAction.value;
if (parseInt(GetNum) > 100 || parseInt(GetNum) < 0) {
this.gameresult.innerText = "请输入一个0-100的数字哦~~~"
}
else {
//定义判断用户输入数字是大还是小了，返回提示及剩余次数
if (GetNum > this.getrandom) {
this.gameresult.innerText = "大了一点哦"
usedtime = usedtime + 1
}
if (GetNum < this.getrandom) {
this.gameresult.innerText = "小了一点哦"
usedtime = usedtime + 1
}
if (GetNum == this.getrandom) {
this.gameresult.innerText = "━(*｀∀´*)ノ----> 恭喜，你答对啦！(*^▽^*)"
}
}
//定义用户可用次数用尽，重新开始游戏
gamescore.innerText = time - usedtime
if ((time - usedtime) == 0) {
this.buttonAction.value = " "
alert("机会已经用完啦，再尝试一次吧 ヾ(◍°∇°◍)ﾉﾞ")
window.location.reload()
}
}
</script>
</html>
