<!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: 'Arial Rounded MT Bold', 'Arial', sans-serif;
}
body {
background: linear-gradient(135deg, #d32f2f 0%, #f57c00 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
color: #fff;
overflow-x: hidden;
}
.container {
max-width: 800px;
width: 100%;
text-align: center;
}
header {
margin-bottom: 20px;
padding: 20px;
background-color: rgba(255, 235, 59, 0.9);
border-radius: 20px;
border: 5px solid #ff9800;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
h1 {
font-size: 2.8rem;
color: #d32f2f;
text-shadow: 3px 3px 0 #ffeb3b;
margin-bottom: 10px;
letter-spacing: 2px;
}
.subtitle {
font-size: 1.2rem;
color: #5d4037;
margin-bottom: 15px;
}
.year-badge {
display: inline-block;
background-color: #4caf50;
color: white;
padding: 8px 20px;
border-radius: 30px;
font-weight: bold;
font-size: 1.3rem;
border: 3px solid #2e7d32;
margin-top: 5px;
}
.game-area {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 30px 0;
padding: 20px;
background-color: rgba(121, 85, 72, 0.9);
border-radius: 20px;
border: 8px solid #8d6e63;
position: relative;
min-height: 400px;
}
.hole {
background-color: #5d4037;
border-radius: 50%;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 8px solid #3e2723;
position: relative;
overflow: hidden;
transition: transform 0.1s;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.7);
}
.hole:hover {
transform: scale(1.05);
}
.hole.active {
background-color: #8d6e63;
}
.nian-monster {
width: 100px;
height: 100px;
background-color: #d32f2f;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
font-size: 3rem;
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
border: 5px solid #b71c1c;
box-shadow: 0 8px 0 rgba(0, 0, 0, 0.3);
transition: bottom 0.2s;
z-index: 2;
}
.nian-monster.appear {
display: flex;
animation: popUp 0.3s forwards;
}
.nian-monster.hit {
animation: hitEffect 0.3s forwards;
}
@keyframes popUp {
0% { bottom: -100px; }
70% { bottom: 10px; }
100% { bottom: 0; }
}
@keyframes hitEffect {
0% { transform: translateX(-50%) scale(1); }
50% { transform: translateX(-50%) scale(1.3); }
100% { transform: translateX(-50%) scale(0); }
}
.stats {
display: flex;
justify-content: space-between;
background-color: rgba(255, 235, 59, 0.9);
padding: 20px;
border-radius: 15px;
margin-bottom: 20px;
border: 5px solid #ff9800;
}
.stat-box {
background-color: #4caf50;
padding: 15px;
border-radius: 10px;
min-width: 150px;
border: 3px solid #2e7d32;
}
.stat-value {
font-size: 2.5rem;
font-weight: bold;
color: #fff;
text-shadow: 2px 2px 0 #2e7d32;
}
.stat-label {
font-size: 1.1rem;
color: #e8f5e9;
}
.controls {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
button {
padding: 15px 30px;
font-size: 1.3rem;
font-weight: bold;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 8px 0 rgba(0, 0, 0, 0.2);
}
button:hover {
transform: translateY(-5px);
box-shadow: 0 12px 0 rgba(0, 0, 0, 0.2);
}
button:active {
transform: translateY(0);
box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}
#startBtn {
background-color: #4caf50;
color: white;
}
#resetBtn {
background-color: #2196f3;
color: white;
}
.instructions {
background-color: rgba(255, 255, 255, 0.9);
color: #5d4037;
padding: 20px;
border-radius: 15px;
margin-top: 30px;
border: 5px solid #ff9800;
text-align: left;
}
.instructions h3 {
color: #d32f2f;
margin-bottom: 10px;
text-align: center;
}
.instructions ul {
padding-left: 20px;
}
.instructions li {
margin-bottom: 8px;
}
.fireworks {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.firework {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
animation: firework 1s ease-out infinite;
}
@keyframes firework {
0% { transform: translateY(100vh); opacity: 1; }
100% { transform: translateY(-100px); opacity: 0; }
}
.game-message {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 235, 59, 0.95);
color: #d32f2f;
padding: 30px;
border-radius: 20px;
font-size: 2.5rem;
font-weight: bold;
text-align: center;
border: 8px solid #ff9800;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
z-index: 10;
display: none;
}
.horse-icon {
font-size: 2.5rem;
margin: 0 10px;
}
@media (max-width: 768px) {
.game-area {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 10px;
}
.hole {
height: 90px;
}
.nian-monster {
width: 80px;
height: 80px;
font-size: 2.2rem;
}
h1 {
font-size: 2rem;
}
.stats {
flex-direction: column;
align-items: center;
gap: 15px;
}
.controls {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>🐎 马年打年兽 🐎</h1>
<p class="subtitle">丙午马年新春特别版 - 驱逐年兽,迎接好运!</p>
<div class="year-badge">农历丙午年 · 2026</div>
</header>
<div class="stats">
<div class="stat-box">
<div class="stat-label">分数</div>
<div id="score" class="stat-value">0</div>
</div>
<div class="stat-box">
<div class="stat-label">剩余时间</div>
<div id="time" class="stat-value">30</div>
</div>
<div class="stat-box">
<div class="stat-label">打中年兽</div>
<div id="hits" class="stat-value">0</div>
</div>
</div>
<div class="game-area" id="gameArea">
</div>
<div class="controls">
<button id="startBtn">开始游戏</button>
<button id="resetBtn">重新开始</button>
</div>
<div class="instructions">
<h3>游戏说明</h3>
<ul>
<li>年兽是古代神话中的恶兽,每到新年都会出来捣乱,我们需要驱赶它们!</li>
<li>点击从洞里冒出来的年兽,每打中一个得10分</li>
<li>游戏时间30秒,看你能得多少分</li>
<li>年兽出现的位置是随机的,出现时间会越来越短</li>
<li>点击"开始游戏"按钮开始,游戏过程中可以随时点击"重新开始"</li>
<li>在丙午马年驱赶年兽,迎接新春好运!🐎</li>
</ul>
</div>
</div>
<div class="game-message" id="gameMessage">
</div>
<div class="fireworks" id="fireworks">
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const gameArea = document.getElementById('gameArea');
const scoreElement = document.getElementById('score');
const timeElement = document.getElementById('time');
const hitsElement = document.getElementById('hits');
const startBtn = document.getElementById('startBtn');
const resetBtn = document.getElementById('resetBtn');
const gameMessage = document.getElementById('gameMessage');
const fireworksContainer = document.getElementById('fireworks');
let score = 0;
let timeLeft = 30;
let hits = 0;
let gameActive = false;
let gameTimer;
let nianTimer;
let holes = [];
const nianEmojis = ['👹', '🐉', '🦁', '🐲', '😈'];
function createHoles() {
gameArea.innerHTML = '';
holes = [];
for (let i = 0; i < 9; i++) {
const hole = document.createElement('div');
hole.className = 'hole';
hole.dataset.index = i;
const nian = document.createElement('div');
nian.className = 'nian-monster';
nian.dataset.index = i;
hole.appendChild(nian);
gameArea.appendChild(hole);
nian.addEventListener('click', hitNian);
holes.push({
element: hole,
nian: nian,
active: false
});
}
}
function hitNian(e) {
if (!gameActive) return;
const nian = e.currentTarget;
const index = parseInt(nian.dataset.index);
if (holes[index].active) {
score += 10;
hits++;
scoreElement.textContent = score;
hitsElement.textContent = hits;
nian.classList.add('hit');
holes[index].active = false;
playHitSound();
setTimeout(() => {
nian.classList.remove('hit');
nian.classList.remove('appear');
}, 300);
}
}
function showRandomNian() {
if (!gameActive) return;
let randomIndex;
do {
randomIndex = Math.floor(Math.random() * holes.length);
} while (holes[randomIndex].active);
const randomEmoji = nianEmojis[Math.floor(Math.random() * nianEmojis.length)];
holes[randomIndex].nian.textContent = randomEmoji;
holes[randomIndex].nian.classList.add('appear');
holes[randomIndex].active = true;
const showTime = Math.max(500, 1500 - score);
setTimeout(() => {
if (holes[randomIndex].active) {
holes[randomIndex].nian.classList.remove('appear');
holes[randomIndex].active = false;
}
}, showTime);
}
function startGame() {
if (gameActive) return;
resetGame();
gameActive = true;
startBtn.disabled = true;
startBtn.textContent = "游戏中...";
startBtn.style.opacity = "0.7";
gameTimer = setInterval(() => {
timeLeft--;
timeElement.textContent = timeLeft;
if (timeLeft <= 0) {
endGame();
}
}, 1000);
nianTimer = setInterval(() => {
if (gameActive) {
showRandomNian();
}
}, 800);
setTimeout(() => {
if (gameActive) showRandomNian();
}, 500);
}
function endGame() {
gameActive = false;
clearInterval(gameTimer);
clearInterval(nianTimer);
holes.forEach(hole => {
hole.nian.classList.remove('appear');
hole.active = false;
});
let message = "";
if (score >= 200) {
message = "🎉 太棒了!你是驱兽大师! 🎉";
} else if (score >= 100) {
message = "👍 做得好!年兽都被你吓跑了! 👍";
} else {
message = "😊 新年快乐!明年再接再厉! 😊";
}
gameMessage.innerHTML = `
<div>游戏结束!</div>
<div style="font-size: 1.8rem; margin: 20px 0;">得分: ${score}</div>
<div>${message}</div>
<div style="margin-top: 20px; font-size: 1.5rem;">
<span class="horse-icon">🐎</span>
丙午马年大吉!
<span class="horse-icon">🐎</span>
</div>
`;
gameMessage.style.display = "block";
createFireworks();
startBtn.disabled = false;
startBtn.textContent = "重新开始";
startBtn.style.opacity = "1";
}
function resetGame() {
gameActive = false;
clearInterval(gameTimer);
clearInterval(nianTimer);
score = 0;
timeLeft = 30;
hits = 0;
scoreElement.textContent = score;
timeElement.textContent = timeLeft;
hitsElement.textContent = hits;
holes.forEach(hole => {
hole.nian.classList.remove('appear');
hole.nian.classList.remove('hit');
hole.active = false;
});
gameMessage.style.display = "none";
fireworksContainer.innerHTML = "";
startBtn.disabled = false;
startBtn.textContent = "开始游戏";
startBtn.style.opacity = "1";
}
function createFireworks() {
fireworksContainer.innerHTML = "";
const colors = ['#ffeb3b', '#4caf50', '#2196f3', '#9c27b0', '#ff9800'];
for (let i = 0; i < 50; i++) {
const firework = document.createElement('div');
firework.className = 'firework';
firework.style.left = `${Math.random() * 100}vw`;
firework.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
const size = Math.random() * 8 + 2;
firework.style.width = `${size}px`;
firework.style.height = `${size}px`;
firework.style.animationDelay = `${Math.random() * 2}s`;
firework.style.animationDuration = `${Math.random() * 1 + 0.5}s`;
fireworksContainer.appendChild(firework);
}
}
function playHitSound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = 800;
oscillator.type = 'sine';
gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2);
oscillator.start(audioContext.currentTime);
oscillator.stop(audioContext.currentTime + 0.2);
} catch (e) {
console.log("音频上下文不支持,但游戏可以继续");
}
}
function initGame() {
createHoles();
startBtn.addEventListener('click', startGame);
resetBtn.addEventListener('click', resetGame);
gameMessage.innerHTML = `
<div>欢迎来到马年打年兽!</div>
<div style="font-size: 1.5rem; margin: 20px 0;">
<span class="horse-icon">🐎</span>
丙午马年快乐!
<span class="horse-icon">🐎</span>
</div>
<div>点击"开始游戏"按钮开始驱逐年兽!</div>
`;
gameMessage.style.display = "block";
}
initGame();
});
</script>
</body>
</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: 'Arial Rounded MT Bold', 'Arial', sans-serif;
}
body {
background: linear-gradient(135deg, #f5e9d9 0%, #e8d1b5 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
color: #8b4513;
}
.header {
text-align: center;
margin-bottom: 25px;
width: 100%;
max-width: 800px;
}
h1 {
font-size: 2.8rem;
color: #c41e3a;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
letter-spacing: 1px;
}
.subtitle {
font-size: 1.2rem;
color: #8b4513;
margin-bottom: 20px;
}
.game-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 800px;
background-color: rgba(255, 255, 255, 0.85);
border-radius: 20px;
padding: 25px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
border: 8px solid #c41e3a;
position: relative;
overflow: hidden;
}
.game-container::before {
content: "🐎";
position: absolute;
font-size: 80px;
top: 10px;
right: 10px;
opacity: 0.1;
z-index: 0;
}
.info-panel {
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 25px;
background: linear-gradient(to right, #ffd89b, #ffb347);
padding: 15px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
z-index: 1;
}
.score-box, .time-box {
text-align: center;
flex: 1;
}
.score-box {
border-right: 2px dashed #8b4513;
}
.info-label {
font-size: 1.1rem;
color: #8b4513;
margin-bottom: 5px;
}
.info-value {
font-size: 2.2rem;
font-weight: bold;
color: #c41e3a;
}
.game-board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
width: 100%;
margin-bottom: 30px;
z-index: 1;
}
.hole {
width: 100%;
aspect-ratio: 1;
background-color: #8b4513;
border-radius: 50%;
position: relative;
overflow: hidden;
box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.5);
cursor: pointer;
transition: transform 0.1s;
}
.hole:hover {
transform: scale(1.03);
}
.hole:active {
transform: scale(0.98);
}
.hole::after {
content: "";
position: absolute;
width: 100%;
height: 40%;
background-color: #654321;
border-radius: 50%;
bottom: 0;
left: 0;
}
.mole {
position: absolute;
width: 80%;
height: 80%;
background-color: #8b4513;
border-radius: 50%;
top: 100%;
left: 10%;
transition: top 0.3s;
display: flex;
justify-content: center;
align-items: center;
font-size: 2.5rem;
user-select: none;
}
.mole.up {
top: 10%;
}
.controls {
display: flex;
justify-content: center;
gap: 20px;
width: 100%;
z-index: 1;
}
button {
padding: 15px 30px;
font-size: 1.2rem;
font-weight: bold;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
#start-btn {
background: linear-gradient(to right, #4CAF50, #2E7D32);
color: white;
}
#start-btn:hover {
background: linear-gradient(to right, #45a049, #27632a);
transform: translateY(-3px);
}
#start-btn:active {
transform: translateY(1px);
}
#restart-btn {
background: linear-gradient(to right, #2196F3, #0D47A1);
color: white;
}
#restart-btn:hover {
background: linear-gradient(to right, #1e87db, #0a3d8a);
transform: translateY(-3px);
}
#restart-btn:active {
transform: translateY(1px);
}
.instructions {
max-width: 800px;
background-color: white;
border-radius: 15px;
padding: 20px;
margin-top: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border-left: 5px solid #c41e3a;
}
.instructions h3 {
color: #c41e3a;
margin-bottom: 10px;
font-size: 1.4rem;
}
.instructions ul {
padding-left: 20px;
color: #654321;
}
.instructions li {
margin-bottom: 8px;
line-height: 1.5;
}
.message {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.95);
padding: 30px 50px;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
text-align: center;
z-index: 100;
display: none;
border: 5px solid #c41e3a;
max-width: 90%;
}
.message h2 {
color: #c41e3a;
margin-bottom: 15px;
font-size: 2.2rem;
}
.message p {
font-size: 1.3rem;
color: #654321;
margin-bottom: 20px;
}
.highlight {
color: #c41e3a;
font-weight: bold;
}
@media (max-width: 600px) {
.game-board {
grid-template-columns: repeat(2, 1fr);
}
h1 {
font-size: 2rem;
}
button {
padding: 12px 24px;
font-size: 1rem;
}
}
</style>
</head>
<body>
<div class="header">
<h1>🐎 马年踩马蹄 🐎</h1>
<p class="subtitle">丙午马年快乐!点击冒出的马蹄获取高分,挑战你的反应速度!</p>
</div>
<div class="game-container">
<div class="info-panel">
<div class="score-box">
<div class="info-label">得分</div>
<div class="info-value" id="score">0</div>
</div>
<div class="time-box">
<div class="info-label">剩余时间</div>
<div class="info-value" id="time">30</div>
</div>
</div>
<div class="game-board" id="game-board">
</div>
<div class="controls">
<button id="start-btn">开始游戏</button>
<button id="restart-btn">重新开始</button>
</div>
</div>
<div class="instructions">
<h3>游戏说明</h3>
<ul>
<li>马蹄会从不同的洞中随机冒出,点击马蹄即可得分</li>
<li>每点击一个马蹄得 <span class="highlight">10分</span></li>
<li>游戏时间:<span class="highlight">30秒</span>,时间结束后游戏结束</li>
<li>马蹄出现速度会随着时间逐渐加快</li>
<li>尽可能多地点击马蹄,挑战最高分!</li>
</ul>
</div>
<div class="message" id="message">
<h2 id="message-title">游戏结束!</h2>
<p>你的得分是:<span id="final-score" class="highlight">0</span> 分</p>
<button id="close-message" style="background-color: #c41e3a; color: white; padding: 10px 25px;">继续游戏</button>
</div>
<script>
let score = 0;
let timeLeft = 30;
let gameActive = false;
let timer;
let moleInterval;
let speed = 1000;
let holes = [];
const scoreElement = document.getElementById('score');
const timeElement = document.getElementById('time');
const gameBoard = document.getElementById('game-board');
const startButton = document.getElementById('start-btn');
const restartButton = document.getElementById('restart-btn');
const messageElement = document.getElementById('message');
const messageTitle = document.getElementById('message-title');
const finalScoreElement = document.getElementById('final-score');
const closeMessageButton = document.getElementById('close-message');
function createHoles() {
gameBoard.innerHTML = '';
holes = [];
for (let i = 0; i < 6; i++) {
const hole = document.createElement('div');
hole.className = 'hole';
hole.dataset.index = i;
const mole = document.createElement('div');
mole.className = 'mole';
mole.textContent = '🐎';
mole.dataset.index = i;
hole.appendChild(mole);
gameBoard.appendChild(hole);
mole.addEventListener('click', hitMole);
holes.push({
element: hole,
mole: mole,
active: false
});
}
}
function showRandomMole() {
if (!gameActive) return;
hideAllMoles();
const randomIndex = Math.floor(Math.random() * holes.length);
const hole = holes[randomIndex];
hole.mole.classList.add('up');
hole.active = true;
setTimeout(() => {
if (hole.active) {
hole.mole.classList.remove('up');
hole.active = false;
}
}, 800);
}
function hideAllMoles() {
holes.forEach(hole => {
hole.mole.classList.remove('up');
hole.active = false;
});
}
function hitMole(e) {
if (!gameActive) return;
const mole = e.target;
const holeIndex = mole.dataset.index;
const hole = holes[holeIndex];
if (hole.active) {
score += 10;
scoreElement.textContent = score;
mole.style.backgroundColor = '#4CAF50';
mole.style.transform = 'scale(0.9)';
setTimeout(() => {
mole.style.backgroundColor = '';
mole.style.transform = '';
}, 200);
mole.classList.remove('up');
hole.active = false;
if (score % 50 === 0 && speed > 300) {
speed -= 50;
clearInterval(moleInterval);
moleInterval = setInterval(showRandomMole, speed);
}
}
}
function startGame() {
if (gameActive) return;
score = 0;
timeLeft = 30;
speed = 1000;
gameActive = true;
scoreElement.textContent = score;
timeElement.textContent = timeLeft;
startButton.disabled = true;
startButton.textContent = "游戏中...";
hideAllMoles();
timer = setInterval(() => {
timeLeft--;
timeElement.textContent = timeLeft;
if (timeLeft <= 0) {
endGame();
}
}, 1000);
moleInterval = setInterval(showRandomMole, speed);
}
function endGame() {
gameActive = false;
clearInterval(timer);
clearInterval(moleInterval);
startButton.disabled = false;
startButton.textContent = "开始游戏";
hideAllMoles();
finalScoreElement.textContent = score;
if (score >= 200) {
messageTitle.textContent = "太棒了!你是马蹄大师!";
} else if (score >= 100) {
messageTitle.textContent = "干得好!反应很快!";
} else if (score >= 50) {
messageTitle.textContent = "不错!继续努力!";
} else {
messageTitle.textContent = "加油,下次会更好!";
}
messageElement.style.display = 'block';
}
function restartGame() {
if (gameActive) {
clearInterval(timer);
clearInterval(moleInterval);
gameActive = false;
}
startButton.disabled = false;
startButton.textContent = "开始游戏";
scoreElement.textContent = '0';
timeElement.textContent = '30';
messageElement.style.display = 'none';
createHoles();
}
startButton.addEventListener('click', startGame);
restartButton.addEventListener('click', restartGame);
closeMessageButton.addEventListener('click', () => {
messageElement.style.display = 'none';
});
createHoles();
document.addEventListener('keydown', (e) => {
if (e.code === 'Space' && !gameActive) {
startGame();
} else if (e.code === 'Escape') {
if (gameActive) {
endGame();
} else {
restartGame();
}
}
});
document.addEventListener('touchstart', function() {}, {passive: true});
</script>
</body>
</html>