给代码
时间: 2023-07-03 20:12:54 浏览: 47
以下是一个可以实现猜数字游戏的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Guess the number</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
font-size: 2em;
margin-bottom: 0.5em;
}
</style>
</head>
<body>
<h1>Guess the number</h1>
<p>Guess a number between 1 and 100:</p>
<input type="text" id="guessField">
<button id="guessSubmit">Submit</button>
<p id="lastResult"></p>
<p id="lowOrHi"></p>
<p id="guesses"></p>
<script>
// 生成一个随机数
const randomNumber = Math.floor(Math.random() * 100) + 1;
// 获取元素的引用
const guessSubmit = document.getElementById('guessSubmit');
const guessField = document.getElementById('guessField');
const lastResult = document.getElementById('lastResult');
const lowOrHi = document.getElementById('lowOrHi');
const guesses = document.getElementById('guesses');
// 猜测次数的计数器
let guessCount = 1;
// 猜测函数
function checkGuess() {
const userGuess = Number(guessField.value);
if (guessCount === 1) {
guesses.textContent = 'Previous guesses: ';
}
guesses.textContent += userGuess + ' ';
if (userGuess === randomNumber) {
lastResult.textContent = 'Congratulations! You got it right!';
lastResult.style.backgroundColor = 'green';
lowOrHi.textContent = '';
setGameOver();
} else if (guessCount === 10) {
lastResult.textContent = '!!!GAME OVER!!!';
lowOrHi.textContent = '';
setGameOver();
} else {
lastResult.textContent = 'Wrong!';
lastResult.style.backgroundColor = 'red';
if (userGuess < randomNumber) {
lowOrHi.textContent = 'Last guess was too low!';
} else if (userGuess > randomNumber) {
lowOrHi.textContent = 'Last guess was too high!';
}
}
guessCount++;
guessField.value = '';
guessField.focus();
}
// 游戏结束函数
function setGameOver() {
guessField.disabled = true;
guessSubmit.disabled = true;
resetButton = document.createElement('button');
resetButton.textContent = 'Start new game';
document.body.appendChild(resetButton);
resetButton.addEventListener('click', resetGame);
}
// 重置游戏函数
function resetGame() {
guessCount = 1;
const resetParas = document.querySelectorAll('.resultParas p');
for (let i = 0; i < resetParas.length; i++) {
resetParas[i].textContent = '';
}
resetButton.parentNode.removeChild(resetButton);
guessField.disabled = false;
guessSubmit.disabled = false;
guessField.value = '';
guessField.focus();
lastResult.style.backgroundColor = 'white';
randomNumber = Math.floor(Math.random() * 100) + 1;
}
// 绑定猜测函数到提交按钮
guessSubmit.addEventListener('click', checkGuess);
</script>
</body>
</html>
```
在上面的代码中,我们首先生成一个随机数 `randomNumber`,然后获取了 `guessSubmit`、`guessField`、`lastResult`、`lowOrHi` 和 `guesses` 这些元素的引用。然后定义了 `guessCount` 计数器和两个函数 `checkGuess` 和 `setGameOver`。
`checkGuess` 函数用来检查用户的猜测值,并根据结果更新页面上的元素。这个函数会在点击提交按钮时触发。
`setGameOver` 函数用来处理游戏结束的情况,它会禁用表单和提交按钮,并添加一个“开始新游戏”的按钮。
最后,在代码的最后一行,我们将 `checkGuess` 函数绑定到 `guessSubmit` 元素的点击事件上,以便在用户点击提交按钮时触发该函数。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)