<!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>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 50px auto;
padding: 20px;
background-color: #f0f8ff;
}
.game-container {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.word-box {
font-size: 24px;
font-weight: bold;
color: #2c3e50;
margin: 20px 0;
padding: 15px;
background-color: #e3f2fd;
border-radius: 5px;
text-align: center;
}
.option {
padding: 12px;
margin: 10px 0;
background-color: #f5f5f5;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.option:hover {
background-color: #e0e0e0;
}
.result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.correct {
color: #27ae60;
}
.wrong {
color: #e74c3c;
}
.next-btn {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.next-btn:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="game-container">
<h2 style="text-align: center; color: #34495e;">英语单词释义匹配游戏</h2>
<div class="word-box" id="wordBox">点击开始游戏</div>
<div id="optionsBox"></div>
<div class="result" id="result"></div>
<button class="next-btn" id="nextBtn" style="display: none;" onclick="nextWord()">下一个单词</button>
<button class="next-btn" id="startBtn" style="display: block; margin: 20px auto;" onclick="startGame()">开始游戏</button>
</div>
<script>
// 完整四单元单词库
const wordList = [
// UNIT 1 Listen and Talk
["appliance n.", "器具，（尤指）家用电器"],
["debate n.", "争论，辩论"],
["deforestation n.", "砍伐森林"],
["dispose v.", "处理，处置"],
["drought n.", "干旱"],
["ecological adj.", "生态（学）的"],
["efficiency n.", "效率；效能"],
["faucet n.", "（管道的）水龙头"],
["fossil n.", "化石"],
["garbage n.", "垃圾，废物"],
["gas n.", "气体；燃气"],
["hence adv.", "因此，从此"],
["install v.", "安装；设置"],
["mount v.", "准备；组织"],
["partner n.", "伙伴；搭档"],
["plastic n.", "塑料"],
["pollution n.", "污染"],
["renewable adj.", "可更新的；可再生的"],
["shortage n.", "短缺；不足"],
["solar adj.", "太阳的；利用太阳光的"],
["solve v.", "解决；解答"],
["stack n.", "一堆；一叠"],
["sweat n.", "汗；汗水"],
["system n.", "系统；体系"],
["yeah adv.", "（口语）是；对"],
// UNIT 1 Passage A
["atop prep.", "在…顶上"],
["audio adj.", "音频的；声音的"],
["boundary n.", "分界线；边境线"],
["brilliant adj.", "光辉的；灿烂的"],
["cabin n.", "小屋；木屋"],
["climate n.", "气候"],
["communicate v.", "告知，传达；交流，交际；通讯，通信"],
["decade n.", "十年"],
["directly adv.", "直接地"],
["focus v.", "集中（注意力）"],
["frog n.", "蛙，青蛙"],
["hum v.", "发出嗡嗡声"],
["indicator n.", "（仪表的）指针；指标"],
["log n.", "原木"],
["maple n.", "枫树"],
["overtake v.", "追上，赶上；（在感情上）压倒"],
["prairie n.", "大草原"],
["residence n.", "住所"],
["sensitivity n.", "敏感（性），灵敏（度）"],
["sober adj.", "严肃的"],
["species n.", "（植物或动物的）品种，种类，物种"],
["studio n.", "画室；摄影室；工作室"],
["subtle adj.", "细致的；微妙的"],
["survive v.", "存活"],
["syrup n.", "糖浆，糖水"],
["tone n.", "音色，音质"],
["weird adj.", "古怪的，奇异的"],
// UNIT 2 Listen and Talk
["anniversary n.", "周年纪念"],
["autobiography n.", "自传"],
["banquet n.", "宴会"],
["boring adj.", "令人厌烦的"],
["evaluate v.", "估价"],
["gap n.", "空白；间隙"],
["laureate n.", "折桂的人，获得桂冠的人"],
["luxury n.", "奢侈，奢华"],
["nominate v.", "提名"],
["nomination n.", "提名"],
["persist v.", "坚持"],
["physicist n.", "物理学家"],
["quantum n.", "量子"],
["recommendation n.", "推荐"],
["respective adj.", "分别的，各自的"],
["witty adj.", "机智的"],
// UNIT 2 Passage A
["angle n.", "角"],
["apparently adv.", "明显地；显然"],
["atom n.", "原子"],
["compass n.", "罗盘；指南针"],
["condense v.", "（使）凝结；浓缩；压缩"],
["convince v.", "使确信；使相信"],
["create v.", "创造；创建"],
["curiosity n.", "好奇心"],
["detail n.", "细节；枝节"],
["device n.", "装置；设备"],
["equation n.", "等式；方程式"],
["essence n.", "本质；精髓"],
["evidence n.", "证据；证明"],
["evident adj.", "明显的；清楚的"],
["fundamental adj.", "基本的；根本的；最重要的"],
["genius n.", "天才；天资；才子"],
["geometry n.", "几何学"],
["holy adj.", "神圣的；圣洁的"],
["insight n.", "洞察力；洞悉"],
["intellect n.", "智力；才智；领悟力"],
["invisible adj.", "看不见的；无形的"],
["patience n.", "耐心；忍耐力"],
["peak v./n.", "达到高峰；顶峰"],
["relativity n.", "相对论"],
["respond v.", "回应；作出反应"],
["simplicity n.", "简单；朴素；直率"],
["simplistic adj.", "过于简化的；把复杂事物简单化的"],
["stir v.", "激起；搅动；搅拌"],
["stove n.", "火炉；炉灶"],
["structure n.", "结构；构造；组织"],
["theorem n.", "定理；法则"],
["theory n.", "理论；学说"],
["twist v.", "拧，扭"],
["ultimate adj.", "根本的，首要的"],
["universe n.", "宇宙"],
// UNIT 3 Listen and Talk
["adventurous adj.", "喜欢冒险的；敢做敢为的"],
["argument n.", "争论，辩论"],
["attitude n.", "态度"],
["catwalk n.", "（时装表演模特儿走的）伸展台，T型台"],
["cm n.", "厘米"],
["con n.", "反对的意见、观点"],
["contribute v.", "促成某事；提供，提交"],
["deliver v.", "交付；递送"],
["designer n.", "设计师"],
["entrepreneur n.", "企业家"],
["extreme n.", "极端或极度（的状况、程度等）"],
["faulty adj.", "有毛病的，有故障的"],
["functional adj.", "具有某种功能的"],
["heartbroken adj.", "心碎的"],
["heel n.", "（鞋、靴等的）后跟"],
["insecure adj.", "缺乏信心的；无把握的"],
["Inuit n.", "因纽特人（北美的爱斯基摩人）"],
["penny n.", "便士"],
["potential n.", "潜在性，可能性"],
["pound n.", "英镑"],
["pro n.", "对某事赞成的意见"],
["reach n.", "范围，区域"],
["refrigerator n.", "冰箱，雪柜"],
["ridiculous adj.", "荒谬的"],
["shortcoming n.", "缺点"],
["snail n.", "蜗牛"],
["sturdy adj.", "结实的，耐用的"],
["stylish adj.", "时髦的，流行的"],
["underwear n.", "内衣裤"],
["universal adj.", "普遍的，通用的"],
// UNIT 3 Passage A
["burger n.", "汉堡"],
["cajole v.", "劝诱"],
["carve v.", "雕刻，切开"],
["celebrity n.", "名人"],
["declare v.", "宣布"],
["destination n.", "目的地"],
["dizzy adj.", "使人头晕的"],
["duplicate v.", "复制"],
["embed v.", "使被铭记"],
["hectic adj.", "忙乱的，狂乱的"],
["label n.", "商标"],
["literally adv.", "实际上"],
["magnetic adj.", "有磁性的"],
["neural adj.", "神经的"],
["niche n.", "合适的地方或位置；特定的市场需求"],
["outsell v.", "比…卖得多"],
["preference n.", "偏好"],
["prime v.", "将…准备好"],
["prod v.", "激发；促进"],
["quench v.", "通过喝水来抑制"],
["replicate v.", "重复"],
["reside v.", "存在"],
["resound v.", "发出响亮的声音"],
["rival n.", "竞争对手；敌手"],
["shaver n.", "剃须刀"],
["stash n.", "藏匿之物"],
["stimulate v.", "激活"],
["track n.", "（音、视频的）曲目"],
["trainer n.", "运动鞋"],
["trigger v.", "引发，触发"],
["vie v.", "争夺"],
// UNIT 4 Listen and Talk
["acreage n.", "（以英亩计的）土地面积"],
["biotech n.", "生物技术"],
["gene n.", "基因"],
["genetic adj.", "基因的"],
["ingredient n.", "（构成或包含）成分、原料、要素"],
["lurk v.", "潜藏，隐藏"],
["modification n.", "修正，改进"],
["organism n.", "生物体；有机体系"],
["overuse n.", "使用过度"],
["potential adj.", "潜在的，可能的"],
["resistant adj.", "对…有抵抗力"],
["slice v.", "将…切成薄片"],
["tasty adj.", "美味的，可口的"],
// UNIT 4 Passage A
["accelerate v.", "加速；加快"],
["adverse adj.", "不利的；有害的"],
["ancestor n.", "祖先"],
["ascertain v.", "确定；查清"],
["barren adj.", "（指土地）贫瘠的"],
["beaten adj.", "踩出的；踩平的"],
["complication n.", "难题；复杂问题"],
["critic n.", "批评家；爱挑剔的人"],
["cross-breed n.", "（同种）杂交"],
["destructive adj.", "破坏性的，毁灭性的"],
["devastating adj.", "毁灭性的"],
["dramatically adv.", "引人注目地"],
["geneticist n.", "遗传学家"],
["graft v.", "嫁接"],
["herbicide n.", "除草剂"],
["hundredfold adv.", "百倍地"],
["hybridization n.", "（异种）杂交"],
["immune adj.", "对…免疫；不受…感染"],
["insecticide n.", "杀虫剂"],
["intervention n.", "介入；干涉"],
["justify v.", "证明…有理；合理解释…"],
["myriad n.", "无数"],
["obesity n.", "肥胖症，过分肥胖"],
["opposition n.", "反对"],
["papaya n.", "番木瓜"],
["pathologist n.", "病理学者"],
["pesticide n.", "杀虫剂"],
["poll n.", "民意测验"],
["ringspot n.", "环斑病毒"],
["skepticism n.", "怀疑态度；怀疑论"],
["smack adv.", "就在某处"],
["spray v.", "喷洒"],
["thrive v.", "繁荣，茁壮成长"],
["vaccine n.", "疫苗"]
];
let currentWordIndex = -1;
let usedIndices = [];
function getRandomIndex() {
let index;
do {
index = Math.floor(Math.random() * wordList.length);
} while (usedIndices.includes(index) && usedIndices.length < wordList.length);
if (usedIndices.length >= wordList.length) {
usedIndices = [];
}
usedIndices.push(index);
return index;
}
function startGame() {
document.getElementById("startBtn").style.display = "none";
nextWord();
}
function nextWord() {
document.getElementById("result").innerHTML = "";
document.getElementById("nextBtn").style.display = "none";
currentWordIndex = getRandomIndex();
const currentWord = wordList[currentWordIndex][0];
document.getElementById("wordBox").innerHTML = currentWord;
const options = [wordList[currentWordIndex][1]];
while (options.length < 4) {
const randomIndex = Math.floor(Math.random() * wordList.length);
if (randomIndex !== currentWordIndex && !options.includes(wordList[randomIndex][1])) {
options.push(wordList[randomIndex][1]);
}
}
options.sort(() => Math.random() - 0.5);
let optionsHtml = "";
for (let i = 0; i < options.length; i++) {
optionsHtml += `<div class="option" onclick="checkAnswer('${options[i]}')">${options[i]}</div>`;
}
document.getElementById("optionsBox").innerHTML = optionsHtml;
}
function checkAnswer(selected) {
const correctAnswer = wordList[currentWordIndex][1];
const resultEl = document.getElementById("result");
if (selected === correctAnswer) {
resultEl.innerHTML = "✅ 正确！";
resultEl.className = "result correct";
} else {
resultEl.innerHTML = `❌ 错误！正确答案是：${correctAnswer}`;
resultEl.className = "result wrong";
}
document.getElementById("nextBtn").style.display = "block";
const options = document.getElementsByClassName("option");
for (let option of options) {
option.onclick = null;
option.style.cursor = "default";
}
}
</script>
</body>
</html>
index.html
style.css
index.js
index.html