用html css js 猜一猜游戏
时间: 2023-06-13 21:05:45 浏览: 229
基于html的猜数字游戏设计(html+js+css)
5星 · 资源好评率100%
好的,我可以帮你设计一个猜数字的游戏。以下是一个简单的游戏流程:
1. 让玩家输入一个数字
2. 验证输入是否为数字
3. 判断输入的数字是否与随机生成的数字相等
4. 如果输入的数字与随机生成的数字相等,则提示玩家猜对了,并结束游戏
5. 如果输入的数字比随机生成的数字大,则提示玩家输入的数字过大
6. 如果输入的数字比随机生成的数字小,则提示玩家输入的数字过小
7. 让玩家再次输入数字,直到猜对为止
以下是一个简单的 HTML 页面示例:
```
<!DOCTYPE html>
<html>
<head>
<title>猜数字游戏</title>
<script src="guessingGame.js"></script>
</head>
<body>
<h1>猜数字游戏</h1>
<p>请在下方输入一个1-100之间的数字:</p>
<input type="text" id="guessInput">
<button onclick="guessNumber()">猜一猜</button>
<p id="result"></p>
</body>
</html>
```
以下是一个简单的 JavaScript 程序示例:
```
// 生成1-100之间的随机数
const randomNumber = Math.floor(Math.random() * 100) + 1;
// 获取输入框和结果元素
const guessInput = document.getElementById("guessInput");
const result = document.getElementById("result");
// 猜数字的函数
function guessNumber() {
// 获取输入框中的值并转换为数字
const guess = parseInt(guessInput.value);
// 验证输入是否为数字
if (isNaN(guess)) {
result.textContent = "请输入数字!";
} else {
// 判断输入的数字是否与随机生成的数字相等
if (guess === randomNumber) {
result.textContent = "恭喜你,猜对了!";
} else if (guess > randomNumber) {
result.textContent = "你猜的数字过大,请再试一次。";
} else {
result.textContent = "你猜的数字过小,请再试一次。";
}
}
}
```
你可以将以上代码保存到一个名为 `guessingGame.js` 的文件中,并将其链接到你的 HTML 页面中,即可开始游戏。
阅读全文