下面是游戏设计要求：
游戏随机选择一个 100 以内的自然数, 然后让玩家猜出这个数字。每轮告诉玩家他猜数字高了还是低了，直到猜出数字为止。
代码实现
通过上述游戏要求，我们来探索如何将上述要求转换为代码。
初始设置
包含一个游戏标题，一个用于输入内容输入框，一个提交按钮，以及
一个提示游戏的游戏说明
<body>
<h1>Guess the Number</h1>
<div class="input-group">
<input type="number" id="guessInput" placeholder="Enter you guess" min="1" max="100">
<button id="submitBtn">submit</button>
</div>
<div class="result" id="result"></div>
</body>
下面是添加的css样式。
<style>
h1{
position: absolute;
left: 40%;
color: #1b44ee;
}
.input-group{
position: relative;
}
#guessInput{
width: 111px;
height: 60px;
position: absolute;
top: 80px;
left: 41%;
border-radius: 50px;
}
#submitBtn{
width: 111px;
height: 60px;
background: #1b44ee;
color: #ffffff;
position: absolute;
top: 80px;
left: 51%;
border-radius: 50px;
}
.result{
text-align: center;
position: absolute;
left: 38%;
top: 170px;
}
</style>
最终实现效果。
JS部分
首先声明一个100以内的随机数
Math.floor是向下取整这样2.1与2.9就没有区别了然后使用 Math.random() 函数生成一个介于 0 和 1 之间的随机数，乘以 101 并向下取整，得到一个介于 0 和 100 之间的随机整数，并将其赋值给变量 targetNumber。
然后定义一个guessCount 用来记录游戏次数，初始值为0，当游戏结束时输出。
const targetNumber = Math.floor(Math.random()*101)
let guessCount = 0
const guessInput = document.getElementById('guessInput')
const submitBtn= document.getElementById('submitBtn')
const result= document.getElementById('result')
这一行将输入框中的值转换为整数，并将其赋值给变量 guess。
const guess = parseInt(guessInput.value);
这一行检查输入是否合法。如果输入不是一个数字，或者数字不在 0 到 100 的范围内，函数将返回一个错误消息，并且不会执行后面的代码。
if (isNaN(guess) || guess < 0 || guess > 100) {
return (result.textContent = "Please enter a valid number between 0 and 100.");
}
guessCount++;
这一行将猜测次数加 1。
这一行检查猜测是否正确。如果猜测正确，函数将返回一个祝贺消息，并且禁用提交按钮。
if (guess === targetNumber) {
result.textContent = `Congratulations! You guessed the correct number in ${guessCount} attempts`;
submitBtn.disabled = true;
return;
}
这一行告诉用户他们的猜测是高了还是低了，并提示他们再试一次。
if (guess < targetNumber) result.textContent = "Too Low. Try again";
else result.textContent = "Too High. Try again";
这两行清空输入框并将焦点放回到输入框中，以便用户可以继续猜测。
guessInput.value = "";
guessInput.focus();