用html做一个小游戏
时间: 2023-12-22 14:06:36 浏览: 28
好的,我可以给您提供一个简单的HTML游戏示例。这是一个猜数字的小游戏,您可以尝试在浏览器中运行它:
```
<!DOCTYPE html>
<html>
<head>
<title>猜数字游戏</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin-top: 50px;
}
form {
width: 300px;
margin: 30px auto;
text-align: center;
}
input[type="text"] {
padding: 10px;
margin-top: 10px;
font-size: 16px;
width: 100%;
box-sizing: border-box;
}
input[type="submit"] {
padding: 10px 20px;
margin-top: 10px;
background-color: #4CAF50;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>猜数字游戏</h1>
<form>
<p>请输入一个1到100的整数:</p>
<input type="text" id="guess" name="guess">
<input type="submit" value="提交" onclick="guessNumber()">
</form>
<script>
var randomNumber = Math.floor(Math.random() * 100) + 1;
function guessNumber() {
var guess = parseInt(document.getElementById("guess").value);
if (guess === randomNumber) {
alert("恭喜你猜对了!");
randomNumber = Math.floor(Math.random() * 100) + 1;
} else if (guess > randomNumber) {
alert("你猜的数字太大了!");
} else {
alert("你猜的数字太小了!");
}
}
</script>
</body>
</html>
```
这个游戏使用了HTML、CSS和JavaScript来创建,当用户输入一个数字并点击提交按钮时,JavaScript代码会比较用户输入的数字和随机生成的数字,然后弹出相应的提示框。您可以根据您的需要进行修改和定制,例如更改游戏规则、改变样式或添加更多功能。