"语文小达人·三年级闯关"是一个针对三年级学生的语文学习互动网页应用。该应用采用游戏化设计，提供四种趣味闯关模式：
1)拼音配对（匹配汉字与正确拼音）
2)组词挑战（用给定字组成词语）
3)选词填空（选择合适词语完成句子）
4)反义词配对（识别意思相反的词语）。
界面设计采用卡片式布局和渐变色背景，包含得分统计和连对奖励机制。游戏过程中会即时反馈正确答案，并根据表现给予鼓励性评语。所有题目均围绕三年级语文知识点设计，如"春天"、"认真"等基础词汇，通过拖拽、点击等交互方式完成答题。应用采用响应式设计，适合在不同设备上使用。
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>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
min-height: 100vh;
padding: 20px;
color: #333;
}
.container {
max-width: 680px;
margin: 0 auto;
}
header {
text-align: center;
color: #fff;
margin-bottom: 24px;
}
header h1 {
font-size: 2rem;
text-shadow: 2px 2px 4px rgba(0,0,0,.2);
margin-bottom: 8px;
}
header p { opacity: .9; font-size: 1rem; }
.stats {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.stat {
background: rgba(255,255,255,.25);
backdrop-filter: blur(8px);
color: #fff;
padding: 8px 20px;
border-radius: 20px;
font-weight: bold;
font-size: .95rem;
}
.card {
background: #fff;
border-radius: 20px;
padding: 28px;
box-shadow: 0 10px 40px rgba(0,0,0,.15);
margin-bottom: 20px;
}
/* 首页 */
.menu-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.menu-btn {
border: none;
border-radius: 16px;
padding: 24px 16px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: transform .2s, box-shadow .2s;
color: #fff;
font-family: inherit;
}
.menu-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.menu-btn:active { transform: scale(.97); }
.menu-btn .icon { font-size: 2rem; display: block; margin-bottom: 8px; }
.menu-btn .desc { font-size: .75rem; opacity: .85; font-weight: normal; margin-top: 4px; }
.btn-pinyin { background: linear-gradient(135deg, #f7971e, #ffd200); }
.btn-word { background: linear-gradient(135deg, #11998e, #38ef7d); }
.btn-fill { background: linear-gradient(135deg, #4776e6, #8e54e9); }
.btn-antonym{ background: linear-gradient(135deg, #eb3349, #f45c43); }
/* 游戏区 */
.screen { display: none; }
.screen.active { display: block; }
.back-btn {
background: none;
border: 2px solid #ddd;
border-radius: 10px;
padding: 6px 16px;
cursor: pointer;
font-size: .9rem;
margin-bottom: 16px;
font-family: inherit;
color: #666;
}
.back-btn:hover { border-color: #667eea; color: #667eea; }
.question-title {
font-size: .85rem;
color: #999;
margin-bottom: 12px;
}
.question-main {
font-size: 2.2rem;
text-align: center;
margin: 20px 0;
font-weight: bold;
color: #333;
}
.question-hint {
text-align: center;
color: #888;
font-size: 1rem;
margin-bottom: 20px;
}
.options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.option-btn {
border: 2px solid #e8e8e8;
border-radius: 14px;
padding: 16px;
font-size: 1.15rem;
cursor: pointer;
background: #fafafa;
transition: all .2s;
font-family: inherit;
}
.option-btn:hover:not(:disabled) {
border-color: #667eea;
background: #f0f3ff;
}
.option-btn.correct {
border-color: #38ef7d;
background: #e8fff0;
color: #11998e;
}
.option-btn.wrong {
border-color: #f45c43;
background: #fff0ee;
color: #eb3349;
}
.option-btn:disabled { cursor: default; }
.feedback {
text-align: center;
font-size: 1.1rem;
margin-top: 16px;
min-height: 28px;
font-weight: bold;
}
.feedback.good { color: #11998e; }
.feedback.bad { color: #eb3349; }
.next-btn {
display: block;
margin: 16px auto 0;
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
border: none;
border-radius: 12px;
padding: 12px 40px;
font-size: 1rem;
cursor: pointer;
font-family: inherit;
font-weight: bold;
}
.next-btn:hover { opacity: .9; }
.progress-bar {
height: 8px;
background: #eee;
border-radius: 4px;
margin-bottom: 20px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 4px;
transition: width .4s;
}
/* 组词游戏 */
.char-pool {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin: 20px 0;
}
.char-chip {
width: 56px;
height: 56px;
border: 2px solid #ddd;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
cursor: pointer;
background: #fff;
transition: all .2s;
user-select: none;
}
.char-chip:hover:not(.used) { border-color: #667eea; background: #f0f3ff; }
.char-chip.used { opacity: .3; pointer-events: none; }
.answer-slots {
display: flex;
gap: 12px;
justify-content: center;
margin: 16px 0;
}
.slot {
width: 64px;
height: 64px;
border: 2px dashed #ccc;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: bold;
cursor: pointer;
background: #fafafa;
}
.slot.filled { border-style: solid; border-color: #667eea; background: #f0f3ff; }
</style>
</head>
<body>
<div class="container">
<header>
<h1>🌟 语文小达人</h1>
<p>三年级趣味闯关 · 边玩边学</p>
</header>
<div class="stats">
<div class="stat">⭐ 得分：<span id="score">0</span></div>
<div class="stat">🏆 连对：<span id="streak">0</span></div>
</div>
<!-- 主菜单 -->
<div id="menu" class="card screen active">
<div class="menu-grid">
<button class="menu-btn btn-pinyin" onclick="startGame('pinyin')">
<span class="icon">🔤</span>拼音配对
<div class="desc">给汉字找正确拼音</div>
</button>
<button class="menu-btn btn-word" onclick="startGame('word')">
<span class="icon">📝</span>组词挑战
<div class="desc">用给出的字组成词语</div>
</button>
<button class="menu-btn btn-fill" onclick="startGame('fill')">
<span class="icon">✏️</span>选词填空
<div class="desc">选词完成句子</div>
</button>
<button class="menu-btn btn-antonym" onclick="startGame('antonym')">
<span class="icon">🔄</span>反义词配对
<div class="desc">找出意思相反的字词</div>
</button>
</div>
</div>
<!-- 游戏界面 -->
<div id="game" class="card screen">
<button class="back-btn" onclick="goMenu()">← 返回菜单</button>
<div class="progress-bar"><div class="progress-fill" id="progress"></div></div>
<div class="question-title" id="qTitle"></div>
<div class="question-main" id="qMain"></div>
<div class="question-hint" id="qHint"></div>
<div id="gameArea"></div>
<div class="feedback" id="feedback"></div>
<button class="next-btn" id="nextBtn" style="display:none" onclick="nextQuestion()">下一题 →</button>
</div>
</div>
<script>
let score = 0, streak = 0, currentMode = '';
let questions = [], qIndex = 0, answered = false;
const ENCOURAGE = ['太棒了！🎉', '真厉害！⭐', '答对啦！👏', '语文小达人！🌟', '继续加油！💪'];
const COMFORT = ['再想想哦～', '没关系，下次一定行！', '加油，你可以的！'];
// ===== 题库 =====
const PINYIN_Q = [
{ char: '翠', answer: 'cuì', options: ['cuì', 'zuì', 'suì', 'chuì'] },
{ char: '融', answer: 'róng', options: ['róng', 'lóng', 'gōng', 'róu'] },
{ char: '翩', answer: 'piān', options: ['piān', 'biān', 'pián', 'piàn'] },
{ char: '漾', answer: 'yàng', options: ['yàng', 'yáng', 'dàng', 'tàng'] },
{ char: '逐', answer: 'zhú', options: ['zhú', 'zhū', 'dú', 'zhǔ'] },
{ char: '胀', answer: 'zhàng', options: ['zhàng', 'zhāng', 'cháng', 'zhǎng'] },
{ char: '蓬', answer: 'péng', options: ['péng', 'bēng', 'fēng', 'pēng'] },
{ char: '蹈', answer: 'dǎo', options: ['dǎo', 'tāo', 'dào', 'chāo'] },
{ char: '挨', answer: 'āi', options: ['āi', 'ái', 'ǎi', 'ài'] },
{ char: '蓬', answer: 'péng', options: ['péng', 'pēn', 'bèng', 'měng'] },
];
const WORD_Q = [
{ chars: ['美', '丽', '好', '漂', '亮', '丽'], answer: '美丽', hint: '形容好看' },
{ chars: ['春', '天', '夏', '暖', '花', '开'], answer: '春天', hint: '一年中的第一个季节' },
{ chars: ['快', '乐', '高', '兴', '欢', '乐'], answer: '快乐', hint: '心情愉快' },
{ chars: ['认', '真', '仔', '细', '用', '心'], answer: '认真', hint: '做事不马虎' },
{ chars: ['温', '暖', '热', '和', '暖', '气'], answer: '温暖', hint: '不冷，让人舒服' },
{ chars: ['聪', '明', '机', '灵', '智', '慧'], answer: '聪明', hint: '头脑灵活' },
{ chars: ['勇', '敢', '胆', '大', '无', '畏'], answer: '勇敢', hint: '不怕困难' },
{ chars: ['骄', '傲', '自', '大', '谦', '虚'], answer: '骄傲', hint: '觉得自己很厉害' },
];
const FILL_Q = [
{ sentence: '春天来了，花儿___了。', answer: '开放', options: ['开放', '关闭', '睡觉', '吃饭'] },
{ sentence: '小明每天___地做作业。', answer: '认真', options: ['认真', '马虎', '随便', '懒惰'] },
{ sentence: '小鸟在天空中自由地___。', answer: '飞翔', options: ['飞翔', '游泳', '爬行', '奔跑'] },
{ sentence: '我们要___父母长辈。', answer: '尊敬', options: ['尊敬', '嘲笑', '忽视', '讨厌'] },
{ sentence: '雨后，天空出现了一道美丽的___。', answer: '彩虹', options: ['彩虹', '闪电', '乌云', '雪花'] },
{ sentence: '图书馆里很___，大家都在看书。', answer: '安静', options: ['安静', '吵闹', '热闹', '混乱'] },
{ sentence: '小兔子长着长长的___。', answer: '耳朵', options: ['耳朵', '尾巴', '翅膀', '牙齿'] },
{ sentence: '他用自己的零花钱___了一本书。', answer: '购买', options: ['购买', '扔掉', '撕毁', '借走'] },
];
const ANTONYM_Q = [
{ word: '高兴', answer: '难过', options: ['难过', '快乐', '开心', '愉快'] },
{ word: '明亮', answer: '黑暗', options: ['黑暗', '光明', '灿烂', '耀眼'] },
{ word: '温暖', answer: '寒冷', options: ['寒冷', '炎热', '凉快', '温和'] },
{ word: '勤劳', answer: '懒惰', options: ['懒惰', '辛苦', '忙碌', '努力'] },
{ word: '谦虚', answer: '骄傲', options: ['骄傲', '低调', '礼貌', '客气'] },
{ word: '勇敢', answer: '胆小', options: ['胆小', '大胆', '无畏', '坚强'] },
{ word: '美丽', answer: '丑陋', options: ['丑陋', '漂亮', '好看', '迷人'] },
{ word: '增加', answer: '减少', options: ['减少', '增多', '扩大', '提高'] },
];
function shuffle(arr) {
const a = [...arr];
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
function updateStats() {
document.getElementById('score').textContent = score;
document.getElementById('streak').textContent = streak;
}
function showScreen(id) {
document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
document.getElementById(id).classList.add('active');
}
function goMenu() {
showScreen('menu');
currentMode = '';
}
function startGame(mode) {
currentMode = mode;
qIndex = 0;
answered = false;
const pools = { pinyin: PINYIN_Q, word: WORD_Q, fill: FILL_Q, antonym: ANTONYM_Q };
questions = shuffle(pools[mode]).slice(0, 5);
showScreen('game');
renderQuestion();
}
function renderQuestion() {
answered = false;
const q = questions[qIndex];
const titles = { pinyin: '拼音配对', word: '组词挑战', fill: '选词填空', antonym: '反义词配对' };
document.getElementById('qTitle').textContent = `${titles[currentMode]} · 第 ${qIndex + 1}/${questions.length} 题`;
document.getElementById('progress').style.width = `${(qIndex / questions.length) * 100}%`;
document.getElementById('feedback').textContent = '';
document.getElementById('feedback').className = 'feedback';
document.getElementById('nextBtn').style.display = 'none';
const area = document.getElementById('gameArea');
area.innerHTML = '';
if (currentMode === 'pinyin') {
document.getElementById('qMain').textContent = q.char;
document.getElementById('qHint').textContent = '请选择正确的拼音';
renderOptions(q.options, q.answer);
} else if (currentMode === 'fill') {
document.getElementById('qMain').textContent = q.sentence.replace('___', '______');
document.getElementById('qHint').textContent = '选择最合适的词语填入';
renderOptions(q.options, q.answer);
} else if (currentMode === 'antonym') {
document.getElementById('qMain').textContent = q.word;
document.getElementById('qHint').textContent = '哪个词与它的意思相反？';
renderOptions(q.options, q.answer);
} else if (currentMode === 'word') {
document.getElementById('qMain').textContent = '组词';
document.getElementById('qHint').textContent = q.hint;
renderWordGame(q);
}
}
function renderOptions(options, answer) {
const area = document.getElementById('gameArea');
const div = document.createElement('div');
div.className = 'options';
shuffle(options).forEach(opt => {
const btn = document.createElement('button');
btn.className = 'option-btn';
btn.textContent = opt;
btn.onclick = () => checkAnswer(opt, answer, btn);
div.appendChild(btn);
});
area.appendChild(div);
}
function checkAnswer(selected, answer, btn) {
if (answered) return;
answered = true;
const allBtns = document.querySelectorAll('.option-btn');
allBtns.forEach(b => {
b.disabled = true;
if (b.textContent === answer) b.classList.add('correct');
});
const fb = document.getElementById('feedback');
if (selected === answer) {
btn.classList.add('correct');
score += 10 + streak * 2;
streak++;
fb.textContent = ENCOURAGE[Math.floor(Math.random() * ENCOURAGE.length)];
fb.className = 'feedback good';
} else {
btn.classList.add('wrong');
streak = 0;
fb.textContent = COMFORT[Math.floor(Math.random() * COMFORT.length)] + ` 正确答案：${answer}`;
fb.className = 'feedback bad';
}
updateStats();
document.getElementById('nextBtn').style.display = 'block';
}
// 组词游戏
let wordSlots = [], wordUsed = [];
function renderWordGame(q) {
wordSlots = ['', ''];
wordUsed = [];
const area = document.getElementById('gameArea');
const slotsDiv = document.createElement('div');
slotsDiv.className = 'answer-slots';
slotsDiv.id = 'slots';
for (let i = 0; i < 2; i++) {
const slot = document.createElement('div');
slot.className = 'slot';
slot.dataset.idx = i;
slot.onclick = () => removeChar(i, q);
slotsDiv.appendChild(slot);
}
area.appendChild(slotsDiv);
const poolDiv = document.createElement('div');
poolDiv.className = 'char-pool';
poolDiv.id = 'charPool';
shuffle(q.chars).forEach((ch, i) => {
const chip = document.createElement('div');
chip.className = 'char-chip';
chip.textContent = ch;
chip.dataset.idx = i;
chip.onclick = () => pickChar(ch, i, q);
poolDiv.appendChild(chip);
});
area.appendChild(poolDiv);
}
function pickChar(ch, idx, q) {
if (answered) return;
const empty = wordSlots.findIndex(s => s === '');
if (empty === -1) return;
wordSlots[empty] = ch;
wordUsed.push(idx);
const slots = document.querySelectorAll('.slot');
slots[empty].textContent = ch;
slots[empty].classList.add('filled');
const chips = document.querySelectorAll('.char-chip');
chips[idx].classList.add('used');
if (wordSlots.every(s => s !== '')) {
const formed = wordSlots.join('');
setTimeout(() => checkWord(formed, q.answer), 300);
}
}
function removeChar(slotIdx, q) {
if (answered || !wordSlots[slotIdx]) return;
const ch = wordSlots[slotIdx];
wordSlots[slotIdx] = '';
const slots = document.querySelectorAll('.slot');
slots[slotIdx].textContent = '';
slots[slotIdx].classList.remove('filled');
const chips = document.querySelectorAll('.char-chip');
chips.forEach((chip, i) => {
if (chip.textContent === ch && chip.classList.contains('used')) {
const otherUsed = wordSlots.filter(s => s === ch).length;
const totalUsed = [...wordSlots, ch].filter(s => s === ch).length;
if (wordUsed.includes(i)) {
chip.classList.remove('used');
wordUsed = wordUsed.filter(u => u !== i);
}
}
});
// 简化：重新渲染字符池状态
const pool = document.getElementById('charPool');
pool.querySelectorAll('.char-chip').forEach((chip, i) => {
chip.classList.toggle('used', wordUsed.includes(i));
});
}
function checkWord(formed, answer) {
answered = true;
const fb = document.getElementById('feedback');
if (formed === answer) {
score += 10 + streak * 2;
streak++;
fb.textContent = ENCOURAGE[Math.floor(Math.random() * ENCOURAGE.length)] + ` 「${answer}」`;
fb.className = 'feedback good';
} else {
streak = 0;
fb.textContent = COMFORT[0] + ` 正确答案是「${answer}」`;
fb.className = 'feedback bad';
}
updateStats();
document.getElementById('nextBtn').style.display = 'block';
}
function nextQuestion() {
qIndex++;
if (qIndex >= questions.length) {
const msg = score >= 40 ? '🏆 闯关成功！你是语文小达人！' : '💪 继续加油，下次一定能拿高分！';
document.getElementById('qMain').textContent = msg;
document.getElementById('qHint').textContent = `本次得分：${score} 分`;
document.getElementById('gameArea').innerHTML = '';
document.getElementById('feedback').textContent = '';
document.getElementById('nextBtn').textContent = '再来一轮';
document.getElementById('nextBtn').onclick = () => {
document.getElementById('nextBtn').textContent = '下一题 →';
document.getElementById('nextBtn').onclick = nextQuestion;
startGame(currentMode);
};
document.getElementById('progress').style.width = '100%';
return;
}
renderQuestion();
}
</script>
</body>
</html>