消消乐
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<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', Tahoma, Geneva, Verdana, sans-serif;
-webkit-tap-highlight-color: transparent;
}
body {
background-color: #FFF8F0;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
background-image: radial-gradient(#ffd9aa 1px, transparent 1px);
background-size: 20px 20px;
touch-action: manipulation;
}
header {
text-align: center;
margin: 10px 0 15px;
width: 100%;
}
h1 {
color: #FF6B6B;
font-size: clamp(1.8rem, 6vw, 3.2rem);
text-shadow: 2px 2px 0 #FFD166, 4px 4px 0 rgba(0, 0, 0, 0.1);
letter-spacing: 1px;
position: relative;
display: inline-block;
}
h1::after {
content: "";
position: absolute;
bottom: -5px;
left: 10%;
width: 80%;
height: 3px;
background: linear-gradient(90deg, #FF6B6B, #4ECDC4, #FFD166);
border-radius: 2px;
}
.game-container {
width: 100%;
max-width: 600px;
min-height: 60vh;
background: rgba(255, 255, 255, 0.85);
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
padding: 15px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
overflow: hidden;
border: 1px solid #FFD166;
}
.game-container::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, transparent 20%, #FFECD1 20%, #FFECD1 80%, transparent 80%);
opacity: 0.1;
z-index: -1;
animation: rotate 60s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.stats-bar {
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 10px;
font-size: clamp(0.9rem, 3vw, 1.2rem);
color: #4A4A4A;
background: rgba(255, 255, 255, 0.7);
padding: 8px 12px;
border-radius: 30px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
flex-wrap: wrap;
gap: 5px;
}
.stats-bar div {
white-space: nowrap;
}
.bubbles-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 100%;
padding: 10px;
margin: 0 auto;
}
@media (min-width: 400px) {
.bubbles-container {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 600px) {
.bubbles-container {
grid-template-columns: repeat(5, 1fr);
}
}
.bubble {
aspect-ratio: 1;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
font-weight: bold;
font-size: clamp(0.8rem, 3vw, 1.1rem);
color: white;
text-align: center;
padding: 8px;
transform: scale(1);
transition: all 0.3s ease;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
box-shadow:
inset 0 -5px 10px rgba(0, 0, 0, 0.2),
inset 0 5px 10px rgba(255, 255, 255, 0.4),
0 3px 10px rgba(0, 0, 0, 0.15);
animation: float 3s ease-in-out infinite;
position: relative;
overflow: hidden;
word-break: break-word;
touch-action: manipulation;
}
.bubble::after {
content: "";
position: absolute;
top: 10%;
left: 20%;
width: 20%;
height: 20%;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
}
.bubble.selected {
transform: scale(1.05);
box-shadow:
inset 0 -3px 6px rgba(0, 0, 0, 0.2),
inset 0 3px 6px rgba(255, 255, 255, 0.6),
0 0 15px rgba(255, 255, 255, 0.8),
0 0 20px currentColor;
animation: pulse 1s infinite;
}
.bubble.matched {
transform: scale(0);
opacity: 0;
pointer-events: none;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.bubble:nth-child(6n+1) { background: linear-gradient(135deg, #FF6B6B, #FF8E8E); animation-delay: 0s; }
.bubble:nth-child(6n+2) { background: linear-gradient(135deg, #4ECDC4, #6EDBD6); animation-delay: 0.2s; }
.bubble:nth-child(6n+3) { background: linear-gradient(135deg, #FFD166, #FFDF8E); animation-delay: 0.4s; }
.bubble:nth-child(6n+4) { background: linear-gradient(135deg, #6A67CE, #8F8CFF); animation-delay: 0.6s; }
.bubble:nth-child(6n+5) { background: linear-gradient(135deg, #FF9E6D, #FFB798); animation-delay: 0.8s; }
.bubble:nth-child(6n+6) { background: linear-gradient(135deg, #6ACECE, #8CE0E0); animation-delay: 1s; }
.controls {
margin-top: 15px;
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
width: 100%;
max-width: 600px;
}
.btn {
padding: 12px 20px;
font-size: clamp(0.9rem, 3.5vw, 1.1rem);
font-weight: bold;
border: none;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 8px;
min-width: 100px;
justify-content: center;
touch-action: manipulation;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}
.btn:active {
transform: translateY(1px);
}
.btn-start {
background: linear-gradient(to right, #4ECDC4, #6ACECE);
color: white;
}
.btn-sound {
background: linear-gradient(to right, #FFD166, #FFDF8E);
color: #4A4A4A;
}
.btn-reset {
background: linear-gradient(to right, #FF9E6D, #FFB798);
color: white;
}
.victory-message {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.95);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
padding: 20px;
text-align: center;
}
.victory-message.show {
opacity: 1;
pointer-events: all;
}
.victory-message h2 {
font-size: clamp(2rem, 8vw, 3.5rem);
color: #FF6B6B;
margin-bottom: 15px;
text-shadow: 2px 2px 0 #FFD166;
}
.victory-message p {
font-size: clamp(1.1rem, 4vw, 1.5rem);
color: #4A4A4A;
margin-bottom: 20px;
}
.confetti {
position: absolute;
width: 8px;
height: 8px;
background: #FF6B6B;
opacity: 0;
}
.instructions {
margin-top: 15px;
background: rgba(255, 255, 255, 0.7);
padding: 15px;
border-radius: 12px;
width: 100%;
max-width: 600px;
text-align: center;
font-size: clamp(0.9rem, 3vw, 1rem);
color: #5A5A5A;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.instructions h3 {
color: #4ECDC4;
margin-bottom: 8px;
font-size: clamp(1rem, 4vw, 1.2rem);
}
.instructions ul {
text-align: left;
max-width: 500px;
margin: 10px auto;
padding-left: 20px;
}
.instructions li {
margin-bottom: 6px;
font-size: clamp(0.8rem, 3vw, 0.9rem);
}
.instructions i {
color: #FF6B6B;
margin-right: 6px;
font-size: clamp(0.8rem, 3vw, 0.9rem);
}
footer {
margin-top: 20px;
color: #888;
text-align: center;
font-size: clamp(0.7rem, 3vw, 0.9rem);
}
</style>
</head>
<body>
<header>
<h1>大学英语三级单词消消乐</h1>
</header>
<div class="game-container">
<div class="stats-bar">
<div><i class="fas fa-check-circle"></i> 已匹配: <span id="matched-count">0</span> 对</div>
<div><i class="fas fa-bullseye"></i> 剩余: <span id="remaining-count">0</span> 个</div>
<div><i class="fas fa-clock"></i> 时间: <span id="timer">00:00</span></div>
</div>
<div class="bubbles-container" id="bubbles-container">
<!-- 泡泡将由JavaScript动态生成 -->
</div>
<div class="victory-message" id="victory-message">
<h2>恭喜你挑战成功!</h2>
<p>你成功匹配了所有单词!</p>
<button class="btn btn-reset" id="play-again-btn">
<i class="fas fa-redo"></i> 再玩一次
</button>
</div>
</div>
<div class="controls">
<button class="btn btn-start" id="start-btn">
<i class="fas fa-play"></i> 开始游戏
</button>
<button class="btn btn-sound" id="sound-btn">
<i class="fas fa-volume-up"></i> 音效: 开
</button>
<button class="btn btn-reset" id="reset-btn">
<i class="fas fa-sync-alt"></i> 重置游戏
</button>
</div>
<div class="instructions">
<h3><i class="fas fa-lightbulb"></i> 游戏说明</h3>
<ul>
<li><i class="fas fa-mouse-pointer"></i> 点击泡泡选中单词(一次一个)</li>
<li><i class="fas fa-check-circle"></i> 英文单词和中文翻译匹配时,两个泡泡会消失</li>
<li><i class="fas fa-times-circle"></i> 匹配错误时,泡泡会恢复未选中状态</li>
<li><i class="fas fa-trophy"></i> 匹配所有单词即可获胜!</li>
</ul>
</div>
<footer>
<p>单词消消乐游戏 | 寓教于乐的学习体验</p>
</footer>
<!-- 音频元素 -->
<audio id="click-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-select-click-1109.mp3" preload="auto"></audio>
<audio id="match-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-unlock-game-notification-253.mp3" preload="auto"></audio>
<audio id="error-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-wrong-answer-fail-notification-946.mp3" preload="auto"></audio>
<audio id="win-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-winning-chimes-2015.mp3" preload="auto"></audio>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 游戏词汇数据
const vocabulary = [
{ english: "objection", chinese: "反对,异议" },
{ english: "vacation", chinese: "假期" },
{ english: "packet", chinese: "小包,小盒" },
{ english: "valid", chinese: "有效的" },
{ english: "palm", chinese: "手掌" },
{ english: "accompany", chinese: "陪伴" },
{ english: "pamphlet", chinese: "小册子" },
{ english: "accomplish", chinese: "达到,完成" },
{ english: "panel", chinese: "仪表盘,专家组" },
{ english: "accumulate", chinese: "积累,增加" },
{ english: "parallel", chinese: "平行(的)" },
{ english: "accurate", chinese: "精确的" },
{ english: "random", chinese: "任意的" },
{ english: "accuse", chinese: "控告" },
{ english: "range", chinese: "幅度 在..变动" },
{ english: "acknowledge", chinese: "承认" },
{ english: "rank", chinese: "职衔,阶层 分级" },
{ english: "barrier", chinese: "障碍" },
{ english: "salutation", chinese: "问候" },
{ english: "bathe", chinese: "给...洗澡" },
{ english: "satellite", chinese: "卫星" },
{ english: "battery", chinese: "电池" },
{ english: "scarce", chinese: "稀少的" },
{ english: "cargo", chinese: "货物" },
{ english: "scarcely", chinese: "几乎不" },
{ english: "cart", chinese: "手推车" },
{ english: "scare", chinese: "使害怕" },
{ english: "cartoon", chinese: "漫画" },
{ english: "scatter", chinese: "撒播" },
{ english: "cashier", chinese: "出纳员" },
{ english: "scenery", chinese: "风景" },
{ english: "cassette", chinese: "盒式磁带" },
{ english: "tablet", chinese: "药片" },
{ english: "cast", chinese: "投射(光、影子)" },
{ english: "tackle", chinese: "对付,处理" },
{ english: "casual", chinese: "漫不经心的" },
{ english: "target", chinese: "目标 瞄准" },
{ english: "catalogue", chinese: "目录 把.编目录" },
{ english: "undo", chinese: "解开,撤销" },
{ english: "cave", chinese: "山洞" },
{ english: "deceive", chinese: "欺骗" },
{ english: "maintain", chinese: "维持;保养" },
{ english: "decorate", chinese: "装饰" },
{ english: "management", chinese: "管理" },
{ english: "deed", chinese: "行为" },
{ english: "manual", chinese: "手工的" },
{ english: "defense", chinese: "防御" },
{ english: "navigation", chinese: "航海,导航" },
{ english: "definition", chinese: "定义" },
{ english: "obligation", chinese: "义务" },
{ english: "delegate", chinese: "代表 选派代表" },
{ english: "parameter", chinese: "参数,范围" },
{ english: "electronic", chinese: "电子的" },
{ english: "parcel", chinese: "包裹 分配" },
{ english: "elementary", chinese: "基本的" },
{ english: "parliament", chinese: "议会" },
{ english: "elevator", chinese: "电梯" },
{ english: "participant", chinese: "参加者" },
{ english: "eliminate", chinese: "根除" },
{ english: "passion", chinese: "热情" },
{ english: "fancy", chinese: "喜欢 别致的、昂贵的" },
{ english: "ratio", chinese: "比率" },
{ english: "fatal", chinese: "致命的" },
{ english: "raw", chinese: "自然的,未加工的" },
{ english: "generate", chinese: "生成,产生" },
{ english: "realistic", chinese: "现实的" },
{ english: "headquarters", chinese: "总部" },
{ english: "receipt", chinese: "收据" },
{ english: "imitation", chinese: "模仿" },
{ english: "scenic", chinese: "景色优美的" },
{ english: "immigrant", chinese: "外来移民" },
{ english: "scheme", chinese: "计划" },
{ english: "immigrate", chinese: "使移民入境" },
{ english: "scholarship", chinese: "奖学金" },
{ english: "implication", chinese: "暗指" },
{ english: "screw", chinese: "螺丝 拧紧" },
{ english: "impose", chinese: "把...强加于" },
{ english: "seal", chinese: "印章 密封" },
{ english: "lag", chinese: "落后于" },
{ english: "section", chinese: "部分" },
{ english: "secure", chinese: "安全的 使安全" },
{ english: "security", chinese: "安全(pl.)证券" },
{ english: "tax", chinese: "税 对...征税" },
{ english: "telescope", chinese: "望远镜" },
{ english: "delete", chinese: "删除" },
{ english: "teller", chinese: "出纳员" },
{ english: "delivery", chinese: "投递" },
{ english: "union", chinese: "工会,联盟" },
{ english: "democracy", chinese: "民主(制)" },
{ english: "valley", chinese: "山谷" },
{ english: "demonstrate", chinese: "证明" },
{ english: "vanish", chinese: "消失" },
{ english: "dense", chinese: "浓密的" },
{ english: "web", chinese: "网" },
{ english: "density", chinese: "密度" },
{ english: "acquire", chinese: "取得,学到" },
{ english: "embarrass", chinese: "使尴尬" },
{ english: "adapt", chinese: "使适应" },
{ english: "embassy", chinese: "大使馆" },
{ english: "adequate", chinese: "足够的" },
{ english: "emerge", chinese: "露出" },
{ english: "admire", chinese: "羡慕" },
{ english: "emergency", chinese: "紧急情况" },
{ english: "admission", chinese: "准许进入" },
{ english: "fatigue", chinese: "疲劳" },
{ english: "beast", chinese: "野兽" },
{ english: "feasible", chinese: "可行的" },
{ english: "behave (oneself)", chinese: "表现得体" },
{ english: "generous", chinese: "大方的" },
{ english: "CD/Compact Disc", chinese: "激光唱片" },
{ english: "heaven", chinese: "天堂" },
{ english: "cease", chinese: "停止" },
{ english: "incident", chinese: "事件" },
{ english: "centigrade", chinese: "摄氏的" },
{ english: "incline", chinese: "使倾斜 斜坡" },
{ english: "champagne", chinese: "香槟酒" },
{ english: "inclusive", chinese: "包含的" },
{ english: "characteristics", chinese: "典型的,特性" },
{ english: "index", chinese: "索引" },
{ english: "chase", chinese: "追逐" },
{ english: "India", chinese: "印度" },
{ english: "cheese", chinese: "乳酪" },
{ english: "lane", chinese: "乡间小路" },
{ english: "chemical", chinese: "化学的" },
{ english: "margin", chinese: "页边空白,差额" },
{ english: "marvelous", chinese: "极好的" },
{ english: "mask", chinese: "面具" },
{ english: "tender", chinese: "温柔的,嫩的" },
{ english: "navy", chinese: "海军" },
{ english: "twin", chinese: "双胞胎" },
{ english: "oblige", chinese: "迫使" },
{ english: "twist", chinese: "缠绕" },
{ english: "ox", chinese: "牛" },
{ english: "unique", chinese: "唯一的" },
{ english: "paste", chinese: "面团 粘贴" },
{ english: "vary", chinese: "改变" },
{ english: "perceive", chinese: "感知,察觉" },
{ english: "vehicle", chinese: "交通工具" },
{ english: "permanent", chinese: "永久的" },
{ english: "volt", chinese: "伏(特)" },
{ english: "permissible", chinese: "准许的" },
{ english: "weep", chinese: "哭泣" },
{ english: "permit", chinese: "允许 许可证" },
{ english: "wrap", chinese: "包裹 披肩" },
{ english: "receptionist", chinese: "接待员" },
{ english: "wrist", chinese: "手腕" },
{ english: "recognition", chinese: "识别,认出" },
{ english: "adopt", chinese: "收养" },
{ english: "refine", chinese: "精炼,提纯" },
{ english: "adventure", chinese: "冒险" },
{ english: "reflection", chinese: "映像" },
{ english: "afterwards", chinese: "后来" },
{ english: "selection", chinese: "选择" },
{ english: "agency", chinese: "代理处" },
{ english: "semester", chinese: "学期" },
{ english: "agenda", chinese: "议事日程" },
{ english: "seminar", chinese: "研讨会" },
{ english: "agent", chinese: "代理人" },
{ english: "senate", chinese: "参议院" },
{ english: "bench", chinese: "长凳" },
{ english: "senior", chinese: "年长的" },
{ english: "berth", chinese: "卧铺" },
{ english: "sensible", chinese: "明智的" },
{ english: "bet", chinese: "打赌 赌金" },
{ english: "sequence", chinese: "顺序" },
{ english: "chemist", chinese: "化学家" },
{ english: "servant", chinese: "仆人" },
{ english: "chest", chinese: "胸;大箱子" },
{ english: "temper", chinese: "脾气" },
{ english: "Christian", chinese: "基督教徒(的)" },
{ english: "tempt", chinese: "引诱" },
{ english: "circumstance", chinese: "环境,条件" },
{ english: "inevitable", chinese: "不可避免的" },
{ english: "circuit", chinese: "电路" },
{ english: "infect", chinese: "传染,感染" },
{ english: "citizen", chinese: "公民" },
{ english: "laughter", chinese: "笑声" },
{ english: "civilization", chinese: "文明,文化" },
{ english: "mature", chinese: "成熟的" },
{ english: "clarify", chinese: "澄清,阐明" },
{ english: "maximum", chinese: "最大的" },
{ english: "classic", chinese: "传统的,典雅的" },
{ english: "mechanism", chinese: "机械装置" },
{ english: "dependent", chinese: "依靠的" },
{ english: "necessity", chinese: "必需品" },
{ english: "deposit", chinese: "订金,存款 使沉淀" },
{ english: "occasion", chinese: "时刻,场合" },
{ english: "depress", chinese: "使消沉;(经济)使不景气" },
{ english: "persist", chinese: "(in) 坚持不懈" },
{ english: "depth", chinese: "深度" },
{ english: "phase", chinese: "阶段" },
{ english: "derive", chinese: "从...得到" },
{ english: "philosophy", chinese: "哲学" },
{ english: "deserve", chinese: "应受(奖、罚),值得" },
{ english: "pioneer", chinese: "先驱者 开拓" },
{ english: "emperor", chinese: "皇帝" },
{ english: "platform", chinese: "平台" },
{ english: "emphasis", chinese: "强调" },
{ english: "refresh", chinese: "使振作精神" },
{ english: "empire", chinese: "帝国" },
{ english: "refreshment", chinese: "精力恢复" },
{ english: "endure", chinese: "容忍,持久" },
{ english: "refundable", chinese: "可退还的" },
{ english: "feedback", chinese: "反馈" },
{ english: "settlement", chinese: "解决" },
{ english: "fence", chinese: "栅栏" },
{ english: "severe", chinese: "严重的,严厉的" },
{ english: "genius", chinese: "天才" },
{ english: "hence", chinese: "因此" },
{ english: "Indian", chinese: "印度的" },
{ english: "individual", chinese: "个别的" },
{ english: "induce", chinese: "引诱" },
{ english: "shallow", chinese: "浅的" },
{ english: "bid", chinese: "出价,投标" },
{ english: "shareholder", chinese: "股东" },
{ english: "biology", chinese: "生物学" },
{ english: "shave", chinese: "剃,刮" },
{ english: "classify", chinese: "把...分类" },
{ english: "shelter", chinese: "躲避所 庇护" },
{ english: "clause", chinese: "条款,分句" },
{ english: "shipment", chinese: "运输,运送的货物" },
{ english: "clerk", chinese: "职员" },
{ english: "shock", chinese: "震惊 使震惊" },
{ english: "client", chinese: "委托人" },
{ english: "terminal", chinese: "终点 末端的" },
{ english: "clockwise", chinese: "顺时针的(地)" },
{ english: "territory", chinese: "领土,领域" },
{ english: "collar", chinese: "衣领" },
{ english: "thoughtful", chinese: "思考的,体贴的" },
{ english: "colleague", chinese: "同事" },
{ english: "universal", chinese: "普遍的,通用的" },
{ english: "collection", chinese: "收藏品" },
{ english: "venture", chinese: "风险投资 冒险" },
{ english: "collective", chinese: "集体的,共同的" },
{ english: "verify", chinese: "核实,证明" },
{ english: "curve", chinese: "曲线" },
{ english: "wheel", chinese: "车轮 用车推,拉" },
{ english: "cushion", chinese: "垫子" },
{ english: "agriculture", chinese: "农业" },
{ english: "desirable", chinese: "可取的" },
{ english: "aircraft", chinese: "飞机" },
{ english: "despair", chinese: "绝望" },
{ english: "alcohol", chinese: "酒,含酒精饮料" },
{ english: "dessert", chinese: "甜食" },
{ english: "allowance", chinese: "津贴" },
{ english: "destination", chinese: "目的地" },
{ english: "alphabet", chinese: "字母表" },
{ english: "destruction", chinese: "破坏" },
{ english: "alter", chinese: "改变" },
{ english: "determination", chinese: "决心" },
{ english: "bible", chinese: "圣经" },
{ english: "duplicate", chinese: "复制品/复制的 复制" },
{ english: "engage", chinese: "吸引注意力" },
{ english: "enhance", chinese: "提高,增强" },
{ english: "plot", chinese: "故事情节 密谋" },
{ english: "enormous", chinese: "庞大的" },
{ english: "pollution", chinese: "污染" },
{ english: "enterprise", chinese: "事业,企业,事业心" },
{ english: "pond", chinese: "池塘" },
{ english: "festive", chinese: "节日的" },
{ english: "porcelain", chinese: "瓷器" },
{ english: "fetch", chinese: "拿来" },
{ english: "regardless", chinese: "不管怎样" },
{ english: "geometry", chinese: "几何学" },
{ english: "regulate", chinese: "控制,调节" },
{ english: "heroic", chinese: "英勇的" },
{ english: "regulation", chinese: "规章;控制" },
{ english: "infectious", chinese: "传染的" },
{ english: "sightseeing", chinese: "观光,游览" },
{ english: "infer", chinese: "推断" },
{ english: "signature", chinese: "签名" },
{ english: "inference", chinese: "推断的结论" },
{ english: "significance", chinese: "意义,重要性" },
{ english: "inferior", chinese: "劣等的,下级的" },
{ english: "sincere", chinese: "诚挚的" },
{ english: "infinite", chinese: "无限的" },
{ english: "singular", chinese: "单数的" },
{ english: "launch", chinese: "发起" },
{ english: "thread", chinese: "线,线索" },
{ english: "medium", chinese: "中等的 媒介" },
{ english: "threat", chinese: "威胁" },
{ english: "memorandum", chinese: "备忘录" },
{ english: "threaten", chinese: "威胁" },
{ english: "memorial", chinese: "纪念的 纪念碑" },
{ english: "unprecedented", chinese: "空前的" },
{ english: "multiply", chinese: "使增加,使繁殖" },
{ english: "version", chinese: "版本" },
{ english: "municipal", chinese: "市政的" },
{ english: "versus", chinese: "与...相对" },
{ english: "negotiate", chinese: "洽谈,协商" },
{ english: "whenever", chinese: "无论何时" },
{ english: "occasional", chinese: "偶尔的" },
{ english: "ambassador", chinese: "大使" },
{ english: "plentiful", chinese: "丰富的,充足的" },
{ english: "ambition", chinese: "雄心,抱负" },
{ english: "ambitious", chinese: "有野心的,有雄心的" },
{ english: "amend", chinese: "修正,修订" },
{ english: "diamond", chinese: "钻石" },
{ english: "amuse", chinese: "逗乐,给...提供娱乐" },
{ english: "dig", chinese: "挖" },
{ english: "analyse", chinese: "分析" },
{ english: "enthusiasm", chinese: "热情" },
{ english: "bite", chinese: "咬,叮" },
{ english: "equivalent", chinese: "相等的,相当的" },
{ english: "blend", chinese: "使混合" },
{ english: "era", chinese: "时代" },
{ english: "bond", chinese: "纽带,债券" },
{ english: "estate", chinese: "住宅区,财产,遗产" },
{ english: "column", chinese: "柱,圆柱,专栏" },
{ english: "fiber", chinese: "纤维" },
{ english: "combination", chinese: "结合体" },
{ english: "filter", chinese: "过滤器 过滤" },
{ english: "commercial", chinese: "商业的" },
{ english: "ghost", chinese: "幽灵" },
{ english: "commission", chinese: "委员会,佣金" },
{ english: "highlight", chinese: "强调,突出" },
{ english: "commit", chinese: "犯(错误);(oneself)使承诺" },
{ english: "initial", chinese: "开始的 (pl.)姓名首字母" },
{ english: "commodity", chinese: "商品" },
{ english: "initiative", chinese: "主动性,首创精神" },
{ english: "commute", chinese: "经常往返于" },
{ english: "injection", chinese: "注射" },
{ english: "compact", chinese: "紧实的 把...压紧" },
{ english: "inner", chinese: "内部的" },
{ english: "diagnose", chinese: "诊断" },
{ english: "innocent", chinese: "清白的" },
{ english: "diagram", chinese: "图表" },
{ english: "layout", chinese: "布局,设计" },
{ english: "dialect", chinese: "方言" },
{ english: "merchant", chinese: "商人" },
{ english: "diameter", chinese: "直径" },
{ english: "mercy", chinese: "慈悲" },
{ english: "merely", chinese: "仅仅" },
{ english: "nest", chinese: "巢" },
{ english: "opponent", chinese: "敌手" },
{ english: "portable", chinese: "手提式的,轻便的" },
{ english: "portion", chinese: "部分 (out) 分给..." },
{ english: "pose", chinese: "姿势 造成,引起" },
{ english: "whisky", chinese: "威士忌" },
{ english: "postage", chinese: "邮费" },
{ english: "ancestor", chinese: "祖先" },
{ english: "poster", chinese: "海报" },
{ english: "anniversary", chinese: "周年纪念日" },
{ english: "reinforce", chinese: "充实,加强" },
{ english: "annoy", chinese: "使恼怒" },
{ english: "release", chinese: "释放" },
{ english: "anticipate", chinese: "期望,语料" },
{ english: "relieve", chinese: "减轻" },
{ english: "anxiety", chinese: "焦虑" },
{ english: "reluctant", chinese: "不情愿的" },
{ english: "apology", chinese: "道歉" },
{ english: "sink", chinese: "沉默 洗涤槽" },
{ english: "bonus", chinese: "奖金,红利" },
{ english: "skate", chinese: "旱冰鞋 溜冰" },
{ english: "border", chinese: "边,界限 与...毗邻" },
{ english: "sketch", chinese: "草图 概述" },
{ english: "bore", chinese: "使厌倦" },
{ english: "sleeve", chinese: "袖子" },
{ english: "comparable", chinese: "可比较的" },
{ english: "slice", chinese: "切片 切成薄片" },
{ english: "compatible", chinese: "可共存的" },
{ english: "slide", chinese: "使滑动 幻灯片" },
{ english: "compensate", chinese: "补偿" },
{ english: "slight", chinese: "轻微的,纤细的" },
{ english: "competent", chinese: "能胜任的" },
{ english: "slope", chinese: "斜坡 倾斜" },
{ english: "competitive", chinese: "竞争的" },
{ english: "smuggle", chinese: "偷运" },
{ english: "complaint", chinese: "抱怨" },
{ english: "thumb", chinese: "拇指 示意要搭车" },
{ english: "complex", chinese: "复杂的" },
{ english: "thunder", chinese: "雷声" },
{ english: "complicated", chinese: "结构复杂的" },
{ english: "tip", chinese: "末端 给小费" },
{ english: "component", chinese: "组成部分,部件" },
{ english: "utility", chinese: "(pl.)公用事业" },
{ english: "vertical", chinese: "垂直的" },
{ english: "veteran", chinese: "老兵" },
{ english: "digest", chinese: "消化,领悟" },
{ english: "neutral", chinese: "中立的" },
{ english: "digital", chinese: "数字的" },
{ english: "oral", chinese: "口头的" },
{ english: "dim", chinese: "昏暗的 使昏暗" },
{ english: "potential", chinese: "潜在的" },
{ english: "dimension", chinese: "方面(pl.)范围" },
{ english: "pray", chinese: "祈祷" },
{ english: "diplomat", chinese: "外交官" },
{ english: "precaution", chinese: "预防" },
{ english: "dirt", chinese: "尘土" },
{ english: "preceding", chinese: "前面的" },
{ english: "evaluate", chinese: "评价,评估" },
{ english: "precious", chinese: "珍贵的" },
{ english: "evident", chinese: "明显的" },
{ english: "remedy", chinese: "(for)补救" },
{ english: "evil", chinese: "邪恶的" },
{ english: "remote", chinese: "遥远的" },
{ english: "evolution", chinese: "进化" },
{ english: "represent", chinese: "作为...代表" },
{ english: "finance", chinese: "财政,金融 为...提供资金" },
{ english: "representative", chinese: "代表" },
{ english: "financial", chinese: "财政的" },
{ english: "snack", chinese: "小吃,点心" },
{ english: "glorious", chinese: "光荣的" },
{ english: "sophisticated", chinese: "老于世故的" },
{ english: "hint", chinese: "暗示" },
{ english: "souvenir", chinese: "纪念品" },
{ english: "insect", chinese: "昆虫" },
{ english: "spacecraft", chinese: "宇宙飞船" },
{ english: "insert", chinese: "嵌入,插入" },
{ english: "span", chinese: "持续时间,跨度" },
{ english: "insight", chinese: "洞察力" },
{ english: "specialist", chinese: "专家" },
{ english: "inspection", chinese: "检查,视察" },
{ english: "specialize", chinese: "专门研究" },
{ english: "inspire", chinese: "鼓舞,给...灵感" },
{ english: "specification", chinese: "(常用复数)规格说明" },
{ english: "leak", chinese: "使漏,使渗出 裂缝" },
{ english: "tissue", chinese: "纸巾" },
{ english: "merit", chinese: "长处" },
{ english: "tone", chinese: "语气,语调 使...更结实" },
{ english: "microscope", chinese: "显微镜" },
{ english: "millimetre", chinese: "毫米" },
{ english: "appetite", chinese: "食欲" },
{ english: "disconnect", chinese: "切断" },
{ english: "appetizing", chinese: "开胃的" },
{ english: "exceed", chinese: "超过" },
{ english: "bound", chinese: "必然的 旅行去某地" },
{ english: "exception", chinese: "例外" },
{ english: "boundary", chinese: "边界" },
{ english: "excess", chinese: "超过 过量的" },
{ english: "brand", chinese: "品牌" },
{ english: "excessive", chinese: "过多的" },
{ english: "composition", chinese: "构成/作曲/作文" },
{ english: "flavor", chinese: "滋味,特色" },
{ english: "compound", chinese: "化合物 复合的" },
{ english: "forbid", chinese: "禁止" },
{ english: "comprise", chinese: "包含,包括" },
{ english: "glove", chinese: "手套" },
{ english: "compromise", chinese: "妥协 妥协" },
{ english: "hi-tech", chinese: "高科技的" },
{ english: "concept", chinese: "概念" },
{ english: "install", chinese: "安装" },
{ english: "conclusion", chinese: "结论" },
{ english: "installment", chinese: "分期付款" },
{ english: "conference", chinese: "会议" },
{ english: "institution", chinese: "机构,制度" },
{ english: "confess", chinese: "坦白" },
{ english: "lean", chinese: "使倾斜" },
{ english: "disadvantage", chinese: "不利因素" },
{ english: "minimum", chinese: "最少的" },
{ english: "disaster", chinese: "灾难" },
{ english: "minister", chinese: "部长" },
{ english: "discharge", chinese: "释放" },
{ english: "minority", chinese: "少数" },
{ english: "discipline", chinese: "纪律" },
{ english: "orient", chinese: "东方 朝向" },
{ english: "disclose", chinese: "揭露" },
{ english: "precise", chinese: "精确的" },
{ english: "predetermine", chinese: "预先决定" },
{ english: "preference", chinese: "(for)偏爱" },
{ english: "applause", chinese: "鼓掌" },
{ english: "prejudice", chinese: "偏见" },
{ english: "appliance", chinese: "器具,装置" },
{ english: "preliminary", chinese: "预备的" },
{ english: "applicant", chinese: "申请人" },
{ english: "reputation", chinese: "名气" },
{ english: "appoint", chinese: "任命" },
{ english: "rescue", chinese: "营救" },
{ english: "appointment", chinese: "约会" },
{ english: "resemble", chinese: "像,与..类似" },
{ english: "approach", chinese: "靠近 方法" },
{ english: "reserve", chinese: "预订,保留" },
{ english: "breathe", chinese: "呼吸" },
{ english: "specimen", chinese: "标本" },
{ english: "brilliant", chinese: "光辉的,杰出的" },
{ english: "spectator", chinese: "(体育比赛)观众" },
{ english: "broadcast", chinese: "广播节目 播放" },
{ english: "sphere", chinese: "球体,范围" },
{ english: "confidential", chinese: "机密的" },
{ english: "spill", chinese: "溢出" },
{ english: "confine", chinese: "(to,within)限制" },
{ english: "spirit", chinese: "精神,心灵" },
{ english: "conflict", chinese: "冲突,争论" },
{ english: "split", chinese: "使分裂;裂开" },
{ english: "conform", chinese: "(to)使一致" },
{ english: "sponsor", chinese: "赞助者" },
{ english: "congress", chinese: "代表大会" },
{ english: "staff", chinese: "全体人员" },
{ english: "conservative", chinese: "保守的" },
{ english: "tough", chinese: "困难的" },
{ english: "conserve", chinese: "保存,节省" },
{ english: "trace", chinese: "查出 痕迹" },
{ english: "considerate", chinese: "体贴的" },
{ english: "track", chinese: "小路,跑道 追踪" },
{ english: "consideration", chinese: "体贴" },
{ english: "vice", chinese: "罪行" },
{ english: "discount", chinese: "折扣" },
{ english: "victim", chinese: "牺牲者" },
{ english: "wit", chinese: "风趣,才思" },
{ english: "discourage", chinese: "使泄气" },
{ english: "miserable", chinese: "悲惨的" },
{ english: "discovery", chinese: "发现" },
{ english: "mission", chinese: "使命" },
{ english: "disgust", chinese: "厌恶 使厌恶" },
{ english: "nuclear", chinese: "核能的" },
{ english: "dispose", chinese: "(of) 处理,除掉" },
{ english: "orientation", chinese: "目标,方向" },
{ english: "exclude", chinese: "不包括" },
{ english: "preposition", chinese: "介词" },
{ english: "execute", chinese: "处死,实施" },
{ english: "prescribe", chinese: "开药,规定" },
{ english: "executive", chinese: "执行的 主管" },
{ english: "prescription", chinese: "处方,药方" },
{ english: "exert", chinese: "用力,尽力" },
{ english: "presence", chinese: "出席" },
{ english: "format", chinese: "设计,安排" },
{ english: "preserve", chinese: "维持,保存" },
{ english: "formula", chinese: "配方" },
{ english: "reset", chinese: "调整,重新设置" },
{ english: "goods", chinese: "货物" },
{ english: "residence", chinese: "住宅" },
{ english: "honorable", chinese: "光荣的" },
{ english: "resident", chinese: "居民" },
{ english: "insult", chinese: "侮辱" },
{ english: "resolution", chinese: "决心" },
{ english: "insurance", chinese: "保险(费)" },
{ english: "stain", chinese: "污点 被染污" },
{ english: "integrate", chinese: "(into, with)使合并" },
{ english: "starve", chinese: "使挨饿" },
{ english: "intellectual", chinese: "智力的" },
{ english: "statistics", chinese: "统计数字" },
{ english: "intelligence", chinese: "智力" },
{ english: "status", chinese: "雕塑" },
{ english: "leap", chinese: "跳跃" },
{ english: "steady", chinese: "平稳的" },
{ english: "minus", chinese: "负的 减去" },
{ english: "steep", chinese: "陡峭的" },
{ english: "stereo", chinese: "立体音响" },
{ english: "stereotype", chinese: "模式化观念,老一套" },
{ english: "transaction", chinese: "交易" },
{ english: "transform", chinese: "使变形" },
{ english: "transit", chinese: "运输" },
{ english: "distinction", chinese: "差别,不同" },
{ english: "violent", chinese: "暴力的" },
{ english: "distinguish", chinese: "区别" },
{ english: "virtual", chinese: "实质上的" },
{ english: "distort", chinese: "扭曲" },
{ english: "withdraw", chinese: "撤回" },
{ english: "district", chinese: "地区,区" },
{ english: "appropriate", chinese: "恰当的" },
{ english: "exhaust", chinese: "使精疲力竭 废气" },
{ english: "approval", chinese: "赞成,同意" },
{ english: "expectation", chinese: "期待" },
{ english: "arbitration", chinese: "仲裁" },
{ english: "fortnight", chinese: "两星期" },
{ english: "arouse", chinese: "引起,唤起" },
{ english: "fortunate", chinese: "幸运的" },
{ english: "arrow", chinese: "箭" },
{ english: "gradual", chinese: "逐渐的" },
{ english: "artificial", chinese: "人工的" },
{ english: "horsepower", chinese: "马力" },
{ english: "brochure", chinese: "小册子" },
{ english: "intelligent", chinese: "聪明的" },
{ english: "broker", chinese: "经纪人" },
{ english: "interact", chinese: "相互作用" },
{ english: "broom", chinese: "扫帚" },
{ english: "interaction", chinese: "相互作用" },
{ english: "constraint", chinese: "束缚" },
{ english: "interfere", chinese: "(in) 干涉;(with)妨碍" },
{ english: "consulate", chinese: "领事馆" },
{ english: "liable", chinese: "可能的,易于...的;有法律责任的" },
{ english: "consultant", chinese: "顾问" },
{ english: "mixture", chinese: "混合物" },
{ english: "consume", chinese: "消耗,花费" },
{ english: "mobile", chinese: "活动的" },
{ english: "consumer", chinese: "消费者" },
{ english: "mode", chinese: "方式" },
{ english: "consumption", chinese: "消耗" },
{ english: "numerous", chinese: "众多的" },
{ english: "context", chinese: "背景,语境" },
{ english: "origin", chinese: "起源" },
{ english: "continent", chinese: "大陆,洲" },
{ english: "dispute", chinese: "争端" },
{ english: "distinct (from)", chinese: "不同的" },
{ english: "prevail", chinese: "流行;(over)获胜" },
{ english: "assess", chinese: "评价" },
{ english: "prime", chinese: "首要的" },
{ english: "assign", chinese: "(to) 指派" },
{ english: "primitive", chinese: "原始的" },
{ english: "assignment", chinese: "任务" },
{ english: "prior", chinese: "优先的,在前的" },
{ english: "assist", chinese: "帮助,协助" },
{ english: "priority", chinese: "优先权" },
{ english: "associate", chinese: "(with)联想,结交" },
{ english: "resort", chinese: "(to) 求助,诉诸" },
{ english: "assume", chinese: "假定,担任" },
{ english: "respective", chinese: "各自的" },
{ english: "budget", chinese: "预算" },
{ english: "respectively", chinese: "各自地" },
{ english: "bulletin", chinese: "公告" },
{ english: "restrain", chinese: "(from)阻止" },
{ english: "contradict", chinese: "反驳" },
{ english: "stiff", chinese: "硬的,严厉的" },
{ english: "contrast", chinese: "对比" },
{ english: "stimulate", chinese: "刺激" },
{ english: "contribute", chinese: "捐款" },
{ english: "stipulate", chinese: "规定" },
{ english: "conversion", chinese: "转化" },
{ english: "strategy", chinese: "战略" },
{ english: "convert", chinese: "使转化" },
{ english: "stretch", chinese: "拉伸,拉长" },
{ english: "convey", chinese: "表达,传递" },
{ english: "stuff", chinese: "原料 填进" },
{ english: "coordinate", chinese: "调节,协调" },
{ english: "submit", chinese: "(to) 呈送" },
{ english: "copper", chinese: "铜" },
{ english: "substance", chinese: "物质" },
{ english: "copyright", chinese: "版权" },
{ english: "transparent", chinese: "透明的" },
{ english: "divorce", chinese: "离婚" },
{ english: "trap", chinese: "陷阱 使陷于困境" },
{ english: "domestic", chinese: "国内的,驯养的" },
{ english: "tray", chinese: "托盘" },
{ english: "virtue", chinese: "美德" },
{ english: "virus", chinese: "病毒" },
{ english: "withdrawal", chinese: "撤退" }
];
// 游戏状态变量
let gameState = {
bubbles: [],
selectedBubble: null,
matchedPairs: 0,
totalPairs: 0,
gameStarted: false,
timer: 0,
timerInterval: null,
soundEnabled: true
};
// DOM元素引用
const bubblesContainer = document.getElementById('bubbles-container');
const startBtn = document.getElementById('start-btn');
const resetBtn = document.getElementById('reset-btn');
const soundBtn = document.getElementById('sound-btn');
const playAgainBtn = document.getElementById('play-again-btn');
const victoryMessage = document.getElementById('victory-message');
const matchedCount = document.getElementById('matched-count');
const remainingCount = document.getElementById('remaining-count');
const timerDisplay = document.getElementById('timer');
// 音频元素
const clickSound = document.getElementById('click-sound');
const matchSound = document.getElementById('match-sound');
const errorSound = document.getElementById('error-sound');
const winSound = document.getElementById('win-sound');
// 初始化游戏
function initGame() {
// 重置游戏状态
gameState.selectedBubble = null;
gameState.matchedPairs = 0;
gameState.totalPairs = 0;
gameState.gameStarted = false;
gameState.timer = 0;
clearInterval(gameState.timerInterval);
timerDisplay.textContent = "00:00";
// 清空气泡容器
bubblesContainer.innerHTML = '';
victoryMessage.classList.remove('show');
// 更新UI
matchedCount.textContent = "0";
remainingCount.textContent = "0";
}
// 开始游戏
function startGame() {
initGame();
// 根据屏幕宽度决定词汇对数
const screenWidth = window.innerWidth;
let pairCount = 6; // 默认6对
if (screenWidth >= 400) {
pairCount = 8;
}
if (screenWidth >= 600) {
pairCount = 10;
}
// 随机选择词汇
const selectedVocab = getRandomVocab(pairCount);
gameState.totalPairs = selectedVocab.length;
// 创建气泡(英文和中文)
let bubbleElements = [];
selectedVocab.forEach(item => {
// 英文气泡
bubbleElements.push({
text: item.english,
type: 'english',
pairId: item.english,
matched: false
});
// 中文气泡
bubbleElements.push({
text: item.chinese,
type: 'chinese',
pairId: item.english,
matched: false
});
});
// 随机排序气泡
bubbleElements = shuffleArray(bubbleElements);
gameState.bubbles = bubbleElements;
// 渲染气泡
renderBubbles();
// 更新剩余数量
remainingCount.textContent = (gameState.totalPairs * 2).toString();
// 开始计时
gameState.gameStarted = true;
gameState.timerInterval = setInterval(() => {
gameState.timer++;
const minutes = Math.floor(gameState.timer / 60).toString().padStart(2, '0');
const seconds = (gameState.timer % 60).toString().padStart(2, '0');
timerDisplay.textContent = `${minutes}:${seconds}`;
}, 1000);
}
// 获取随机词汇
function getRandomVocab(count) {
const shuffled = shuffleArray([...vocabulary]);
return shuffled.slice(0, count);
}
// 数组随机排序
function shuffleArray(array) {
const newArray = [...array];
for (let i = newArray.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[newArray[i], newArray[j]] = [newArray[j], newArray[i]];
}
return newArray;
}
// 渲染气泡
function renderBubbles() {
bubblesContainer.innerHTML = '';
gameState.bubbles.forEach((bubble, index) => {
if (!bubble.matched) {
const bubbleElement = document.createElement('div');
bubbleElement.className = 'bubble';
bubbleElement.textContent = bubble.text;
bubbleElement.dataset.index = index;
// 同时支持点击和触摸事件
bubbleElement.addEventListener('click', () => handleBubbleInteraction(index));
bubbleElement.addEventListener('touchstart', (e) => {
e.preventDefault();
handleBubbleInteraction(index);
}, { passive: false });
bubblesContainer.appendChild(bubbleElement);
}
});
}
// 处理泡泡交互(点击或触摸)
function handleBubbleInteraction(index) {
if (!gameState.gameStarted) return;
const clickedBubble = gameState.bubbles[index];
// 如果气泡已匹配或已被选中,则忽略
if (clickedBubble.matched || clickedBubble === gameState.selectedBubble) return;
// 播放点击声音
if (gameState.soundEnabled) {
clickSound.currentTime = 0;
clickSound.play().catch(e => console.log("Audio play failed:", e));
}
// 标记为选中
clickedBubble.selected = true;
// 如果有已选中的气泡
if (gameState.selectedBubble !== null) {
const prevBubble = gameState.selectedBubble;
// 检查是否匹配
if (prevBubble.pairId === clickedBubble.pairId &&
prevBubble.type !== clickedBubble.type) {
// 匹配成功
prevBubble.matched = true;
clickedBubble.matched = true;
gameState.matchedPairs++;
// 播放匹配成功声音
if (gameState.soundEnabled) {
matchSound.currentTime = 0;
matchSound.play().catch(e => console.log("Audio play failed:", e));
}
// 更新UI
matchedCount.textContent = gameState.matchedPairs.toString();
remainingCount.textContent = (gameState.totalPairs * 2 - gameState.matchedPairs * 2).toString();
// 检查游戏是否结束
if (gameState.matchedPairs === gameState.totalPairs) {
endGame();
}
// 重新渲染气泡
setTimeout(() => {
renderBubbles();
gameState.selectedBubble = null;
}, 500);
} else {
// 匹配失败
if (gameState.soundEnabled) {
errorSound.currentTime = 0;
errorSound.play().catch(e => console.log("Audio play failed:", e));
}
// 取消选中状态
setTimeout(() => {
prevBubble.selected = false;
clickedBubble.selected = false;
gameState.selectedBubble = null;
renderBubbles();
}, 1000);
}
} else {
// 第一次点击
gameState.selectedBubble = clickedBubble;
renderBubbles();
}
}
// 结束游戏
function endGame() {
clearInterval(gameState.timerInterval);
gameState.gameStarted = false;
// 播放胜利声音
if (gameState.soundEnabled) {
winSound.currentTime = 0;
winSound.play().catch(e => console.log("Audio play failed:", e));
}
// 显示胜利消息
setTimeout(() => {
victoryMessage.classList.add('show');
createConfetti();
}, 1000);
}
// 创建五彩纸屑效果
function createConfetti() {
const container = document.querySelector('.game-container');
for (let i = 0; i < 100; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = `${Math.random() * 100}%`;
confetti.style.top = `${Math.random() * 100}%`;
confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
confetti.style.opacity = '1';
confetti.style.transform = `scale(${Math.random() * 0.5 + 0.5})`;
confetti.style.zIndex = '11';
container.appendChild(confetti);
// 动画
const animation = confetti.animate([
{ transform: 'translateY(0) rotate(0deg)', opacity: 1 },
{ transform: `translateY(${Math.random() * 200 + 100}px) rotate(${Math.random() * 360}deg)`, opacity: 0 }
], {
duration: Math.random() * 2000 + 2000,
easing: 'cubic-bezier(0,0.9,0.57,1)'
});
// 动画结束后移除元素
animation.onfinish = () => confetti.remove();
}
}
// 切换声音
function toggleSound() {
gameState.soundEnabled = !gameState.soundEnabled;
soundBtn.innerHTML = gameState.soundEnabled
? '<i class="fas fa-volume-up"></i> 音效: 开'
: '<i class="fas fa-volume-mute"></i> 音效: 关';
}
// 事件监听器
startBtn.addEventListener('click', startGame);
startBtn.addEventListener('touchstart', (e) => {
e.preventDefault();
startGame();
}, { passive: false });
resetBtn.addEventListener('click', initGame);
resetBtn.addEventListener('touchstart', (e) => {
e.preventDefault();
initGame();
}, { passive: false });
soundBtn.addEventListener('click', toggleSound);
soundBtn.addEventListener('touchstart', (e) => {
e.preventDefault();
toggleSound();
}, { passive: false });
playAgainBtn.addEventListener('click', startGame);
playAgainBtn.addEventListener('touchstart', (e) => {
e.preventDefault();
startGame();
}, { passive: false });
// 初始化游戏
initGame();
// 响应式调整
window.addEventListener('resize', () => {
if (gameState.gameStarted) {
renderBubbles();
}
});
});
</script>
</body>
</html>