<!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;
user-select: none;
}
body {
font-family: 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, #8B0000, #B22222);
color: #FFD700;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
overflow-x: hidden;
}
.container {
max-width: 800px;
width: 100%;
text-align: center;
}
.header {
margin-bottom: 20px;
padding: 15px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 15px;
border: 3px solid #FFD700;
box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}
h1 {
font-size: 2.8rem;
margin-bottom: 10px;
text-shadow: 3px 3px 0px #8B0000;
color: #FFD700;
letter-spacing: 2px;
}
.subtitle {
font-size: 1.2rem;
margin-bottom: 15px;
color: #FFF;
}
.game-info {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-bottom: 20px;
gap: 15px;
}
.info-box {
background-color: rgba(0, 0, 0, 0.5);
padding: 15px 25px;
border-radius: 10px;
border: 2px solid #FFD700;
min-width: 180px;
}
.info-box h3 {
font-size: 1.2rem;
margin-bottom: 8px;
color: #FFA500;
}
.info-box p {
font-size: 2rem;
font-weight: bold;
}
#gameCanvas {
background-color: rgba(0, 0, 0, 0.6);
border-radius: 10px;
border: 4px solid #FFD700;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
display: block;
margin: 0 auto 25px;
max-width: 100%;
}
.controls {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 20px;
flex-wrap: wrap;
}
button {
background-color: #FFD700;
color: #8B0000;
border: none;
padding: 12px 30px;
font-size: 1.3rem;
border-radius: 50px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
box-shadow: 0 5px 0 #B8860B;
min-width: 180px;
}
button:hover {
background-color: #FFEC8B;
transform: translateY(-3px);
box-shadow: 0 8px 0 #B8860B;
}
button:active {
transform: translateY(2px);
box-shadow: 0 3px 0 #B8860B;
}
.instructions {
background-color: rgba(0, 0, 0, 0.4);
padding: 20px;
border-radius: 15px;
border: 2px solid #FFD700;
margin-top: 20px;
text-align: left;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.instructions h3 {
color: #FFA500;
margin-bottom: 15px;
text-align: center;
font-size: 1.5rem;
}
.instructions ul {
padding-left: 20px;
margin-bottom: 15px;
}
.instructions li {
margin-bottom: 10px;
line-height: 1.5;
}
.instructions p {
text-align: center;
font-style: italic;
color: #FFEC8B;
}
.legend {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 15px;
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
}
.legend-box {
width: 20px;
height: 20px;
border-radius: 4px;
}
.legend-yuanbao {
background-color: #FFD700;
}
.legend-firecracker {
background-color: #FF4500;
}
.footer {
margin-top: 20px;
color: #FFEC8B;
font-size: 0.9rem;
text-align: center;
padding: 10px;
}
@media (max-width: 768px) {
h1 {
font-size: 2.2rem;
}
.game-info {
flex-direction: column;
align-items: center;
}
#gameCanvas {
width: 95%;
}
}
@media (max-width: 480px) {
h1 {
font-size: 1.8rem;
}
button {
padding: 10px 20px;
font-size: 1.1rem;
min-width: 140px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🐎 马年接元宝 🐎</h1>
<div class="subtitle">丙午马年新春快乐！接元宝，迎好运！</div>
</div>
<div class="game-info">
<div class="info-box">
<h3>分数</h3>
<p id="score">0</p>
</div>
<div class="info-box">
<h3>生命值</h3>
<p id="lives">3</p>
</div>
<div class="info-box">
<h3>等级</h3>
<p id="level">1</p>
</div>
<div class="info-box">
<h3>最高分</h3>
<p id="highScore">0</p>
</div>
</div>
<canvas id="gameCanvas" width="750" height="500"></canvas>
<div class="controls">
<button id="startBtn">开始游戏</button>
<button id="pauseBtn">暂停游戏</button>
<button id="restartBtn">重新开始</button>
</div>
<div class="instructions">
<h3>游戏说明</h3>
<ul>
<li>使用 <strong>键盘左右箭头键</strong> 或 <strong>A/D键</strong> 控制马儿左右移动</li>
<li>接住掉落的 <strong>金色元宝</strong> 获得分数（+10分）</li>
<li>避开掉落的 <strong>红色爆竹</strong>，碰到会减少生命值（-1生命）</li>
<li>每获得100分升一级，游戏速度会加快</li>
<li>生命值为0时游戏结束，尽量获得高分吧！</li>
</ul>
<div class="legend">
<div class="legend-item">
<div class="legend-box legend-yuanbao"></div>
<span>元宝（+10分）</span>
</div>
<div class="legend-item">
<div class="legend-box legend-firecracker"></div>
<span>爆竹（-1生命）</span>
</div>
</div>
<p>祝您马年行大运，财源滚滚来！</p>
</div>
<div class="footer">
<p>© 2026 丙午马年春节 | 马年接元宝小游戏</p>
</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let gameRunning = false;
let gamePaused = false;
let score = 0;
let highScore = localStorage.getItem('yuanbaoHighScore') || 0;
let lives = 3;
let level = 1;
let gameSpeed = 3;
document.getElementById('score').textContent = score;
document.getElementById('highScore').textContent = highScore;
document.getElementById('lives').textContent = lives;
document.getElementById('level').textContent = level;
const player = {
x: canvas.width / 2 - 40,
y: canvas.height - 70,
width: 80,
height: 60,
speed: 8,
color: '#8B4513',
draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.fillStyle = '#A0522D';
ctx.fillRect(this.x + this.width - 10, this.y - 20, 30, 30);
ctx.fillStyle = '#8B0000';
ctx.fillRect(this.x + this.width - 5, this.y - 15, 5, 25);
ctx.fillStyle = '#8B0000';
ctx.fillRect(this.x - 5, this.y + 10, 5, 20);
ctx.fillStyle = '#A0522D';
ctx.fillRect(this.x + 10, this.y + this.height, 10, 15);
ctx.fillRect(this.x + this.width - 20, this.y + this.height, 10, 15);
ctx.fillStyle = '#000';
ctx.beginPath();
ctx.arc(this.x + this.width + 15, this.y - 5, 4, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#FFD700';
ctx.fillRect(this.x + 10, this.y - 10, this.width - 20, 10);
ctx.fillStyle = '#B8860B';
ctx.fillRect(this.x + 15, this.y - 8, this.width - 30, 3);
},
move(direction) {
if (direction === 'left' && this.x > 0) {
this.x -= this.speed;
}
if (direction === 'right' && this.x + this.width < canvas.width) {
this.x += this.speed;
}
}
};
let fallingItems = [];
const itemTypes = {
YUANBAO: 'yuanbao',
FIRECRACKER: 'firecracker'
};
class FallingItem {
constructor(type) {
this.type = type;
this.width = type === itemTypes.YUANBAO ? 30 : 25;
this.height = type === itemTypes.YUANBAO ? 25 : 35;
this.x = Math.random() * (canvas.width - this.width);
this.y = -this.height;
this.speed = gameSpeed + Math.random() * 2;
this.color = type === itemTypes.YUANBAO ? '#FFD700' : '#FF4500';
}
draw() {
if (this.type === itemTypes.YUANBAO) {
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.moveTo(this.x + this.width/2, this.y);
ctx.lineTo(this.x + this.width, this.y + this.height/3);
ctx.lineTo(this.x + this.width, this.y + 2*this.height/3);
ctx.lineTo(this.x + this.width/2, this.y + this.height);
ctx.lineTo(this.x, this.y + 2*this.height/3);
ctx.lineTo(this.x, this.y + this.height/3);
ctx.closePath();
ctx.fill();
ctx.fillStyle = '#B8860B';
ctx.fillRect(this.x + this.width/4, this.y + this.height/3, this.width/2, this.height/3);
} else {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.fillStyle = '#8B0000';
ctx.fillRect(this.x, this.y, this.width, 8);
ctx.fillRect(this.x, this.y + this.height - 8, this.width, 8);
ctx.fillStyle = '#2F4F4F';
ctx.fillRect(this.x + this.width/2 - 1, this.y - 10, 2, 10);
}
}
update() {
this.y += this.speed;
return this.y > canvas.height;
}
collidesWith(player) {
return this.x < player.x + player.width &&
this.x + this.width > player.x &&
this.y < player.y + player.height &&
this.y + this.height > player.y;
}
}
function drawBackground() {
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, '#8B0000');
gradient.addColorStop(1, '#B22222');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < 5; i++) {
const x = (canvas.width / 5) * i + 50;
const y = 50;
ctx.strokeStyle = '#FFD700';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, y - 30);
ctx.stroke();
ctx.fillStyle = '#FF4500';
ctx.beginPath();
ctx.ellipse(x, y, 25, 30, 0, 0, Math.PI * 2);
ctx.fill();
ctx.strokeStyle = '#FFD700';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.stroke();
ctx.fillStyle = '#FFD700';
for (let j = 0; j < 8; j++) {
ctx.fillRect(x - 2 + j * 5, y + 30, 2, 15);
}
ctx.fillStyle = '#FFD700';
ctx.font = 'bold 20px "Microsoft YaHei"';
ctx.textAlign = 'center';
ctx.fillText('福', x, y + 8);
}
ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
for (let i = 0; i < 3; i++) {
const x = (Date.now() / 30 + i * 200) % (canvas.width + 200) - 100;
const y = 150 + i * 40;
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.arc(x + 25, y - 10, 25, 0, Math.PI * 2);
ctx.arc(x + 50, y, 20, 0, Math.PI * 2);
ctx.arc(x + 25, y + 10, 25, 0, Math.PI * 2);
ctx.fill();
}
ctx.fillStyle = 'rgba(255, 215, 0, 0.2)';
ctx.font = 'bold 60px "Microsoft YaHei"';
ctx.textAlign = 'center';
ctx.fillText('马年大吉', canvas.width / 2, canvas.height / 2);
}
function generateItem() {
const type = Math.random() < 0.8 ? itemTypes.YUANBAO : itemTypes.FIRECRACKER;
fallingItems.push(new FallingItem(type));
}
function updateGame() {
if (!gameRunning || gamePaused) return;
if (Math.random() < 0.03 + level * 0.005) {
generateItem();
}
for (let i = fallingItems.length - 1; i >= 0; i--) {
const item = fallingItems[i];
const isOutOfScreen = item.update();
if (isOutOfScreen) {
fallingItems.splice(i, 1);
continue;
}
if (item.collidesWith(player)) {
if (item.type === itemTypes.YUANBAO) {
score += 10;
const newLevel = Math.floor(score / 100) + 1;
if (newLevel > level) {
level = newLevel;
gameSpeed += 0.5;
document.getElementById('level').textContent = level;
}
showBonusEffect(item.x + item.width/2, item.y + item.height/2, "+10");
} else {
lives--;
document.getElementById('lives').textContent = lives;
if (lives <= 0) {
gameOver();
return;
}
showDamageEffect(item.x + item.width/2, item.y + item.height/2, "-1");
}
fallingItems.splice(i, 1);
}
}
document.getElementById('score').textContent = score;
if (score > highScore) {
highScore = score;
document.getElementById('highScore').textContent = highScore;
localStorage.setItem('yuanbaoHighScore', highScore);
}
}
function showBonusEffect(x, y, text) {
ctx.fillStyle = '#FFD700';
ctx.font = 'bold 24px Arial';
ctx.textAlign = 'center';
ctx.fillText(text, x, y);
setTimeout(() => {
}, 300);
}
function showDamageEffect(x, y, text) {
ctx.fillStyle = '#FF4500';
ctx.font = 'bold 28px Arial';
ctx.textAlign = 'center';
ctx.fillText(text, x, y);
}
function drawGame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBackground();
fallingItems.forEach(item => item.draw());
player.draw();
if (gamePaused) {
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#FFD700';
ctx.font = 'bold 50px "Microsoft YaHei"';
ctx.textAlign = 'center';
ctx.fillText('游戏暂停', canvas.width / 2, canvas.height / 2);
ctx.font = 'bold 30px "Microsoft YaHei"';
ctx.fillText('按"继续游戏"按钮恢复', canvas.width / 2, canvas.height / 2 + 50);
}
if (!gameRunning && score > 0) {
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#FFD700';
ctx.font = 'bold 50px "Microsoft YaHei"';
ctx.textAlign = 'center';
ctx.fillText('游戏结束', canvas.width / 2, canvas.height / 2 - 50);
ctx.font = 'bold 40px "Microsoft YaHei"';
ctx.fillText(`最终得分: ${score}`, canvas.width / 2, canvas.height / 2 + 20);
if (score === highScore) {
ctx.fillStyle = '#FF4500';
ctx.fillText('新纪录!', canvas.width / 2, canvas.height / 2 + 80);
}
}
}
function gameLoop() {
updateGame();
drawGame();
requestAnimationFrame(gameLoop);
}
function startGame() {
if (gameRunning) return;
gameRunning = true;
gamePaused = false;
score = 0;
lives = 3;
level = 1;
gameSpeed = 3;
fallingItems = [];
document.getElementById('score').textContent = score;
document.getElementById('lives').textContent = lives;
document.getElementById('level').textContent = level;
for (let i = 0; i < 5; i++) {
setTimeout(() => generateItem(), i * 500);
}
}
function pauseGame() {
if (!gameRunning) return;
gamePaused = !gamePaused;
document.getElementById('pauseBtn').textContent = gamePaused ? '继续游戏' : '暂停游戏';
}
function restartGame() {
gameRunning = false;
gamePaused = false;
document.getElementById('pauseBtn').textContent = '暂停游戏';
startGame();
}
function gameOver() {
gameRunning = false;
gamePaused = false;
document.getElementById('pauseBtn').textContent = '暂停游戏';
}
const keys = {};
window.addEventListener('keydown', (e) => {
keys[e.key] = true;
if ([37, 38, 39, 40, 32].indexOf(e.keyCode) > -1) {
e.preventDefault();
}
});
window.addEventListener('keyup', (e) => {
keys[e.key] = false;
});
function handleInput() {
if (keys['ArrowLeft'] || keys['a'] || keys['A']) {
player.move('left');
}
if (keys['ArrowRight'] || keys['d'] || keys['D']) {
player.move('right');
}
}
function inputLoop() {
if (gameRunning && !gamePaused) {
handleInput();
}
requestAnimationFrame(inputLoop);
}
document.getElementById('startBtn').addEventListener('click', startGame);
document.getElementById('pauseBtn').addEventListener('click', pauseGame);
document.getElementById('restartBtn').addEventListener('click', restartGame);
function init() {
document.getElementById('highScore').textContent = highScore;
gameLoop();
inputLoop();
drawBackground();
player.draw();
ctx.fillStyle = '#FFD700';
ctx.font = 'bold 40px "Microsoft YaHei"';
ctx.textAlign = 'center';
ctx.fillText('点击"开始游戏"按钮', canvas.width / 2, canvas.height / 2 - 30);
ctx.fillText('开始马年接元宝！', canvas.width / 2, canvas.height / 2 + 30);
}
window.addEventListener('load', init);
</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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
color: #333;
}
.container {
max-width: 900px;
width: 100%;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
padding: 25px;
position: relative;
overflow: hidden;
border: 8px solid #e6b325;
}
.header {
text-align: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 3px dashed #e6b325;
}
h1 {
color: #c62828;
font-size: 2.8rem;
margin-bottom: 10px;
text-shadow: 2px 2px 0 #ffd54f;
letter-spacing: 2px;
}
.subtitle {
color: #5d4037;
font-size: 1.3rem;
font-weight: 600;
}
.game-area {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-bottom: 25px;
}
.game-container {
flex: 1;
min-width: 500px;
height: 500px;
background-color: #1a237e;
border-radius: 10px;
overflow: hidden;
position: relative;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
border: 5px solid #3949ab;
}
#gameCanvas {
width: 100%;
height: 100%;
display: block;
}
.info-panel {
flex: 1;
min-width: 300px;
background: linear-gradient(to bottom, #ffecb3, #ffcc80);
border-radius: 15px;
padding: 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border: 5px solid #ff9800;
}
.stats {
display: flex;
flex-direction: column;
gap: 20px;
}
.stat-box {
background-color: white;
border-radius: 12px;
padding: 18px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.stat-box:hover {
transform: translateY(-5px);
}
.stat-value {
font-size: 2.8rem;
font-weight: bold;
color: #d32f2f;
margin: 10px 0;
}
.stat-label {
font-size: 1.2rem;
color: #5d4037;
font-weight: 600;
}
.instructions {
background-color: white;
border-radius: 12px;
padding: 20px;
margin-top: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.instructions h3 {
color: #c62828;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.instructions ul {
padding-left: 20px;
}
.instructions li {
margin-bottom: 10px;
line-height: 1.5;
}
.controls {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 25px;
}
button {
padding: 15px 30px;
font-size: 1.2rem;
border: none;
border-radius: 50px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
#startBtn {
background: linear-gradient(to right, #4CAF50, #8BC34A);
color: white;
}
#startBtn:hover {
background: linear-gradient(to right, #388E3C, #689F38);
transform: scale(1.05);
}
#resetBtn {
background: linear-gradient(to right, #2196F3, #03A9F4);
color: white;
}
#resetBtn:hover {
background: linear-gradient(to right, #1976D2, #0288D1);
transform: scale(1.05);
}
.game-message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.95);
padding: 30px 50px;
border-radius: 15px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
z-index: 10;
display: none;
border: 5px solid #e6b325;
}
.game-message h2 {
color: #c62828;
margin-bottom: 15px;
font-size: 2.5rem;
}
.game-message p {
font-size: 1.4rem;
margin-bottom: 20px;
color: #333;
}
.decoration {
position: absolute;
font-size: 2rem;
color: #e6b325;
z-index: 1;
}
.decoration:nth-child(1) { top: 20px; left: 20px; }
.decoration:nth-child(2) { top: 20px; right: 20px; }
.decoration:nth-child(3) { bottom: 20px; left: 20px; }
.decoration:nth-child(4) { bottom: 20px; right: 20px; }
.footer {
margin-top: 25px;
text-align: center;
color: #5d4037;
font-size: 0.9rem;
}
@media (max-width: 850px) {
.game-area {
flex-direction: column;
}
.game-container, .info-panel {
min-width: 100%;
}
.game-container {
height: 400px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1><i class="fas fa-horse-head"></i> 马年接元宝 <i class="fas fa-coins"></i></h1>
<p class="subtitle">控制篮子左右移动，接住元宝得高分，避开马蹄铁！</p>
</div>
<div class="game-area">
<div class="game-container">
<canvas id="gameCanvas"></canvas>
<div class="game-message" id="gameMessage">
<h2 id="messageTitle">游戏结束</h2>
<p id="messageText">你的得分：<span id="finalScore">0</span></p>
<button id="restartBtn" style="margin: 0 auto;"><i class="fas fa-redo"></i> 再玩一次</button>
</div>
<div class="decoration">🐎</div>
<div class="decoration">💰</div>
<div class="decoration">🧧</div>
<div class="decoration">🎉</div>
</div>
<div class="info-panel">
<div class="stats">
<div class="stat-box">
<div class="stat-label">得分</div>
<div class="stat-value" id="score">0</div>
</div>
<div class="stat-box">
<div class="stat-label">时间</div>
<div class="stat-value" id="time">60</div>
</div>
<div class="stat-box">
<div class="stat-label">接住/错过</div>
<div class="stat-value" id="caughtCount">0/0</div>
</div>
<div class="instructions">
<h3><i class="fas fa-gamepad"></i> 游戏说明</h3>
<ul>
<li>使用 <strong>← → 箭头键</strong> 或 <strong>A D 键</strong> 控制篮子左右移动</li>
<li>接住金色元宝：<strong>+10 分</strong></li>
<li>接住红色福袋：<strong>+20 分</strong></li>
<li>避开黑色马蹄铁：<strong>-5 分</strong></li>
<li>游戏时间：60秒</li>
<li>得分越高，游戏速度越快！</li>
</ul>
</div>
</div>
</div>
</div>
<div class="controls">
<button id="startBtn"><i class="fas fa-play-circle"></i> 开始游戏</button>
<button id="resetBtn"><i class="fas fa-sync-alt"></i> 重新开始</button>
</div>
<div class="footer">
<p>© 2026 丙午马年 | 祝您马到成功，财源滚滚！</p>
</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
let gameActive = false;
let score = 0;
let timeLeft = 60;
let gameTimer;
let droppedItems = [];
let basket = {
x: canvas.width / 2 - 50,
y: canvas.height - 80,
width: 100,
height: 40,
speed: 8
};
let caught = 0;
let missed = 0;
let difficulty = 1;
const scoreElement = document.getElementById('score');
const timeElement = document.getElementById('time');
const caughtCountElement = document.getElementById('caughtCount');
const startBtn = document.getElementById('startBtn');
const resetBtn = document.getElementById('resetBtn');
const gameMessage = document.getElementById('gameMessage');
const messageTitle = document.getElementById('messageTitle');
const messageText = document.getElementById('messageText');
const finalScore = document.getElementById('finalScore');
const restartBtn = document.getElementById('restartBtn');
const ITEM_TYPES = {
GOLD_COIN: { color: '#FFD700', points: 10, radius: 15, speed: 3, probability: 0.7 },
RED_ENVELOPE: { color: '#D32F2F', points: 20, radius: 18, speed: 4, probability: 0.2 },
HORSESHOE: { color: '#212121', points: -5, radius: 12, speed: 5, probability: 0.1 }
};
function initGame() {
score = 0;
timeLeft = 60;
caught = 0;
missed = 0;
difficulty = 1;
droppedItems = [];
basket.x = canvas.width / 2 - 50;
updateUI();
gameMessage.style.display = 'none';
}
function updateUI() {
scoreElement.textContent = score;
timeElement.textContent = timeLeft;
caughtCountElement.textContent = `${caught}/${missed}`;
}
function createItem() {
if (!gameActive) return;
const rand = Math.random();
let selectedType;
let cumulativeProb = 0;
for (const type in ITEM_TYPES) {
cumulativeProb += ITEM_TYPES[type].probability;
if (rand <= cumulativeProb) {
selectedType = ITEM_TYPES[type];
break;
}
}
const item = {
x: Math.random() * (canvas.width - 40) + 20,
y: -30,
radius: selectedType.radius,
color: selectedType.color,
points: selectedType.points,
speed: selectedType.speed * difficulty,
type: selectedType === ITEM_TYPES.GOLD_COIN ? 'coin' :
selectedType === ITEM_TYPES.RED_ENVELOPE ? 'envelope' : 'horseshoe'
};
droppedItems.push(item);
}
function drawBasket() {
ctx.fillStyle = '#8D6E63';
ctx.fillRect(basket.x, basket.y, basket.width, basket.height);
ctx.fillStyle = '#5D4037';
ctx.fillRect(basket.x - 5, basket.y - 5, basket.width + 10, 5);
ctx.fillStyle = '#A1887F';
ctx.fillRect(basket.x + 5, basket.y + 5, basket.width - 10, basket.height - 10);
ctx.beginPath();
ctx.arc(basket.x + basket.width/2, basket.y - 10, 15, 0, Math.PI, true);
ctx.lineWidth = 8;
ctx.strokeStyle = '#5D4037';
ctx.stroke();
}
function drawItems() {
for (let i = 0; i < droppedItems.length; i++) {
const item = droppedItems[i];
ctx.beginPath();
ctx.arc(item.x, item.y, item.radius, 0, Math.PI * 2);
if (item.type === 'coin') {
ctx.fillStyle = item.color;
ctx.fill();
ctx.fillStyle = '#FFC107';
ctx.beginPath();
ctx.arc(item.x, item.y, item.radius * 0.6, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#5D4037';
ctx.font = 'bold 14px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('福', item.x, item.y);
}
else if (item.type === 'envelope') {
ctx.fillStyle = item.color;
ctx.fill();
ctx.fillStyle = '#FFD700';
ctx.beginPath();
ctx.arc(item.x, item.y, item.radius * 0.4, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#FFFFFF';
ctx.font = 'bold 16px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('福', item.x, item.y);
}
else {
ctx.fillStyle = item.color;
ctx.fill();
ctx.strokeStyle = '#757575';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(item.x, item.y, item.radius * 0.7, 0.2 * Math.PI, 0.8 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(item.x, item.y, item.radius * 0.7, 1.2 * Math.PI, 1.8 * Math.PI);
ctx.stroke();
}
}
}
function updateItems() {
for (let i = droppedItems.length - 1; i >= 0; i--) {
const item = droppedItems[i];
item.y += item.speed;
if (item.y + item.radius > basket.y &&
item.x > basket.x &&
item.x < basket.x + basket.width &&
item.y - item.radius < basket.y + basket.height) {
score += item.points;
caught++;
if (score > 0 && score % 50 === 0) {
difficulty += 0.2;
}
droppedItems.splice(i, 1);
updateUI();
continue;
}
if (item.y > canvas.height + item.radius) {
if (item.points > 0) {
missed++;
}
droppedItems.splice(i, 1);
updateUI();
}
}
}
function drawBackground() {
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, '#1a237e');
gradient.addColorStop(1, '#283593');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
for (let i = 0; i < 50; i++) {
const x = (i * 17) % canvas.width;
const y = (i * 23) % canvas.height;
ctx.beginPath();
ctx.arc(x, y, 1, 0, Math.PI * 2);
ctx.fill();
}
ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
for (let i = 0; i < 3; i++) {
const x = (Date.now() / 50 + i * 200) % (canvas.width + 200) - 100;
const y = 50 + i * 70;
drawCloud(x, y, 30);
}
}
function drawCloud(x, y, size) {
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.arc(x + size * 0.8, y - size * 0.3, size * 0.8, 0, Math.PI * 2);
ctx.arc(x + size * 1.5, y, size, 0, Math.PI * 2);
ctx.arc(x + size * 0.8, y + size * 0.3, size * 0.8, 0, Math.PI * 2);
ctx.fill();
}
function gameLoop() {
if (!gameActive) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBackground();
updateItems();
drawItems();
drawBasket();
requestAnimationFrame(gameLoop);
}
function startGame() {
if (gameActive) return;
initGame();
gameActive = true;
gameTimer = setInterval(function() {
timeLeft--;
updateUI();
if (timeLeft <= 0) {
endGame();
}
}, 1000);
const itemInterval = setInterval(function() {
if (!gameActive) {
clearInterval(itemInterval);
return;
}
createItem();
}, 500);
gameLoop();
startBtn.disabled = true;
startBtn.innerHTML = '<i class="fas fa-pause-circle"></i> 游戏进行中';
startBtn.style.background = 'linear-gradient(to right, #757575, #9E9E9E)';
}
function endGame() {
gameActive = false;
clearInterval(gameTimer);
messageTitle.textContent = "游戏结束！";
messageText.innerHTML = `你的最终得分：<span id="finalScore">${score}</span><br>接住: ${caught}个 | 错过: ${missed}个`;
finalScore.textContent = score;
gameMessage.style.display = 'block';
let comment = "";
if (score >= 300) {
comment = "太棒了！你是接元宝大师！";
} else if (score >= 200) {
comment = "厉害！财运亨通！";
} else if (score >= 100) {
comment = "不错！再接再厉！";
} else {
comment = "继续努力，财神会眷顾你的！";
}
messageText.innerHTML += `<br><small>${comment}</small>`;
startBtn.disabled = false;
startBtn.innerHTML = '<i class="fas fa-play-circle"></i> 重新开始';
startBtn.style.background = 'linear-gradient(to right, #4CAF50, #8BC34A)';
}
function resetGame() {
gameActive = false;
clearInterval(gameTimer);
initGame();
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBackground();
drawBasket();
startBtn.disabled = false;
startBtn.innerHTML = '<i class="fas fa-play-circle"></i> 开始游戏';
startBtn.style.background = 'linear-gradient(to right, #4CAF50, #8BC34A)';
}
document.addEventListener('keydown', function(e) {
if (!gameActive) return;
if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') {
basket.x = Math.max(0, basket.x - basket.speed);
} else if (e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') {
basket.x = Math.min(canvas.width - basket.width, basket.x + basket.speed);
}
});
startBtn.addEventListener('click', startGame);
resetBtn.addEventListener('click', resetGame);
restartBtn.addEventListener('click', function() {
gameMessage.style.display = 'none';
startGame();
});
window.addEventListener('resize', function() {
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
basket.x = Math.min(basket.x, canvas.width - basket.width);
});
drawBackground();
drawBasket();
let touchStartX = 0;
canvas.addEventListener('touchstart', function(e) {
if (!gameActive) return;
touchStartX = e.touches[0].clientX;
e.preventDefault();
});
canvas.addEventListener('touchmove', function(e) {
if (!gameActive) return;
const touchX = e.touches[0].clientX;
const touchDelta = touchX - touchStartX;
if (Math.abs(touchDelta) > 5) {
if (touchDelta > 0) {
basket.x = Math.min(canvas.width - basket.width, basket.x + basket.speed);
} else {
basket.x = Math.max(0, basket.x - basket.speed);
}
touchStartX = touchX;
}
e.preventDefault();
});
</script>
</body>
</html>
浙公网安备 33010602011771号