用html、css和js写个小游戏
时间: 2024-01-11 20:04:25 浏览: 29
好的,我可以帮你实现一个小游戏,比如猜数字游戏。以下是实现思路:
1. 在 HTML 中创建一个表单,包含一个输入框和一个按钮,用于提交猜测的数字。
2. 在 JavaScript 中生成一个随机数作为答案。
3. 当用户点击按钮提交猜测时,获取输入框中的值并与答案进行比较。
4. 根据比较结果在页面上显示相应的提示信息,例如“太小了”、“太大了”或“猜对了”。
5. 统计用户猜测的次数,并在页面上显示出来。
以下是具体实现代码:
HTML:
```
<body>
<h1>猜数字游戏</h1>
<form>
<label for="guess">请输入你的猜测:</label>
<input type="text" id="guess" name="guess">
<button type="submit" id="submit">提交</button>
</form>
<div id="result"></div>
<div id="count"></div>
</body>
```
CSS:
```
body {
text-align: center;
font-size: 2rem;
}
form {
margin: 2rem auto;
}
label {
display: block;
margin-bottom: 1rem;
}
input[type="text"] {
font-size: 1.5rem;
padding: 0.5rem;
}
button {
font-size: 1.5rem;
padding: 0.5rem 1rem;
}
#result {
margin: 2rem auto;
font-size: 2rem;
}
#count {
margin: 1rem auto;
font-size: 1.5rem;
}
```
JavaScript:
```
// 生成随机数
const answer = Math.floor(Math.random() * 100) + 1;
console.log(answer);
// 获取表单和结果显示区域
const form = document.querySelector('form');
const result = document.querySelector('#result');
const count = document.querySelector('#count');
// 统计猜测次数
let guessCount = 0;
// 监听表单提交事件
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单默认提交行为
// 获取用户输入的数字
const guess = parseInt(form.guess.value);
// 判断输入是否合法
if (isNaN(guess)) {
result.textContent = '请输入一个数字';
form.guess.value = '';
return;
}
// 比较用户输入的数字和答案
guessCount++;
if (guess < answer) {
result.textContent = '太小了';
} else if (guess > answer) {
result.textContent = '太大了';
} else {
result.textContent = '猜对了!';
form.guess.disabled = true;
form.submit.disabled = true;
}
// 显示猜测次数
count.textContent = `你已经猜了 ${guessCount} 次`;
form.guess.value = '';
});
```
这样,一个简单的猜数字小游戏就完成了。你可以在浏览器中打开该 HTML 文件,尝试运行一下看看效果。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)