用HTML写一个小游戏
时间: 2023-12-07 19:50:37 浏览: 35
好的,我可以给你一个简单的HTML游戏示例——"猜数字"游戏。以下是游戏代码和说明:
```html
<!DOCTYPE html>
<html>
<head>
<title>猜数字游戏</title>
</head>
<body>
<h1>猜数字游戏</h1>
<p>请在下面输入框内输入1到100之间的数字,尝试猜出电脑生成的随机数。</p>
<input type="text" id="guess" placeholder="请输入数字">
<button onclick="checkGuess()">猜一猜</button>
<p id="result"></p>
<script>
var randomNumber = Math.floor(Math.random() * 100) + 1; // 生成1-100之间的随机数
var guessInput = document.getElementById("guess");
var guessButton = document.getElementsByTagName("button")[0];
var guessResult = document.getElementById("result");
var guessCount = 0;
function checkGuess() {
var userGuess = parseInt(guessInput.value);
if (userGuess === randomNumber) {
guessResult.innerHTML = "恭喜你,猜对了!";
guessResult.style.backgroundColor = "green";
guessInput.disabled = true;
guessButton.disabled = true;
} else {
guessCount++;
if (guessCount === 10) {
guessResult.innerHTML = "很遗憾,您猜错了10次,游戏结束。正确答案是" + randomNumber + "。";
guessResult.style.backgroundColor = "red";
guessInput.disabled = true;
guessButton.disabled = true;
} else {
guessResult.innerHTML = "猜错了,还剩" + (10 - guessCount) + "次机会。";
guessResult.style.backgroundColor = "yellow";
guessInput.value = "";
}
}
}
</script>
</body>
</html>
```
在这个游戏中,玩家需要在文本框中输入数字,然后点击按钮进行猜测。如果猜对了,游戏结束并显示“恭喜你,猜对了!”的消息。如果猜错了,会显示还剩多少次机会,如果猜错10次,游戏结束并显示正确答案。
你可以将此代码复制到文本编辑器中,保存为HTML文件,然后在浏览器中打开以玩游戏。希望你玩得开心!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)