五上英语单词小勇士
by HyperOtter44273 lines12.0 KB
你好，四升五的同学！再过几天就要迎接新的学期了。结合你提供的五年级上册单词表（包含 Units 1-6，涉及基本词汇和过去式等），我为你设计了一款“单词小勇士”闯关游戏。
因为纯代码无法直接连接你手机的麦克风和摄像头，为了确保你能直接复制使用，我采用了HTML+JavaScript编写了一个网页版游戏。它集成了浏览器自带的语音朗读功能（用于“听”），并设置了听说读写的考核关卡。
🎮 游戏设计说明：
· 听 (Listening)：系统播放英语发音，你需要选出正确的中文意思。
· 说 (Speaking)：显示中文，系统播放发音，你大声朗读后点击“我读熟了”完成自我检测（配合真人读）。
· 读 (Reading)：显示英文单词和音标，学生大声读出来，然后点击确认认识。
· 写 (Writing)：显示中文意思，需要你在输入框里拼写正确的英文单词，系统自动批改。
· 复习 (Review)：把你写错的单词自动加入“错题本”，重新测试，直到全部掌握。
· 作业 (Homework)：设置每日任务（比如：今天必须完成5个听、5个写、5个读），完成后打卡积攒星星。
---
💻 游戏代码（可直接复制运行）
使用方法： 在电脑或手机浏览器里新建一个文本文档，将下面代码全部复制进去，保存为 word_game.html，然后双击用浏览器打开即可。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五上英语单词小勇士</title>
<style>
body { font-family: sans-serif; background: #f0f8ff; text-align: center; padding: 20px; }
.container { max-width: 500px; margin: 0 auto; background: white; border-radius: 15px; padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
h1 { color: #ff6b6b; }
.btn { margin: 5px; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; background: #4ecdc4; color: white; font-size: 16px; }
.btn:hover { opacity: 0.8; }
.btn-blue { background: #45b7d1; }
.btn-orange { background: #f39c12; }
.word-display { font-size: 24px; margin: 20px 0; font-weight: bold; }
.input-box { padding: 10px; font-size: 18px; width: 80%; margin-bottom: 10px; }
.hidden { display: none; }
#score { font-weight: bold; color: #2ecc71; }
#error-list { text-align: left; background: #ffeaa7; padding: 10px; border-radius: 5px; }
</style>
</head>
<body>
<div class="container">
<h1>五上单词大闯关</h1>
<p>积分: <span id="score">0</span> | 今日作业进度: <span id="homework">0/10</span></p>
<div id="main-menu">
<h3>选择模式</h3>
<button class="btn" onclick="startGame('read')">📖 读单词</button>
<button class="btn btn-blue" onclick="startGame('listen')">👂 听音选义</button>
<button class="btn btn-orange" onclick="startGame('write')">✍️ 拼写测试</button>
<button class="btn" onclick="startGame('speak')">🗣️ 大声朗读</button>
<button class="btn btn-orange" onclick="startGame('review')">🔁 错题复习</button>
<br><br>
<button class="btn" style="background:#9b59b6" onclick="checkHomework()">📝 检查今日作业</button>
</div>
<div id="game-area" class="hidden">
<div id="msg"></div>
<div id="word-display" class="word-display"></div>
<div id="options"></div>
<input type="text" id="write-input" class="input-box hidden" placeholder="请输入英文单词">
<br>
<button class="btn" onclick="speakCurrent()">🔊 播放发音</button>
<button class="btn btn-blue" onclick="nextWord()">⏭️ 下一个</button>
</div>
<div id="completion" class="hidden">
<h2>🎉 恭喜完成本关！</h2>
<button class="btn" onclick="showMenu()">返回主菜单</button>
</div>
<div id="homework-area" class="hidden">
<h3>今日作业要求</h3>
<p>需要完成 10 个单词的听说读写。</p>
<button class="btn" onclick="showMenu()">返回</button>
</div>
<div id="error-list" class="hidden"></div>
</div>
<script>
// 单词库（按你提供的图片整理，你可以继续往下补充）
const words = [
{ en: "map", cn: "地图", unit: 1 },
{ en: "world", cn: "世界", unit: 1 },
{ en: "China", cn: "中国", unit: 1 },
{ en: "famous", cn: "著名的", unit: 1 },
{ en: "travel", cn: "旅行", unit: 1 },
{ en: "city", cn: "城市", unit: 5 },
{ en: "clever", cn: "聪明的", unit: 5 },
{ en: "train", cn: "火车", unit: 6 },
{ en: "ago", cn: "以前", unit: 6 },
{ en: "holiday", cn: "假日", unit: 6 },
{ en: "beautiful", cn: "美丽的", unit: 1 },
{ en: "listen", cn: "听", unit: 3 },
{ en: "exercise", cn: "锻炼", unit: 3 },
{ en: "sometimes", cn: "有时", unit: 3 },
{ en: "went", cn: "去（go的过去式）", unit: 6 }
];
let currentIndex = 0;
let score = 0;
let mode = '';
let mistakes = [];
let homeworkCount = 0;
let currentWord = null;
// 浏览器语音朗读功能
function speak(text) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'en-US';
window.speechSynthesis.speak(utterance);
}
function speakCurrent() {
if (currentWord) {
speak(currentWord.en);
}
}
function startGame(type) {
mode = type;
document.getElementById('main-menu').classList.add('hidden');
document.getElementById('game-area').classList.remove('hidden');
document.getElementById('completion').classList.add('hidden');
document.getElementById('homework-area').classList.add('hidden');
document.getElementById('error-list').classList.add('hidden');
if (type === 'review') {
// 如果没有错题，就直接从词库里抽取
let pool = mistakes.length > 0 ? mistakes : words;
currentIndex = 0;
loadWord(pool);
} else {
currentIndex = 0;
loadWord(words);
}
}
function loadWord(pool) {
if (currentIndex >= pool.length) {
document.getElementById('game-area').classList.add('hidden');
document.getElementById('completion').classList.remove('hidden');
return;
}
currentWord = pool[currentIndex];
const wordDisplay = document.getElementById('word-display');
const optionsDiv = document.getElementById('options');
const writeInput = document.getElementById('write-input');
optionsDiv.innerHTML = '';
writeInput.classList.add('hidden');
writeInput.value = '';
// 根据模式显示内容
if (mode === 'read') {
wordDisplay.innerHTML = currentWord.en + " <small>(" + currentWord.cn + ")</small>";
} else if (mode === 'speak') {
wordDisplay.innerHTML = "请大声读出：<br>" + currentWord.cn;
} else if (mode === 'write') {
wordDisplay.innerHTML = "请写出单词：<br>" + currentWord.cn;
writeInput.classList.remove('hidden');
writeInput.focus();
writeInput.onkeydown = (e) => { if (e.key === 'Enter') checkWrite(); };
} else if (mode === 'listen' || mode === 'review') {
wordDisplay.innerHTML = "🔊 听发音选中文";
// 生成3个干扰项
let options = [currentWord.cn];
let shuffled = words.filter(w => w.en !== currentWord.en).sort(() => 0.5 - Math.random()).slice(0, 3);
shuffled.forEach(w => options.push(w.cn));
options.sort(() => 0.5 - Math.random());
options.forEach(opt => {
let btn = document.createElement('button');
btn.className = 'btn';
btn.innerText = opt;
btn.onclick = () => checkListen(opt, btn);
optionsDiv.appendChild(btn);
optionsDiv.appendChild(document.createElement('br'));
});
}
// 默认播放发音（听、读模式）
if (mode === 'read' || mode === 'listen' || mode === 'speak') {
setTimeout(() => speak(currentWord.en), 300);
}
}
function checkListen(selected, btn) {
if (selected === currentWord.cn) {
score += 10;
homeworkCount++;
document.getElementById('score').innerText = score;
document.getElementById('homework').innerText = Math.min(homeworkCount, 10) + "/10";
btn.style.background = "#2ecc71";
setTimeout(() => nextWord(), 500);
} else {
mistakes.push(currentWord);
btn.style.background = "#e74c3c";
alert("答错了，正确答案是：" + currentWord.cn);
score -= 5;
document.getElementById('score').innerText = score;
setTimeout(() => nextWord(), 500);
}
}
function checkWrite() {
let input = document.getElementById('write-input').value.trim().toLowerCase();
if (input === currentWord.en.toLowerCase()) {
score += 15;
homeworkCount++;
document.getElementById('score').innerText = score;
document.getElementById('homework').innerText = Math.min(homeworkCount, 10) + "/10";
alert("⭐ 拼写正确！");
nextWord();
} else {
mistakes.push(currentWord);
alert("❌ 拼写错误。正确写法是：" + currentWord.en);
nextWord();
}
}
function nextWord() {
currentIndex++;
loadWord(currentIndex < 15 ? words : words); // 循环读取同一组数组
}
function checkHomework() {
let homeworks = document.getElementById('homework-area');
homeworks.classList.remove('hidden');
homeworks.innerHTML = `<h3>今日作业完成情况</h3>
<p>已练习次数：${homeworkCount} 次</p>
<p>积分：${score}</p>
<p>错题数量：${mistakes.length} 个</p>
<button class="btn" onclick="showMenu()">返回首页</button>`;
}
function showMenu() {
document.getElementById('main-menu').classList.remove('hidden');
document.getElementById('game-area').classList.add('hidden');
document.getElementById('completion').classList.add('hidden');
document.getElementById('homework-area').classList.add('hidden');
// 显示错题本
let errorDiv = document.getElementById('error-list');
if (mistakes.length > 0) {
errorDiv.classList.remove('hidden');
errorDiv.innerHTML = "<h3>📝 错题本（需复习）</h3>";
mistakes.forEach(w => {
errorDiv.innerHTML += `<p>${w.cn} -> ${w.en}</p>`;
});
} else {
errorDiv.classList.add('hidden');
}
}
// 初始化
showMenu();
</script>
</body>
</html>
```
💡 进阶玩法建议：
1. 补充词库：因为单词很多，我在代码里放了15个核心词作为示例。你只需要复制代码里的 { en: "...", cn: "...", unit: ... } 格式，把图片里剩余单词（比如 saw, was, went, which, star 等）加进去，游戏内容就完美覆盖你的教材了。
2. “说”的模式提醒：由于浏览器的麦克风识别限制，这个网页采用“大声跟读 + 自我确认”的方式。当你看到中文时，先自己大声用英语说出来，然后点击“播放发音”核对自己发音对不对，再点“下一个”进行自我打分。
3. 设备要求：开启网页后，请允许网页使用麦克风和音频播放权限（尤其是“听”的环节），建议使用 Chrome、Edge 或手机自带的浏览器，发音效果最好。
这个游戏兼顾了预习和复习，每天按照“作业”栏里的进度打卡，开学时你的单词量就会非常扎实啦！祝你新学期学习进步！Game Source: 五上英语单词小勇士
Creator: HyperOtter44
Libraries: none
Complexity: complex (273 lines, 12.0 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-hyperotter44" to link back to the original. Then publish at arcadelab.ai/publish.