在 HTML 中添加小游戏，通常需要结合 HTML、CSS 和 JavaScript 来实现。以下是一个简单的示例，展示如何在网页中添加一个 简单的猜数字小游戏。
✅ 一、HTML 结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>猜数字小游戏</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
background-color: #f0f0f0;
}
#game {
margin: 20px auto;
max-width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
}
#result {
margin-top: 20px;
font-size: 20px;
color: green;
}
</style>
</head>
<body>
<div id="game">
<h2>猜数字小游戏</h2>
<p>我随机生成一个 1 到 100 之间的数字，你来猜猜看！</p>
<button onclick="startGame()">开始游戏</button>
<div id="result"></div>
</div>
<script>
function startGame() {
const result = document.getElementById('result');
const min = 1;
const max = 100;
let guess = Math.floor(Math.random() * (max - min + 1)) + min;
let attempts = 0;
result.innerHTML = '';
result.innerHTML = `<p>我猜你猜的是 ${guess}。</p>`;
// 这里可以添加更多逻辑，比如判断猜的大小
// 例如：
// if (guess < userGuess) {
// result.innerHTML += "太小了！";
// } else if (guess > userGuess) {
// result.innerHTML += "太大了！";
// }
// 也可以添加计数器
// attempts++;
// result.innerHTML += `<p>你已经猜了 ${attempts} 次。</p>`;
}
</script>
</body>
</html>✅ 二、小游戏的扩展建议
- 用户输入：用
<input type="number">获取用户输入。 - 判断逻辑：根据用户输入与随机数比较，给出提示。
- 计数器：显示用户猜了多少次。
- 游戏结束：当用户猜中时，显示“恭喜你猜中了！”并结束游戏。
✅ 三、完整示例（带用户输入）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>猜数字小游戏</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
background-color: #f0f0f0;
}
#game {
margin: 20px auto;
max-width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
}
#result {
margin-top: 20px;
font-size: 20px;
color: green;
}
</style>
</head>
<body>
<div id="game">
<h2>猜数字小游戏</h2>
<p>我随机生成一个 1 到 100 之间的数字，你来猜猜看！</p>
<input type="number" id="userGuess" placeholder="请输入你的猜测" />
<button onclick="checkGuess()">提交</button>
<div id="result"></div>
</div>
<script>
function startGame() {
const result = document.getElementById('result');
const min = 1;
const max = 100;
let guess = Math.floor(Math.random() * (max - min + 1)) + min;
let attempts = 0;
result.innerHTML = '';
result.innerHTML = `<p>我猜你猜的是 ${guess}。</p>`;
// 这里可以添加更多逻辑，比如判断猜的大小
// 例如：
// if (guess < userGuess) {
// result.innerHTML += "太小了！";
// } else if (guess > userGuess) {
// result.innerHTML += "太大了！";
// }
// 也可以添加计数器
// attempts++;
// result.innerHTML += `<p>你已经猜了 ${attempts} 次。</p>`;
}
function checkGuess() {
const userGuess = document.getElementById('userGuess').value;
const resultDiv = document.getElementById('result');
const result = document.createElement('p');
if (!userGuess) {
result.innerHTML = '请输入一个数字！';
return;
}
const guess = Math.floor(Math.random() * (100 - 1 + 1)) + 1;
const userNum = parseInt(userGuess);
if (userNum === guess) {
result.innerHTML = `<p>恭喜你猜中了！答案是 ${guess}。</p>`;
resultDiv.appendChild(result);
} else if (userNum < guess) {
result.innerHTML = `太小了！你猜的是 ${userNum}，而正确答案是 ${guess}`;
} else {
result.innerHTML = `太大了！你猜的是 ${userNum}，而正确答案是 ${guess}`;
}
resultDiv.appendChild(result);
}
</script>
</body>
</html>✅ 四、总结
- 使用 HTML 创建游戏界面。
- 使用 CSS 设计样式。
- 使用 JavaScript 实现游戏逻辑（如随机数生成、用户输入、判断逻辑）。
如果你有特定的游戏类型（如猜单词、连连看、打地鼠等），也可以告诉我，我可以帮你扩展实现。