- Автор темы
- #1
大家好朋友们！欢迎来到我的捉兔子游戏！这是一款考验你反应速度和手眼协调能力的小游戏。你需要点击屏幕上随机出现的兔子来获得分数。游戏有三个难度级别，随着你的分数增加，兔子的移动速度也会加快。我会很高兴听到每个人的意见和建议，感谢你的体验和支持!
Hello friends! Welcome to my Catch the Rabbit game! This is a small game that tests your reaction speed and hand-eye coordination. You need to click on rabbits that randomly appear on the screen to earn points. The game has three difficulty levels, and as your score increases, the rabbit's movement speed also increases. I will be very happy to hear everyone's opinions and suggestions. Thank you for playing and supporting!
Привет друзья! Добро пожаловать в мою игру "Поймай зайчика"! Это небольшая игра, которая проверяет вашу скорость реакции и координацию. Вам нужно кликать на зайчиков, которые появляются в случайных местах экрана, чтобы зарабатывать очки. В игре три уровня сложности, и с ростом вашего счёта зайчик начинает двигаться быстрее. Буду очень рад услышать мнения и предложения каждого из вас. Спасибо за игру и поддержку!
HTML:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>捉兔子游戏 - 捕捉兔子挑战</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; }
body { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); color: #333; line-height: 1.6; padding: 20px; min-height: 100vh; }
.container { max-width: 1200px; margin: 0 auto; background: white; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); overflow: hidden; }
.header { background: linear-gradient(to right, #ff6b6b, #ff8e53); color: white; padding: 30px; text-align: center; }
h1 { font-size: 2.8rem; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); }
.subtitle { font-size: 1.3rem; opacity: 0.9; }
.description { padding: 30px; background: #fff9f9; border-bottom: 3px solid #ff6b6b; }
.description h2 { color: #ff6b6b; margin-bottom: 15px; font-size: 1.8rem; }
.description p { font-size: 1.2rem; color: #666; line-height: 1.8; }
.game-container { display: flex; flex-wrap: wrap; padding: 20px; }
.left-panel { flex: 1; min-width: 300px; padding: 20px; }
.right-panel { flex: 2; min-width: 500px; padding: 20px; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 30px; }
.stat-card { background: white; border-radius: 15px; padding: 20px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.05); border: 2px solid #e0e0e0; transition: all 0.3s; }
.stat-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.stat-value { font-size: 2.5rem; font-weight: bold; color: #ff6b6b; margin: 10px 0; }
.stat-label { font-size: 1.1rem; color: #777; }
.game-board { width: 100%; height: 500px; background: linear-gradient(145deg, #a8e6cf, #8cc8ad); border-radius: 15px; position: relative; overflow: hidden; box-shadow: inset 0 0 20px rgba(0,0,0,0.1); border: 5px solid #7abf9a; }
#rabbit { position: absolute; width: 100px; height: 100px; cursor: pointer; transition: transform 0.2s; user-select: none; }
#rabbit:hover { transform: scale(1.1); }
.controls { display: flex; gap: 15px; margin-top: 30px; flex-wrap: wrap; }
.btn { flex: 1; min-width: 150px; padding: 15px 25px; border: none; border-radius: 50px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-start { background: linear-gradient(to right, #4CAF50, #2E8B57); color: white; }
.btn-start:hover { background: linear-gradient(to right, #45a049, #267349); transform: scale(1.05); }
.btn-level { background: linear-gradient(to right, #2196F3, #1976D2); color: white; }
.btn-level:hover { background: linear-gradient(to right, #1e87db, #1565c0); transform: scale(1.05); }
.btn-reset { background: linear-gradient(to right, #f44336, #d32f2f); color: white; }
.btn-reset:hover { background: linear-gradient(to right, #e53935, #c62828); transform: scale(1.05); }
.level-info { background: #fff3cd; border: 2px solid #ffc107; border-radius: 10px; padding: 15px; margin-top: 20px; text-align: center; }
.level-title { font-size: 1.3rem; color: #856404; font-weight: bold; }
.level-desc { color: #666; margin-top: 5px; }
.instructions { background: #e8f4fd; border-radius: 15px; padding: 25px; margin-top: 30px; border-left: 5px solid #2196F3; }
.instructions h3 { color: #2196F3; margin-bottom: 15px; font-size: 1.5rem; }
.instructions ul { padding-left: 20px; }
.instructions li { margin-bottom: 10px; font-size: 1.1rem; color: #555; }
.footer { text-align: center; padding: 25px; background: #f8f9fa; color: #666; border-top: 1px solid #e0e0e0; margin-top: 30px; }
@media (max-width: 768px) { .game-container { flex-direction: column; } .game-board { height: 400px; } }
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>捉兔子游戏</h1>
<p class="subtitle">考验你的反应速度和手眼协调能力</p>
</div>
<div class="description">
<h2>大家好，朋友们！</h2>
<p>请评价我的捉兔子游戏，我会很高兴听到每个人的意见。这是一款简单的反应游戏，你需要尽可能快地点击移动的兔子来获得分数。游戏有三个难度级别，随着你的分数增加，兔子的移动速度也会加快。祝你好运！</p>
</div>
<div class="game-container">
<div class="left-panel">
<div class="stats-grid">
<div class="stat-card">
<div class="stat-label">得分</div>
<div class="stat-value" id="score">0</div>
</div>
<div class="stat-card">
<div class="stat-label">剩余时间</div>
<div class="stat-value" id="time">60</div>
</div>
<div class="stat-card">
<div class="stat-label">错过次数</div>
<div class="stat-value" id="misses">0</div>
</div>
<div class="stat-card">
<div class="stat-label">当前等级</div>
<div class="stat-value" id="level">1</div>
</div>
</div>
<div class="level-info">
<div class="level-title" id="levelTitle">等级 1: 简单模式</div>
<div class="level-desc" id="levelDesc">兔子移动较慢，适合初学者</div>
</div>
<div class="controls">
<button class="btn btn-start" id="startBtn">🎮 开始游戏</button>
<button class="btn btn-level" id="levelBtn">⚙️ 切换难度</button>
<button class="btn btn-reset" id="resetBtn">🔄 重新开始</button>
</div>
<div class="instructions">
<h3>游戏说明</h3>
<ul>
<li>点击"开始游戏"按钮开始游戏</li>
<li>在60秒内尽可能多地点击兔子来获得分数</li>
<li>每次成功点击兔子，你会获得1分</li>
<li>如果兔子消失前你没有点击它，你会错过一次</li>
<li>每得10分，游戏等级会提升，兔子移动速度会加快</li>
<li>游戏有三个难度级别：简单、中等、困难</li>
<li>使用"切换难度"按钮可以在游戏开始前更改难度级别</li>
</ul>
</div>
</div>
<div class="right-panel">
<div class="game-board" id="gameBoard">
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01MCAxMEM1NCAxMCA1OCAxMSA2MSAxM0M2NCAxNSA2NiAxOCA2OCAyMUM3MCAyNCA3MSAyOCA3MSAzMkM3MSAzNiA3MCA0MCA2OCA0M0M2NiA0NiA2NCA0OSA2MSA1MUM1OCA1MyA1NCA1NCA1MCA1NEM0NiA1NCA0MiA1MyAzOSA1MUMzNiA0OSAzNCA0NiAzMiA0M0MzMCA0MCAyOSAzNiAyOSAzMkMyOSAyOCAzMCAyNCAzMiAyMUMzNCAxOCAzNiAxNSAzOSAxM0M0MiAxMSA0NiAxMCA1MCAxMFoiIGZpbGw9IiNGRjk5MzMiLz4KPHBhdGggZD0iTTQwIDIwQzQwIDIzIDM4IDI1IDM1IDI1QzMyIDI1IDMwIDIzIDMwIDIwQzMwIDE3IDMyIDE1IDM1IDE1QzM4IDE1IDQwIDE3IDQwIDIwWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTcwIDIwQzcwIDIzIDY4IDI1IDY1IDI1QzYyIDI1IDYwIDIzIDYwIDIwQzYwIDE3IDYyIDE1IDY1IDE1QzY4IDE1IDcwIDE3IDcwIDIwWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTQwIDIxQzQwIDIyIDM5IDIzIDM4IDIzQzM3IDIzIDM2IDIyIDM2IDIxQzM2IDIwIDM3IDE5IDM4IDE5QzM5IDE5IDQwIDIwIDQwIDIxWiIgZmlsbD0iIzMzMzMzMyIvPgo8cGF0aCBkPSJNNjUgMjFDNjUgMjIgNjQgMjMgNjMgMjNDNjIgMjMgNjEgMjIgNjEgMjFDNjEgMjAgNjIgMTkgNjMgMTlDNjQgMTkgNjUgMjAgNjUgMjFaIiBmaWxsPSIjMzMzMzMzIi8+CjxwYXRoIGQ9Ik00MCA1MEM0MCA1MiAzOCA1NCAzNSA1NEMzMiA1NCAzMCA1MiAzMCA1MEMzMCA0OCAzMiA0NiAzNSA0NkMzOCA0NiA0MCA0OCA0MCA1MFoiIGZpbGw9IiNGRjk5MzMiLz4KPHBhdGggZD0iTTcwIDUwQzcwIDUyIDY4IDU0IDY1IDU0QzYyIDU0IDYwIDUyIDYwIDUwQzYwIDQ4IDYyIDQ2IDY1IDQ2QzY4IDQ2IDcwIDQ4IDcwIDUwWiIgZmlsbD0iI0ZGOTkzMyIvPgo8cGF0aCBkPSJNMzUgNzBDMzUgNzIgMzMgNzQgMzAgNzRDMjcgNzQgMjUgNzIgMjUgNzBDMjUgNjggMjcgNjYgMzAgNjZDMzMgNjYgMzUgNjggMzUgNzBaIiBmaWxsPSIjRkY5OTMzIi8+CjxwYXRoIGQ9Ik02NSA3MEM2NSA3MiA2MyA3NCA2MCA3NEM1NyA3NCA1NSA3MiA1NSA3MEM1NSA2OCA1NyA2NiA2MCA2NkM2MyA2NiA2NSA2OCA2NSA3MFoiIGZpbGw9IiNGRjk5MzMiLz4KPHBhdGggZD0iTTUwIDgwQzUzIDgwIDU2IDgxIDU4IDgzQzYwIDg1IDYxIDg4IDYxIDkxQzYxIDk0IDYwIDk3IDU4IDk5QzU2IDEwMSA1MyAxMDIgNTAgMTAyQzQ3IDEwMiA0NCAxMDEgNDIgOTlDNDAgOTcgMzkgOTQgMzkgOTFDMzkgODggNDAgODUgNDIgODNDNDQgODEgNDcgODAgNTAgODBaIiBmaWxsPSIjRkY5OTMzIi8+Cjwvc3ZnPgo=" alt="兔子" id="rabbit">
</div>
</div>
</div>
<div class="footer">
<p>© 2023 捉兔子游戏 | 开发者: 中国游戏工作室 | 版本: 1.0.0</p>
<p>感谢体验本游戏！请提供宝贵意见帮助我们改进。</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const rabbit = document.getElementById('rabbit');
const gameBoard = document.getElementById('gameBoard');
const scoreElement = document.getElementById('score');
const timeElement = document.getElementById('time');
const missesElement = document.getElementById('misses');
const levelElement = document.getElementById('level');
const levelTitle = document.getElementById('levelTitle');
const levelDesc = document.getElementById('levelDesc');
const startBtn = document.getElementById('startBtn');
const resetBtn = document.getElementById('resetBtn');
const levelBtn = document.getElementById('levelBtn');
let score = 0;
let timeLeft = 60;
let misses = 0;
let level = 1;
let gameActive = false;
let gameTimer;
let rabbitTimer;
let difficulty = 1;
const difficultySettings = {
1: { name: "简单模式", rabbitSpeed: 1500, levelUpScore: 10, desc: "兔子移动较慢，适合初学者" },
2: { name: "中等模式", rabbitSpeed: 1200, levelUpScore: 15, desc: "兔子速度适中，适合有经验的玩家" },
3: { name: "困难模式", rabbitSpeed: 900, levelUpScore: 20, desc: "兔子移动很快，挑战你的极限反应" }
};
function initGame() {
score = 0;
timeLeft = 60;
misses = 0;
level = 1;
gameActive = false;
updateUI();
updateLevelInfo();
rabbit.style.display = 'none';
startBtn.textContent = '🎮 开始游戏';
startBtn.disabled = false;
}
function updateUI() {
scoreElement.textContent = score;
timeElement.textContent = timeLeft;
missesElement.textContent = misses;
levelElement.textContent = level;
}
function updateLevelInfo() {
levelTitle.textContent = `等级 ${level}: ${difficultySettings[difficulty].name}`;
levelDesc.textContent = difficultySettings[difficulty].desc;
}
function startGame() {
if (gameActive) return;
gameActive = true;
startBtn.textContent = '⏸️ 游戏中...';
startBtn.disabled = true;
gameTimer = setInterval(() => {
timeLeft--;
timeElement.textContent = timeLeft;
if (timeLeft <= 0) {
endGame();
}
}, 1000);
moveRabbit();
}
function moveRabbit() {
if (!gameActive) return;
const boardWidth = gameBoard.clientWidth - rabbit.clientWidth;
const boardHeight = gameBoard.clientHeight - rabbit.clientHeight;
const x = Math.floor(Math.random() * boardWidth);
const y = Math.floor(Math.random() * boardHeight);
rabbit.style.left = `${x}px`;
rabbit.style.top = `${y}px`;
rabbit.style.display = 'block';
let rabbitTime = difficultySettings[difficulty].rabbitSpeed - (level * 100);
if (rabbitTime < 300) rabbitTime = 300;
clearTimeout(rabbitTimer);
rabbitTimer = setTimeout(() => {
if (gameActive) {
rabbit.style.display = 'none';
misses++;
missesElement.textContent = misses;
moveRabbit();
}
}, rabbitTime);
}
rabbit.addEventListener('click', () => {
if (!gameActive) return;
score++;
scoreElement.textContent = score;
const levelUpScore = difficultySettings[difficulty].levelUpScore;
const newLevel = Math.floor(score / levelUpScore) + 1;
if (newLevel > level) {
level = newLevel;
levelElement.textContent = level;
updateLevelInfo();
levelTitle.style.color = level >= 5 ? '#f44336' : '#856404';
levelTitle.style.transform = 'scale(1.1)';
setTimeout(() => {
levelTitle.style.transform = 'scale(1)';
}, 300);
}
rabbit.style.display = 'none';
moveRabbit();
});
function endGame() {
gameActive = false;
clearInterval(gameTimer);
clearTimeout(rabbitTimer);
startBtn.disabled = false;
startBtn.textContent = '🔄 重新开始';
rabbit.style.display = 'none';
let message = "";
if (score >= 40) message = "太棒了！你是捉兔子大师！🎯";
else if (score >= 25) message = "做得好！你的反应速度很快！👍";
else if (score >= 15) message = "不错！继续练习会更棒！✨";
else message = "加油！下次一定会更好！💪";
setTimeout(() => {
alert(`游戏结束！\n\n得分: ${score}\n错过次数: ${misses}\n最终等级: ${level}\n\n${message}`);
}, 300);
}
function changeDifficulty() {
if (gameActive) {
alert("游戏进行中无法更改难度！");
return;
}
difficulty++;
if (difficulty > 3) difficulty = 1;
updateLevelInfo();
levelTitle.style.backgroundColor = '#d4edda';
levelTitle.style.padding = '10px';
levelTitle.style.borderRadius = '5px';
setTimeout(() => {
levelTitle.style.backgroundColor = 'transparent';
}, 500);
}
function resetGame() {
clearInterval(gameTimer);
clearTimeout(rabbitTimer);
initGame();
}
startBtn.addEventListener('click', startGame);
resetBtn.addEventListener('click', resetGame);
levelBtn.addEventListener('click', changeDifficulty);
initGame();
document.querySelectorAll('.btn').forEach(btn => {
btn.addEventListener('mousedown', function() {
this.style.transform = 'scale(0.95)';
});
btn.addEventListener('mouseup', function() {
this.style.transform = 'scale(1)';
});
btn.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
});
});
</script>
</body>
</html>
