html css js 开发一个猜数字游戏
以下是一个简单的猜数字游戏的HTML、CSS和JavaScript代码示例。游戏会随机生成一个1到100之间的数字，玩家需要猜测这个数字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜数字游戏</title>
<style>
body {
font-family: Arial, sans-serif;
}
#game {
width: 300px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
}
#message {
margin: 10px 0;
color: red;
}
</style>
</head>
<body>
<div id="game">
<p>猜测一个1到100之间的数字。</p>
<input type="text" id="guess" placeholder="输入你的猜测">
<button onclick="checkNumber()">提交</button>
<p id="message"></p>
</div>
<script>
// 生成随机数字
var randomNumber = Math.floor(Math.random() * 100) + 1;
function checkNumber() {
var guess = document.getElementById('guess').value;
var message = document.getElementById('message');
// 检查输入是否是数字
if (isNaN(guess) || guess < 1 || guess > 100) {
message.textContent = '请输入一个1到100之间的整数。';
} else {
// 检查猜测是否正确
if (guess == randomNumber) {
message.textContent = '恭喜，你猜对了！';
} else if (guess > randomNumber) {
message.textContent = '猜测太大了。';
} else {
message.textContent = '猜测太小了。';
}
}
}
</script>
</body>
</html>这段代码提供了一个简单的猜数字游戏界面，玩家可以输入他们的猜测，并且点击按钮后，页面会给出提示信息告诉玩家他们猜测是否正确。游戏会在玩家猜中数字时结束。
评论已关闭