小游戏,通过提示每次猜高或猜低以及每次猜中的位数,10次内猜中1-10000的一个数。
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜数字游戏困难版</title>
<style>
body {
text-align: center;
padding-top: 20px;
}
</style>
</head>
<body>
<h1>猜数字游戏困难版</h1>
<p>我已经想了一个1到10000之间的数字。你有10次机会猜它是什么。</p>
<label for="guessInput">输入你的猜测:</label>
<input type="number" id="guessInput" required min="1" max="10000">
<button onclick="checkGuess()">猜!</button>
<button onclick="location.reload()">再来一局!</button>
<p id="output"></p>
<ol id="history"></ol>
<script>
const secretNumber = Math.floor(Math.random() * 10000) + 1;
let attempts = 10;
const history = document.getElementById('history');
const guessInput = document.getElementById('guessInput');
const output = document.getElementById('output');
function checkGuess() {
const userGuess = parseInt(guessInput.value, 10);
if (isNaN(userGuess)) {
output.textContent = '请输入有效的数字!';
return;
}
if (attempts > 0) {
attempts--;
const rightNum = countSameDigits(userGuess, secretNumber)
const guessItem = document.createElement('li');
if (userGuess === secretNumber) {
output.textContent = '恭喜你!你猜对了!游戏胜利!';
attempts = -1;
} else if (userGuess < secretNumber) {
output.textContent = '猜低了。再试一次。';
} else if (userGuess > secretNumber) {
output.textContent = '猜高了。再试一次。';
}
guessItem.textContent = `猜测: ${userGuess};${output.textContent};猜对了${rightNum}位数`;
history.appendChild(guessItem);
if (attempts > 0) {
output.textContent += ` 剩余次数: ${attempts}`;
} else if (attempts == 0) {
output.textContent = ' 游戏失败。正确答案是: ' + secretNumber;
}
}
}
function countSameDigits(a, b) {
// 将数字转换为字符串
const strA = a.toString();
const strB = b.toString();
// 确保两个字符串长度相同,较短的字符串前面补0
const maxLength = Math.max(strA.length, strB.length);
strA.padStart(maxLength, '0');
strB.padStart(maxLength, '0');
let count = 0; // 用于计数相同位上的相同数
for (let i = 0; i < maxLength; i++) {
if (strA[i] === strB[i]) {
count++;
}
}
return count;
}
</script>
</body>
</html>