<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数字猜谜游戏</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-10px);}
60% {transform: translateY(-5px);}
}
.bounce {
animation: bounce 0.5s ease-in-out;
}
</style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex items-center justify-center p-4">
<div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 max-w-md w-full">
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-gray-800 mb-2">🎯 数字猜谜游戏</h1>
<p class="text-gray-600">猜一个1到100之间的数字！</p>
</div>
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
<span class="text-sm font-medium text-gray-700">猜测次数:</span>
<span id="guessCount" class="font-bold text-indigo-600">0</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="progressBar" class="bg-indigo-600 h-2.5 rounded-full transition-all duration-300" style="width: 0%"></div>
</div>
</div>
<div class="space-y-4 mb-6">
<div class="flex justify-center">
<input type="number" id="guessInput"
class="w-32 px-4 py-3 text-center text-xl font-bold border-2 border-indigo-300 rounded-lg focus:border-indigo-500 focus:outline-none"
placeholder="1-100" min="1" max="100">
</div>
<button id="submitBtn"
class="w-full py-3 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg shadow-md transition duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">
提交猜测
</button>
</div>
<div id="messageArea" class="min-h-[60px] mb-6 flex items-center justify-center">
<p id="message" class="text-center text-lg font-medium text-gray-700">
猜一个1到100之间的数字开始游戏！
</p>
</div>
<div class="grid grid-cols-2 gap-4 mb-6">
<button id="newGameBtn"
class="py-2 px-4 bg-green-500 hover:bg-green-600 text-white font-medium rounded-lg transition duration-200">
新游戏
</button>
<button id="hintBtn"
class="py-2 px-4 bg-yellow-500 hover:bg-yellow-600 text-white font-medium rounded-lg transition duration-200">
给个提示
</button>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<h3 class="font-semibold text-gray-800 mb-2">游戏规则：</h3>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 系统会随机生成一个1-100的数字</li>
<li>• 每次猜测后会得到提示</li>
<li>• 尽可能用最少的次数猜中</li>
<li>• 点击"新游戏"重新开始</li>
</ul>
</div>
</div>
<script>
// 游戏状态变量
let targetNumber = 0;
let guessCount = 0;
let gameActive = false;
// 获取DOM元素
const guessInput = document.getElementById('guessInput');
const submitBtn = document.getElementById('submitBtn');
const newGameBtn = document.getElementById('newGameBtn');
const hintBtn = document.getElementById('hintBtn');
const message = document.getElementById('message');
const messageArea = document.getElementById('messageArea');
const guessCountElement = document.getElementById('guessCount');
const progressBar = document.getElementById('progressBar');
// 初始化游戏
function initGame() {
targetNumber = Math.floor(Math.random() * 100) + 1;
guessCount = 0;
gameActive = true;
guessCountElement.textContent = guessCount;
progressBar.style.width = '0%';
message.textContent = '猜一个1到100之间的数字开始游戏！';
messageArea.className = 'min-h-[60px] mb-6 flex items-center justify-center';
guessInput.value = '';
guessInput.disabled = false;
submitBtn.disabled = false;
hintBtn.disabled = false;
}
// 处理猜测逻辑
function makeGuess() {
if (!gameActive) return;
const userGuess = parseInt(guessInput.value);
// 验证输入
if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
showMessage('请输入1到100之间的有效数字！', 'error');
return;
}
guessCount++;
guessCountElement.textContent = guessCount;
// 更新进度条
const progress = Math.min((guessCount / 10) * 100, 100);
progressBar.style.width = `${progress}%`;
// 判断猜测结果
if (userGuess === targetNumber) {
showMessage(`🎉 恭喜你！猜对了！数字就是 ${targetNumber}`, 'success');
gameActive = false;
guessInput.disabled = true;
submitBtn.disabled = true;
hintBtn.disabled = true;
} else if (userGuess < targetNumber) {
showMessage(`📈 太小了！目标数字比 ${userGuess} 大`, 'info');
} else {
showMessage(`📉 太大了！目标数字比 ${userGuess} 小`, 'info');
}
// 添加动画效果
messageArea.classList.add('bounce');
setTimeout(() => {
messageArea.classList.remove('bounce');
}, 500);
}
// 显示消息
function showMessage(text, type) {
message.textContent = text;
// 根据类型设置样式
switch(type) {
case 'success':
message.className = 'text-center text-lg font-bold text-green-600';
break;
case 'error':
message.className = 'text-center text-lg font-bold text-red-600';
break;
default:
message.className = 'text-center text-lg font-medium text-gray-700';
}
}
// 提示功能
function giveHint() {
if (!gameActive) return;
const difference = Math.abs(targetNumber - parseInt(guessInput.value) || 0);
let hint = '';
if (difference <= 5) {
hint = '🔥 非常接近了！';
} else if (difference <= 15) {
hint = '🌡️ 差不多了！';
} else if (difference <= 30) {
hint = '❄️ 还有点远呢！';
} else {
hint = '🧊 距离还很远！';
}
showMessage(hint, 'info');
}
// 事件监听器
submitBtn.addEventListener('click', makeGuess);
guessInput.addEventListener('keyup', function(event) {
if (event.key === 'Enter') {
makeGuess();
}
});
newGameBtn.addEventListener('click', initGame);
hintBtn.addEventListener('click', giveHint);
// 初始化游戏
window.onload = initGame;
</script>
</body>
</html>
index.html
index.html