实用指南：双节征文｜月满华诞・码向未来：互联网大厂的中秋仪式感拆解 + 中秋趣味小游戏实战
前言
提及中秋，大家脑海中最先浮现的是什么？我想那一定是裹着团圆寓意的中秋月饼。月饼作为中秋不可或缺的仪式感，想必不少朋友已经收到了公司精心准备的月饼礼盒。而互联网大厂的中秋礼盒，往往藏着巧思与新意，总能成为大家热议的焦点。接下来，就让我们一同揭开这些大厂中秋礼盒的神秘面纱，看看这份 “中秋限定惊喜” 里，究竟藏着哪些不一般的巧意吧！
文章目录
一、互联网大厂的中秋礼盒
创新知乐
首先让我们看看咱们CSDN本次2025年的中秋礼盒吧！本次中秋礼盒的名称叫 “躺月事务所” ，礼盒本身既是收纳筐也具有凳椅功能、还有带 “福” 字的护手暖物、以及“好运常灯” 挂饰以及拜月毯坐垫等，整体充满可爱的中秋氛围与巧思设计。
腾讯
今年，腾讯的中秋礼盒主题为「云启·探月」。打开礼盒，除了能品尝到六种口味的月饼，还能通过扫码与礼盒互动。腾讯的中秋礼蕴藏科技温情，化作未来之路的月光。
蚂蚁集团
这个中秋，蚂蚁集团以「和未来碰一下」为名，邀你一起暂别循规蹈矩的团圆，以梦想为推进器，以信念为灯塔，我们和未来碰一下！
- 礼盒内含：
广州酒家桃山皮月饼六重风味、蚂蚁月球小镇公仔盲盒。
京东
京东本次的中秋礼盒联名景德镇御窑博物馆，以千年瓷艺演绎团圆意象。JOY与伙伴们寄宿于瓷器意象中，传递守护之意。六味月饼与茶包延续经典瓷纹造型，古树茶香与团圆氛围叠合，文化感与口味体验并存。
百度
百度今年的中秋礼盒也是挺实用，除了月饼外，还有一个充电宝和斜挎包，颜值相当在线。礼盒内含三重惊喜+定制心意，图拉斯×百度联名移动电源蓝/白/奶咖三色随机，以及蓝灰/黑灰/绿灰三款配色的多功能斜挎背包，随礼还附赠手写贺卡。
小米
小米集团的中秋礼盒以“御风逐月”为主题，来表达对大家的美好祝愿。礼盒内含：15周年里程杯、八款定制月饼。
美团
美团本次延续「最美的团圆」主题，以两把潮流感十足的月亮椅作为视觉焦点，美团黄与棋盘格营造出强烈的年轻氛围。礼盒内含六款月饼，涵盖流心、酥皮到传统五仁，口味丰富，兼顾多样体验。
大疆
大疆以 Allunaggio (硬核登月) 为主题，将礼盒打造成巨大的Osmo Action运动相机。每一次的创新，都源于对极致的追求。愿这大「 Action」，为你带来与众不同的中秋精彩。
- 大疆2025中秋礼盒内容：
Osmo Action积木套装×1、陶陶居月饼×6。
快手
今年中秋，快手联名国民级影视剧IP《武林外传》，以「五湖四海同福再聚首，吃喝玩乐老铁庆中秋」为主题，推出两款中秋礼盒——同福·吃喝礼和同福·玩乐礼，带你重返同福，重温经典！
这个礼盒真的是沉甸甸的厚重，是我见过最大最重最有情怀的中秋礼盒！礼盒外形为可开门的同福客栈手提皮箱，配备一把铜锁，满载惊喜与情怀。两套礼盒内的选品也各不相同。
抖音文创
抖音文创2025中秋礼盒，以窗外的明月为灵感，带来「窗前明月光」的心意好礼。窗不同，景各异，但抬头望，皆是同一片月光。
外包装化作一幅月夜美景——蓝黄交融的渐变设计，宛若月光流转，悄然洒落人间。渐变单肩包将月光留存，光栅卡冰箱贴连接思念，香薰蜡烛点燃秋夜温馨，专属杯垫托举美好时光，四枚月饼带来甜蜜心意。
小红书
小红书的礼盒也是众多大厂中贼有调性的一款。今年他们家的礼盒是「五感」俱有：味觉——月饼；听觉——音箱；嗅觉——香挂；触觉——壮锦工艺酒壶。
二、属于程序员的中秋浪漫
那么程序员该如何解锁一个难忘的中秋？我想，答案或许就藏在自己最擅长的代码里 —— 用一行行代码编织出一款专属编程小游戏，让指尖的逻辑与中秋的浪漫撞个满怀，便是独属于程序员的节日仪式感。下面我们就一起亲手打造这款充满中秋味的「月饼消消乐」小游戏吧！
三、月饼消消乐
中秋月饼消消乐是一款基于HTML5、CSS3和JavaScript开发的节日主题休闲游戏。游戏以传统中秋节为背景，玩家通过消除相同类型的月饼获得分数，在限定时间内达到目标分数即可获胜。
3.1 游戏展示
3.2 玩法介绍
点击两个月饼，如果它们类型相同且相邻，则会消除
消除月饼获得分数，上方月饼会下落填补空缺
在60秒内达到500分即可获胜
连续消除可以获得额外分数奖励
3.3 游戏特色
3.3.1 中秋主题色彩艺术
游戏在背景上选择采用深蓝色夜空作为主色调，营造出宁静祥和的中秋夜晚氛围。在此基础上，巧妙融入金色、红色等传统中秋色彩：
金色象征明月与丰收，用于月饼、得分显示和重要界面元素
红色代表喜庆与团圆，体现在灯笼装饰和节日氛围营造
暖色调点缀如橙色、黄色，增强节日的温馨感
3.3.2 动态场景：让中秋夜“活”起来
利用了
JavaScript对月亮采用径向渐变和柔和光晕，模拟真实月亮的质感。灯笼添加了自然的摆动动画，仿佛随风轻轻摇曳。
- 并且还有随机生成的桂花以不同速度和轨迹飘落
- 缓缓飘动的云彩从屏幕一侧缓缓漂移到另一侧，营造时间流动感
3.3.3 响应式设计：全设备适配
对于月饼消消乐游戏，采用完全响应式布局，确保在各种屏幕尺寸上都能提供一致的优质体验。
- 还提供了月饼选中状态的自然缩放变化
- 消除时的渐变消失动画，分数更新的流畅数字变化
四、代码实现
4.1 HTML结构
<!-- 装饰元素 -->
<div class="moon"></div>
<div class="lantern lantern-1"></div>
<!-- 游戏主要内容 -->
<div class="game-container">
<div class="game-info">...</div>
<div class="game-board" id="gameBoard">...</div>
<div class="controls">...</div>
</div>4.2 CSS关键技术
4.2.1 渐变背景与毛玻璃效果
body {
background: linear-gradient(135deg, #0a0e2a, #1a1f4b, #2c1b47);
}
.game-board {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(5px);
}4.2.2 动画效果实现
/* 月亮浮动动画 */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
/* 灯笼摆动动画 */
@keyframes swing {
0%, 100% { transform: rotate(-8deg); }
50% { transform: rotate(8deg); }
}
/* 桂花飘落动画 */
@keyframes fall {
0% {
transform: translateY(-100px) rotate(0deg);
opacity: 0;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}4.2.3 月饼样式设计
.mooncake {
border-radius: 50%;
background: linear-gradient(135deg, #d2691e, #8b4513);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
}4.3 JavaScript游戏逻辑
4.3.1 游戏状态管理
const gameState = {
score: 0,
timeLeft: config.gameTime,
selectedMooncake: null,
isProcessing: false,
gameOver: false,
timer: null
};4.3.2 游戏初始化
function initGame() {
// 重置游戏状态
gameState.score = 0;
gameState.timeLeft = config.gameTime;
// 创建游戏棋盘
createBoard();
// 开始计时器
startTimer();
}4.3.3 月饼点击处理
function handleMooncakeClick(mooncake) {
if (!gameState.selectedMooncake) {
// 选择第一个月饼
gameState.selectedMooncake = mooncake;
mooncake.classList.add('selected');
} else {
// 检查是否可消除
if (isAdjacent && type1 === type2) {
eliminateMooncakes([gameState.selectedMooncake, mooncake]);
}
}
}4.3.4消除逻辑
function eliminateMooncakes(mooncakes) {
// 标记匹配状态
mooncakes.forEach(mooncake => {
mooncake.classList.add('matched');
});
// 增加分数
gameState.score += 20;
// 延迟后移除并填充新月饼
setTimeout(() => {
removeMatchedMooncakes();
fillEmptySpaces();
}, 600);
}五、完整游戏代码
<!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.0.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
}
body {
background: linear-gradient(135deg, #0a0e2a, #1a1f4b, #2c1b47);
color: #fff;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
overflow-x: hidden;
position: relative;
}
/* 装饰元素 */
.moon {
position: fixed;
top: 20px;
right: 20px;
width: 120px;
height: 120px;
background: radial-gradient(circle at 30% 30%, #fff9c4, #ffd54f);
border-radius: 50%;
box-shadow: 0 0 50px rgba(255, 215, 79, 0.8);
z-index: -1;
animation: float 8s ease-in-out infinite;
}
.moon::before {
content: '';
position: absolute;
top: 20px;
left: 30px;
width: 30px;
height: 30px;
background: rgba(0, 0, 0, 0.1);
border-radius: 50%;
}
.moon::after {
content: '';
position: absolute;
top: 50px;
left: 60px;
width: 20px;
height: 20px;
background: rgba(0, 0, 0, 0.1);
border-radius: 50%;
}
.lantern {
position: fixed;
width: 50px;
height: 70px;
background: linear-gradient(to bottom, #e53935, #b71c1c);
border-radius: 25px;
box-shadow: 0 0 25px rgba(229, 57, 53, 0.8);
animation: swing 6s ease-in-out infinite;
z-index: -1;
}
.lantern::before {
content: '';
position: absolute;
top: -12px;
left: 20px;
width: 10px;
height: 15px;
background: #ff9800;
border-radius: 5px;
}
.lantern::after {
content: '';
position: absolute;
bottom: -18px;
left: 23px;
width: 4px;
height: 18px;
background: #ff9800;
border-radius: 2px;
}
.lantern-1 {
top: 15%;
left: 5%;
}
.lantern-2 {
bottom: 15%;
right: 5%;
animation-delay: -3s;
}
.lantern-3 {
top: 40%;
left: 3%;
animation-delay: -1.5s;
transform: scale(0.8);
}
.lantern-4 {
bottom: 30%;
right: 3%;
animation-delay: -4.5s;
transform: scale(0.8);
}
.cloud {
position: fixed;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
filter: blur(8px);
z-index: -1;
animation: drift 30s linear infinite;
}
.cloud-1 {
width: 150px;
height: 80px;
top: 10%;
left: -100px;
animation-delay: 0s;
}
.cloud-2 {
width: 200px;
height: 100px;
top: 25%;
right: -150px;
animation-delay: -10s;
animation-direction: reverse;
}
.cloud-3 {
width: 120px;
height: 60px;
bottom: 20%;
left: -80px;
animation-delay: -5s;
}
.osmanthus {
position: fixed;
width: 8px;
height: 8px;
background: #ffd54f;
border-radius: 50%;
opacity: 0;
z-index: -1;
animation: fall 15s linear infinite;
}
/* 游戏内容区域 */
.header {
text-align: center;
margin-bottom: 25px;
position: relative;
width: 100%;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
border: 2px solid rgba(255, 213, 79, 0.3);
box-shadow: 0 0 20px rgba(255, 213, 79, 0.2);
backdrop-filter: blur(5px);
}
.header h1 {
font-size: 3.2rem;
color: #ffd54f;
text-shadow: 0 0 15px rgba(255, 213, 79, 0.8);
margin-bottom: 10px;
letter-spacing: 8px;
position: relative;
display: inline-block;
}
.header h1::after {
content: '';
position: absolute;
bottom: -10px;
left: 10%;
width: 80%;
height: 3px;
background: linear-gradient(90deg, transparent, #ffd54f, transparent);
}
.header p {
font-size: 1.3rem;
color: #ffab91;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.game-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 25px;
max-width: 850px;
width: 100%;
position: relative;
z-index: 1;
}
.game-info {
display: flex;
justify-content: space-between;
width: 100%;
background: rgba(255, 255, 255, 0.08);
padding: 18px 30px;
border-radius: 20px;
border: 2px solid #ffd54f;
box-shadow: 0 0 20px rgba(255, 213, 79, 0.3);
backdrop-filter: blur(5px);
}
.info-item {
text-align: center;
flex: 1;
}
.info-label {
font-size: 1.1rem;
color: #ffab91;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.info-value {
font-size: 2rem;
font-weight: bold;
color: #ffd54f;
text-shadow: 0 0 10px rgba(255, 213, 79, 0.5);
}
.game-board {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 12px;
background: rgba(255, 255, 255, 0.05);
padding: 25px;
border-radius: 20px;
border: 3px solid #ffd54f;
box-shadow: 0 0 25px rgba(255, 213, 79, 0.4);
backdrop-filter: blur(5px);
width: 100%;
max-width: 550px;
position: relative;
overflow: hidden;
}
.game-board::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 20%, rgba(255, 213, 79, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 107, 107, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.mooncake {
width: 100%;
aspect-ratio: 1;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.6rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
user-select: none;
overflow: hidden;
}
.mooncake::before {
content: '';
position: absolute;
width: 80%;
height: 80%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
z-index: 1;
}
.mooncake::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3), transparent 70%);
z-index: 2;
}
.mooncake.selected {
transform: scale(0.92);
box-shadow: 0 0 0 4px #ffd54f, 0 0 20px #ffd54f;
z-index: 10;
}
.mooncake.matched {
animation: matchAnimation 0.6s ease forwards;
}
.mooncake-1 {
background: linear-gradient(135deg, #d2691e, #8b4513);
}
.mooncake-2 {
background: linear-gradient(135deg, #8b4513, #654321);
}
.mooncake-3 {
background: linear-gradient(135deg, #daa520, #b8860b);
}
.mooncake-4 {
background: linear-gradient(135deg, #ff6347, #cd5c5c);
}
.mooncake-5 {
background: linear-gradient(135deg, #9370db, #663399);
}
.mooncake-6 {
background: linear-gradient(135deg, #3cb371, #2e8b57);
}
.mooncake-text {
position: relative;
z-index: 3;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.controls {
display: flex;
gap: 20px;
margin-top: 15px;
}
button {
background: linear-gradient(135deg, #ffd54f, #ffb300);
color: #0a0e2a;
border: none;
padding: 14px 30px;
font-size: 1.2rem;
border-radius: 35px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
gap: 10px;
}
button:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
background: linear-gradient(135deg, #ffb300, #ff8f00);
}
button:active {
transform: translateY(2px);
}
.instructions {
background: rgba(255, 255, 255, 0.08);
padding: 25px;
border-radius: 20px;
margin-top: 25px;
max-width: 700px;
border: 2px solid rgba(255, 213, 79, 0.3);
box-shadow: 0 0 20px rgba(255, 213, 79, 0.2);
backdrop-filter: blur(5px);
}
.instructions h3 {
color: #ffd54f;
margin-bottom: 15px;
text-align: center;
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.instructions p {
line-height: 1.7;
margin-bottom: 12px;
font-size: 1.1rem;
}
.game-over {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 100;
display: none;
}
.game-over-content {
background: linear-gradient(135deg, #1a1f4b, #0a0e2a);
padding: 50px;
border-radius: 25px;
text-align: center;
border: 3px solid #ffd54f;
box-shadow: 0 0 40px rgba(255, 213, 79, 0.6);
max-width: 550px;
width: 90%;
position: relative;
overflow: hidden;
}
.game-over-content::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 213, 79, 0.1) 0%, transparent 70%);
animation: rotate 20s linear infinite;
pointer-events: none;
}
.game-over h2 {
font-size: 2.8rem;
color: #ffd54f;
margin-bottom: 25px;
text-shadow: 0 0 15px rgba(255, 213, 79, 0.7);
position: relative;
z-index: 1;
}
.final-score {
font-size: 2rem;
color: #ffab91;
margin-bottom: 35px;
position: relative;
z-index: 1;
}
/* 动画定义 */
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
@keyframes swing {
0%, 100% {
transform: rotate(-8deg);
}
50% {
transform: rotate(8deg);
}
}
@keyframes drift {
0% {
transform: translateX(-100px);
}
100% {
transform: translateX(calc(100vw + 100px));
}
}
@keyframes fall {
0% {
transform: translateY(-100px) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
@keyframes matchAnimation {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.3);
opacity: 0.7;
}
100% {
transform: scale(0);
opacity: 0;
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.game-board {
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
padding: 20px;
max-width: 450px;
}
.mooncake {
font-size: 1.3rem;
}
.header h1 {
font-size: 2.5rem;
letter-spacing: 5px;
}
.info-value {
font-size: 1.7rem;
}
.lantern {
transform: scale(0.7);
}
}
@media (max-width: 480px) {
.game-board {
grid-template-columns: repeat(5, 1fr);
grid-gap: 8px;
padding: 15px;
max-width: 350px;
}
.mooncake {
font-size: 1.1rem;
}
.header h1 {
font-size: 2rem;
}
.info-value {
font-size: 1.5rem;
}
button {
padding: 12px 20px;
font-size: 1rem;
}
}
</style>
</head>
<body>
<!-- 装饰元素 -->
<div class="moon"></div>
<!-- 灯笼 -->
<div class="lantern lantern-1"></div>
<div class="lantern lantern-2"></div>
<div class="lantern lantern-3"></div>
<div class="lantern lantern-4"></div>
<!-- 云彩 -->
<div class="cloud cloud-1"></div>
<div class="cloud cloud-2"></div>
<div class="cloud cloud-3"></div>
<!-- 桂花飘落 -->
<div id="osmanthus-container"></div>
<!-- 游戏标题 -->
<div class="header">
<h1>中秋月饼消消乐</h1>
<p>点击相同的月饼进行消除，匹配二个相同月饼得分！共度欢乐中秋！</p>
</div>
<!-- 游戏容器 -->
<div class="game-container">
<!-- 游戏信息 -->
<div class="game-info">
<div class="info-item">
<div class="info-label">
<i class="fas fa-star"></i>
<span>分数</span>
</div>
<div class="info-value" id="score">0</div>
</div>
<div class="info-item">
<div class="info-label">
<i class="fas fa-hourglass-half"></i>
<span>剩余时间</span>
</div>
<div class="info-value" id="time">60</div>
</div>
<div class="info-item">
<div class="info-label">
<i class="fas fa-bullseye"></i>
<span>目标分数</span>
</div>
<div class="info-value" id="target">500</div>
</div>
</div>
<!-- 游戏棋盘 -->
<div class="game-board" id="gameBoard">
<!-- 月饼将通过JavaScript动态生成 -->
</div>
<!-- 控制按钮 -->
<div class="controls">
<button id="restartBtn">
<i class="fas fa-redo"></i>
<span>重新开始</span>
</button>
<button id="hintBtn">
<i class="fas fa-lightbulb"></i>
<span>提示</span>
</button>
</div>
</div>
<!-- 游戏说明 -->
<div class="instructions">
<h3>
<i class="fas fa-info-circle"></i>
<span>游戏规则</span>
</h3>
<p>1. 点击两个月饼，如果它们类型相同且相邻，则会消除</p>
<p>2. 消除月饼获得分数，上方月饼会下落填补空缺</p>
<p>3. 在60秒内达到500分即可获胜</p>
<p>4. 连续消除可以获得额外分数奖励</p>
</div>
<!-- 游戏结束界面 -->
<div class="game-over" id="gameOver">
<div class="game-over-content">
<h2 id="gameResult">游戏结束</h2>
<div class="final-score">最终得分: <span id="finalScore">0</span></div>
<button id="playAgainBtn">
<i class="fas fa-play-circle"></i>
<span>再玩一次</span>
</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 创建桂花飘落效果
function createOsmanthus() {
const container = document.getElementById('osmanthus-container');
for (let i = 0; i < 30; i++) {
const osmanthus = document.createElement('div');
osmanthus.classList.add('osmanthus');
// 随机位置和动画延迟
const left = Math.random() * 100;
const delay = Math.random() * 15;
const duration = 10 + Math.random() * 10;
osmanthus.style.left = `${left}%`;
osmanthus.style.animationDelay = `${delay}s`;
osmanthus.style.animationDuration = `${duration}s`;
container.appendChild(osmanthus);
}
}
createOsmanthus();
// 游戏配置
const config = {
rows: 5,
cols: 5,
types: 6, // 月饼种类数量
targetScore: 500,
gameTime: 60 // 游戏时间(秒)
};
// 游戏状态
let gameState = {
score: 0,
timeLeft: config.gameTime,
selectedMooncake: null,
isProcessing: false,
gameOver: false,
timer: null
};
// DOM 元素
const gameBoard = document.getElementById('gameBoard');
const scoreElement = document.getElementById('score');
const timeElement = document.getElementById('time');
const targetElement = document.getElementById('target');
const restartBtn = document.getElementById('restartBtn');
const hintBtn = document.getElementById('hintBtn');
const gameOverScreen = document.getElementById('gameOver');
const gameResult = document.getElementById('gameResult');
const finalScoreElement = document.getElementById('finalScore');
const playAgainBtn = document.getElementById('playAgainBtn');
// 初始化游戏
function initGame() {
// 清除之前的计时器
if (gameState.timer) {
clearInterval(gameState.timer);
}
// 重置游戏状态
gameState.score = 0;
gameState.timeLeft = config.gameTime;
gameState.selectedMooncake = null;
gameState.isProcessing = false;
gameState.gameOver = false;
// 更新UI
scoreElement.textContent = gameState.score;
timeElement.textContent = gameState.timeLeft;
targetElement.textContent = config.targetScore;
// 隐藏游戏结束界面
gameOverScreen.style.display = 'none';
// 创建游戏棋盘
createBoard();
// 开始计时器
startTimer();
}
// 创建游戏棋盘
function createBoard() {
gameBoard.innerHTML = '';
// 设置网格布局
gameBoard.style.gridTemplateColumns = `repeat(${config.cols}, 1fr)`;
// 创建月饼元素
for (let row = 0; row < config.rows; row++) {
for (let col = 0; col < config.cols; col++) {
const mooncake = document.createElement('div');
const type = Math.floor(Math.random() * config.types) + 1;
mooncake.className = `mooncake mooncake-${type}`;
mooncake.dataset.row = row;
mooncake.dataset.col = col;
mooncake.dataset.type = type;
// 添加点击事件
mooncake.addEventListener('click', () => handleMooncakeClick(mooncake));
// 添加月饼馅料文字
const fillings = ['莲蓉', '豆沙', '五仁', '蛋黄', '枣泥', '水果'];
const text = document.createElement('div');
text.className = 'mooncake-text';
text.textContent = fillings[type-1];
mooncake.appendChild(text);
gameBoard.appendChild(mooncake);
}
}
}
// 处理月饼点击
function handleMooncakeClick(mooncake) {
if (gameState.isProcessing || gameState.gameOver) return;
// 如果没有选中的月饼，选中当前月饼
if (!gameState.selectedMooncake) {
gameState.selectedMooncake = mooncake;
mooncake.classList.add('selected');
return;
}
// 如果点击的是已选中的月饼，取消选择
if (gameState.selectedMooncake === mooncake) {
mooncake.classList.remove('selected');
gameState.selectedMooncake = null;
return;
}
// 检查两个月饼是否类型相同且相邻
const row1 = parseInt(gameState.selectedMooncake.dataset.row);
const col1 = parseInt(gameState.selectedMooncake.dataset.col);
const type1 = gameState.selectedMooncake.dataset.type;
const row2 = parseInt(mooncake.dataset.row);
const col2 = parseInt(mooncake.dataset.col);
const type2 = mooncake.dataset.type;
const isAdjacent =
(Math.abs(row1 - row2) === 1 && col1 === col2) ||
(Math.abs(col1 - col2) === 1 && row1 === row2);
if (isAdjacent && type1 === type2) {
// 消除两个月饼
eliminateMooncakes([gameState.selectedMooncake, mooncake]);
} else {
// 取消之前的选择，选择新的月饼
gameState.selectedMooncake.classList.remove('selected');
gameState.selectedMooncake = mooncake;
mooncake.classList.add('selected');
}
}
// 消除月饼
function eliminateMooncakes(mooncakes) {
gameState.isProcessing = true;
// 标记为已匹配
mooncakes.forEach(mooncake => {
mooncake.classList.add('matched');
});
// 增加分数
gameState.score += 20;
scoreElement.textContent = gameState.score;
// 延迟后移除月饼并填充
setTimeout(() => {
// 移除匹配的月饼
mooncakes.forEach(mooncake => {
mooncake.dataset.type = '0'; // 标记为空
mooncake.className = 'mooncake';
mooncake.innerHTML = '';
});
// 填充空白位置
fillEmptySpaces();
// 重置选择状态
gameState.selectedMooncake.classList.remove('selected');
gameState.selectedMooncake = null;
gameState.isProcessing = false;
// 检查游戏是否结束
checkGameOver();
}, 600);
}
// 填充空白位置
function fillEmptySpaces() {
// 从下往上，从右向左填充
for (let col = 0; col < config.cols; col++) {
let emptySpaces = 0;
for (let row = config.rows - 1; row >= 0; row--) {
const mooncake = getMooncakeAt(row, col);
if (mooncake.dataset.type === '0') {
emptySpaces++;
} else if (emptySpaces > 0) {
// 将月饼向下移动
const targetRow = row + emptySpaces;
const targetMooncake = getMooncakeAt(targetRow, col);
if (targetMooncake) {
// 交换数据
targetMooncake.dataset.type = mooncake.dataset.type;
targetMooncake.className = `mooncake mooncake-${mooncake.dataset.type}`;
// 更新月饼馅料文字
const fillings = ['莲蓉', '豆沙', '五仁', '蛋黄', '枣泥', '水果'];
const text = document.createElement('div');
text.className = 'mooncake-text';
text.textContent = fillings[mooncake.dataset.type-1];
targetMooncake.innerHTML = '';
targetMooncake.appendChild(text);
mooncake.dataset.type = '0';
mooncake.className = 'mooncake';
mooncake.innerHTML = '';
}
}
}
// 在顶部创建新的月饼
for (let row = 0; row < emptySpaces; row++) {
const mooncake = getMooncakeAt(row, col);
const type = Math.floor(Math.random() * config.types) + 1;
mooncake.dataset.type = type;
mooncake.className = `mooncake mooncake-${type}`;
// 添加月饼馅料文字
const fillings = ['莲蓉', '豆沙', '五仁', '蛋黄', '枣泥', '水果'];
const text = document.createElement('div');
text.className = 'mooncake-text';
text.textContent = fillings[type-1];
mooncake.appendChild(text);
}
}
}
// 获取指定位置的月饼
function getMooncakeAt(row, col) {
return document.querySelector(`.mooncake[data-row="${row}"][data-col="${col}"]`);
}
// 开始计时器
function startTimer() {
gameState.timer = setInterval(() => {
gameState.timeLeft--;
timeElement.textContent = gameState.timeLeft;
if (gameState.timeLeft <= 0) {
clearInterval(gameState.timer);
endGame(false);
}
}, 1000);
}
// 检查游戏是否结束
function checkGameOver() {
if (gameState.score >= config.targetScore) {
endGame(true);
}
}
// 结束游戏
function endGame(isWin) {
gameState.gameOver = true;
clearInterval(gameState.timer);
// 显示游戏结束界面
gameOverScreen.style.display = 'flex';
finalScoreElement.textContent = gameState.score;
if (isWin) {
gameResult.textContent = '恭喜获胜！';
gameResult.style.color = '#ffd54f';
} else {
gameResult.textContent = '游戏结束';
gameResult.style.color = '#e53935';
}
}
// 提示功能
hintBtn.addEventListener('click', function() {
if (gameState.isProcessing || gameState.gameOver) return;
// 简单提示：随机选择一个可交换的月饼并高亮显示
const mooncakes = document.querySelectorAll('.mooncake');
const randomIndex = Math.floor(Math.random() * mooncakes.length);
const randomMooncake = mooncakes[randomIndex];
randomMooncake.classList.add('selected');
setTimeout(() => {
randomMooncake.classList.remove('selected');
}, 1000);
});
// 重新开始游戏
restartBtn.addEventListener('click', initGame);
playAgainBtn.addEventListener('click', initGame);
// 初始化游戏
initGame();
});
</script>
</body>
</html>结语
从互联网大厂的中秋仪式感到实打实的中秋小游戏实战，咱们这波分享可算把节日氛围拉满啦！那么问题来啦 —— 这么多各具特色的中秋礼盒，你最 pick 哪一款？赶紧参与投票，让大家看看你的心头好吧！
浙公网安备 33010602011771号