太空数学闯关
by PixelFlame701450 lines68.8 KB
<!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, viewport-fit=cover">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>太空数学闯关</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
touch-action: manipulation;
}
body {
background: linear-gradient(180deg, #0a0e27 0%, #1a1f4a 50%, #2d1b69 100%);
color: white;
}
.space-container {
width: 100%;
position: relative;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
}
/* 星空背景 */
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.star {
position: absolute;
background: white;
border-radius: 50%;
-webkit-animation: twinkle 3s infinite alternate;
animation: twinkle 3s infinite alternate;
}
@-webkit-keyframes twinkle {
0% { opacity: 0.2; }
100% { opacity: 1; }
}
@keyframes twinkle {
0% { opacity: 0.2; }
100% { opacity: 1; }
}
/* 页面通用 */
.page {
position: relative;
z-index: 10;
width: 100%;
min-height: 100%;
padding: 20px;
padding-bottom: calc(20px + env(safe-area-inset-bottom));
padding-bottom: calc(20px + -webkit-safe-area-inset-bottom);
display: none;
}
.page.active {
display: block;
}
/* 欢迎页面 */
.welcome-rocket {
font-size: 80px;
text-align: center;
margin: 40px 0 20px;
-webkit-animation: rocketFloat 2s ease-in-out infinite alternate;
animation: rocketFloat 2s ease-in-out infinite alternate;
}
@-webkit-keyframes rocketFloat {
0% { -webkit-transform: translateY(0) rotate(-5deg); transform: translateY(0) rotate(-5deg); }
100% { -webkit-transform: translateY(-20px) rotate(5deg); transform: translateY(-20px) rotate(5deg); }
}
@keyframes rocketFloat {
0% { transform: translateY(0) rotate(-5deg); }
100% { transform: translateY(-20px) rotate(5deg); }
}
.game-title {
font-size: 36px;
font-weight: bold;
text-align: center;
background: linear-gradient(90deg, #ffd700, #ff9d00, #ffd700);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
}
.game-subtitle {
text-align: center;
font-size: 16px;
color: #a0a8d8;
margin-bottom: 30px;
}
.btn-primary {
display: block;
width: 100%;
max-width: 300px;
margin: 20px auto;
padding: 16px 24px;
font-size: 20px;
font-weight: bold;
color: white;
border: none;
border-radius: 50px;
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
box-shadow: 0 8px 20px rgba(79, 172, 254, 0.4);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.btn-primary:active {
-webkit-transform: scale(0.96);
transform: scale(0.96);
box-shadow: 0 4px 10px rgba(79, 172, 254, 0.4);
}
.btn-secondary {
display: block;
width: 100%;
max-width: 300px;
margin: 10px auto;
padding: 14px 24px;
font-size: 18px;
font-weight: bold;
color: white;
border: 2px solid rgba(255,255,255,0.4);
border-radius: 50px;
background: rgba(255,255,255,0.1);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.btn-secondary:active {
-webkit-transform: scale(0.96);
transform: scale(0.96);
background: rgba(255,255,255,0.2);
}
/* 关卡选择页面 */
.page-header {
text-align: center;
margin-bottom: 20px;
}
.page-title {
font-size: 28px;
font-weight: bold;
margin-bottom: 8px;
}
.score-display {
text-align: center;
font-size: 16px;
color: #ffd700;
margin-bottom: 20px;
}
.planets-grid {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
gap: 16px;
max-width: 500px;
margin: 0 auto;
}
.planet-card {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
padding: 16px;
border-radius: 20px;
background: rgba(255,255,255,0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.15);
cursor: pointer;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.planet-card:active {
-webkit-transform: scale(0.98);
transform: scale(0.98);
}
.planet-card.locked {
opacity: 0.5;
cursor: not-allowed;
}
.planet-emoji {
font-size: 48px;
margin-right: 16px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.planet-info {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.planet-name {
font-size: 20px;
font-weight: bold;
margin-bottom: 4px;
}
.planet-desc {
font-size: 14px;
color: #b8c0e8;
margin-bottom: 6px;
}
.planet-stars {
font-size: 16px;
color: #ffd700;
}
/* 游戏答题页面 */
.quiz-header {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
margin-bottom: 20px;
}
.quiz-back {
font-size: 16px;
padding: 8px 16px;
background: rgba(255,255,255,0.1);
border-radius: 20px;
border: none;
color: white;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.quiz-progress {
font-size: 16px;
font-weight: bold;
color: #4facfe;
}
.quiz-score {
font-size: 16px;
color: #ffd700;
}
.progress-bar-container {
width: 100%;
height: 10px;
background: rgba(255,255,255,0.1);
border-radius: 5px;
margin-bottom: 24px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #4facfe, #00f2fe);
border-radius: 5px;
-webkit-transition: width 0.5s;
transition: width 0.5s;
}
.question-card {
background: rgba(255,255,255,0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 24px;
padding: 28px 20px;
margin-bottom: 24px;
border: 2px solid rgba(255,255,255,0.15);
text-align: center;
}
.question-text {
font-size: 22px;
line-height: 1.5;
font-weight: 500;
}
.answers-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 20px;
}
.answer-btn {
padding: 18px 12px;
font-size: 18px;
font-weight: bold;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
border: 2px solid rgba(255,255,255,0.2);
border-radius: 16px;
background: rgba(255,255,255,0.08);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
word-break: break-word;
line-height: 1.4;
min-height: 60px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.answer-btn:active {
-webkit-transform: scale(0.96);
transform: scale(0.96);
}
.answer-btn.correct {
background: linear-gradient(135deg, #00b09b, #96c93d);
border-color: #96c93d;
}
.answer-btn.wrong {
background: linear-gradient(135deg, #eb3349, #f45c43);
border-color: #f45c43;
}
.answer-btn:disabled {
cursor: not-allowed;
}
.fill-input-area {
display: -webkit-box;
display: -webkit-flex;
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.fill-input {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
padding: 16px 20px;
font-size: 20px;
text-align: center;
border: 2px solid rgba(255,255,255,0.2);
border-radius: 16px;
background: rgba(255,255,255,0.1);
color: white;
-webkit-appearance: none;
appearance: none;
outline: none;
}
.fill-input::-webkit-input-placeholder {
color: rgba(255,255,255,0.4);
}
.fill-submit-btn {
padding: 16px 24px;
font-size: 18px;
font-weight: bold;
color: white;
border: none;
border-radius: 16px;
background: linear-gradient(135deg, #667eea, #764ba2);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.fill-submit-btn:active {
-webkit-transform: scale(0.96);
transform: scale(0.96);
}
.feedback {
text-align: center;
font-size: 20px;
font-weight: bold;
padding: 12px;
border-radius: 12px;
margin-bottom: 16px;
min-height: 50px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.feedback.correct {
background: rgba(0, 176, 155, 0.2);
color: #96c93d;
}
.feedback.wrong {
background: rgba(235, 51, 73, 0.2);
color: #f45c43;
}
.combo-tip {
text-align: center;
font-size: 16px;
color: #ffd700;
margin-bottom: 10px;
min-height: 22px;
}
/* 结算页面 */
.result-card {
text-align: center;
background: rgba(255,255,255,0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 24px;
padding: 32px 20px;
margin-bottom: 24px;
border: 2px solid rgba(255,255,255,0.15);
}
.result-emoji {
font-size: 80px;
margin-bottom: 16px;
}
.result-title {
font-size: 28px;
font-weight: bold;
margin-bottom: 16px;
}
.result-stars {
font-size: 48px;
margin-bottom: 20px;
letter-spacing: 8px;
}
.result-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 20px;
}
.stat-item {
background: rgba(255,255,255,0.08);
padding: 16px;
border-radius: 16px;
}
.stat-label {
font-size: 14px;
color: #b8c0e8;
margin-bottom: 4px;
}
.stat-value {
font-size: 24px;
font-weight: bold;
color: #ffd700;
}
.result-message {
font-size: 18px;
line-height: 1.6;
color: #e0e0ff;
}
.unlock-notice {
background: rgba(255, 215, 0, 0.2);
color: #ffd700;
padding: 12px;
border-radius: 12px;
margin: 16px 0;
font-size: 16px;
font-weight: bold;
}
/* 成绩单页面 */
.report-card {
background: rgba(255,255,255,0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 24px;
padding: 24px 20px;
margin-bottom: 20px;
border: 2px solid rgba(255,255,255,0.15);
}
.report-total {
text-align: center;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255,255,255,0.1);
margin-bottom: 20px;
}
.report-total-stars {
font-size: 20px;
margin-bottom: 8px;
}
.report-total-score {
font-size: 36px;
font-weight: bold;
color: #ffd700;
}
.report-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 20px;
}
.report-stat {
text-align: center;
padding: 12px;
background: rgba(255,255,255,0.08);
border-radius: 12px;
}
.report-stat-value {
font-size: 22px;
font-weight: bold;
margin-bottom: 4px;
}
.report-stat-label {
font-size: 13px;
color: #b8c0e8;
}
.planet-report-item {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.planet-report-item:last-child {
border-bottom: none;
}
.planet-report-name {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
font-size: 16px;
}
.planet-report-stars {
color: #ffd700;
margin-right: 12px;
}
.planet-report-score {
color: #4facfe;
font-weight: bold;
}
/* 撒花效果 */
.confetti {
position: fixed;
width: 10px;
height: 10px;
pointer-events: none;
z-index: 100;
-webkit-animation: confettiFall 3s linear forwards;
animation: confettiFall 3s linear forwards;
}
@-webkit-keyframes confettiFall {
0% { -webkit-transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { -webkit-transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes confettiFall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
/* 星星弹出动画 */
@-webkit-keyframes starPop {
0% { -webkit-transform: scale(0); opacity: 0; }
50% { -webkit-transform: scale(1.3); }
100% { -webkit-transform: scale(1); opacity: 1; }
}
@keyframes starPop {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1.3); }
100% { transform: scale(1); opacity: 1; }
}
.star-pop {
display: inline-block;
-webkit-animation: starPop 0.5s ease-out forwards;
animation: starPop 0.5s ease-out forwards;
}
/* 返回按钮通用 */
.back-btn {
display: inline-block;
padding: 8px 16px;
font-size: 16px;
background: rgba(255,255,255,0.1);
border-radius: 20px;
border: none;
color: white;
cursor: pointer;
margin-bottom: 16px;
-webkit-appearance: none;
appearance: none;
}
.back-btn:active {
background: rgba(255,255,255,0.2);
}
/* 手机适配 */
@media (max-width: 400px) {
.game-title {
font-size: 30px;
}
.question-text {
font-size: 20px;
}
.answer-btn {
font-size: 16px;
padding: 14px 8px;
}
}
</style>
</head>
<body>
<div class="space-container" id="mainContainer">
<!-- 星空背景 -->
<div class="stars" id="starsContainer"></div>
<!-- 欢迎页面 -->
<div class="page active" id="welcomePage">
<div class="welcome-rocket">🚀</div>
<h1 class="game-title">太空数学闯关</h1>
<p class="game-subtitle">三年级上学期期中 · 边学边玩探索宇宙</p>
<button class="btn-primary" onclick="showLevelSelect()">🌟 开始探险</button>
<button class="btn-secondary" onclick="showReport()">📊 我的成绩单</button>
</div>
<!-- 关卡选择页面 -->
<div class="page" id="levelPage">
<button class="back-btn" onclick="showWelcome()">← 返回</button>
<div class="page-header">
<h2 class="page-title">🌌 选择星球</h2>
</div>
<div class="score-display" id="totalScoreDisplay">总积分:0 ⭐ 总星星:0</div>
<div class="planets-grid" id="planetsGrid"></div>
</div>
<!-- 答题页面 -->
<div class="page" id="quizPage">
<div class="quiz-header">
<button class="quiz-back" onclick="quitQuiz()">← 退出</button>
<div class="quiz-progress" id="progressText">1 / 8</div>
<div class="quiz-score" id="currentScoreText">积分:0</div>
</div>
<div class="progress-bar-container">
<div class="progress-bar" id="progressBar" style="width: 0%"></div>
</div>
<div class="combo-tip" id="comboTip"></div>
<div class="question-card">
<div class="question-text" id="questionText"></div>
</div>
<div id="answersContainer"></div>
<div class="feedback" id="feedback"></div>
</div>
<!-- 结算页面 -->
<div class="page" id="resultPage">
<button class="back-btn" onclick="showLevelSelect()">← 返回星球选择</button>
<div class="result-card">
<div class="result-emoji" id="resultEmoji">🎉</div>
<h2 class="result-title" id="resultTitle">挑战成功!</h2>
<div class="result-stars" id="resultStars"></div>
<div class="result-stats">
<div class="stat-item">
<div class="stat-label">答对题数</div>
<div class="stat-value" id="resultCorrect">0</div>
</div>
<div class="stat-item">
<div class="stat-label">本轮积分</div>
<div class="stat-value" id="resultScore">0</div>
</div>
<div class="stat-item">
<div class="stat-label">正确率</div>
<div class="stat-value" id="resultAccuracy">0%</div>
</div>
<div class="stat-item">
<div class="stat-label">最高连对</div>
<div class="stat-value" id="resultCombo">0</div>
</div>
</div>
<div class="result-message" id="resultMessage"></div>
<div class="unlock-notice" id="unlockNotice" style="display:none">🔓 恭喜解锁下一颗星球!</div>
</div>
<button class="btn-primary" onclick="restartLevel()">🔄 再玩一次</button>
<button class="btn-secondary" onclick="showLevelSelect()">🪐 选择其他星球</button>
</div>
<!-- 成绩单页面 -->
<div class="page" id="reportPage">
<button class="back-btn" onclick="showWelcome()">← 返回</button>
<div class="page-header">
<h2 class="page-title">📊 我的成绩单</h2>
</div>
<div class="report-card">
<div class="report-total">
<div class="report-total-stars">总星星数</div>
<div class="report-total-score" id="reportTotalStars">0 ⭐</div>
</div>
<div class="report-stats-grid">
<div class="report-stat">
<div class="report-stat-value" id="reportTotalScore">0</div>
<div class="report-stat-label">总积分</div>
</div>
<div class="report-stat">
<div class="report-stat-value" id="reportTotalQuestions">0</div>
<div class="report-stat-label">答题总数</div>
</div>
<div class="report-stat">
<div class="report-stat-value" id="reportTotalCorrect">0</div>
<div class="report-stat-label">答对题数</div>
</div>
<div class="report-stat">
<div class="report-stat-value" id="reportAccuracy">0%</div>
<div class="report-stat-label">总正确率</div>
</div>
</div>
<div id="planetReportList"></div>
</div>
<button class="btn-secondary" onclick="resetProgress()" style="border-color: rgba(244,92,67,0.4); color: #f45c43;">🗑️ 重置所有进度</button>
</div>
</div>
<script>
// 初始化视口高度,解决QQ浏览器100vh问题
function setAppHeight() {
var doc = document.documentElement;
doc.style.setProperty('--app-height', window.innerHeight + 'px');
document.getElementById('mainContainer').style.height = window.innerHeight + 'px';
}
window.addEventListener('resize', setAppHeight);
window.addEventListener('orientationchange', setAppHeight);
setAppHeight();
// 生成星空
function createStars() {
var container = document.getElementById('starsContainer');
for (var i = 0; i < 80; i++) {
var star = document.createElement('div');
star.className = 'star';
star.style.left = Math.random() * 100 + '%';
star.style.top = Math.random() * 100 + '%';
var size = Math.random() * 3 + 1;
star.style.width = size + 'px';
star.style.height = size + 'px';
star.style.animationDelay = Math.random() * 3 + 's';
container.appendChild(star);
}
}
createStars();
// 本地存储 带try-catch兼容QQ
var gameData = {
totalScore: 0,
totalStars: 0,
totalQuestions: 0,
totalCorrect: 0,
planets: []
};
function loadGameData() {
try {
var saved = localStorage.getItem('spaceMathGame_v2');
if (saved) {
var parsed = JSON.parse(saved);
gameData = Object.assign(gameData, parsed);
}
} catch(e) {
// 本地存储不可用,使用默认数据
}
// 初始化星球数据
if (gameData.planets.length !== 8) {
gameData.planets = [
{id:0, name:'水星', emoji:'☿️', unlocked:true, stars:0, bestScore:0, plays:0},
{id:1, name:'金星', emoji:'♀️', unlocked:false, stars:0, bestScore:0, plays:0},
{id:2, name:'地球', emoji:'🌍', unlocked:false, stars:0, bestScore:0, plays:0},
{id:3, name:'火星', emoji:'♂️', unlocked:false, stars:0, bestScore:0, plays:0},
{id:4, name:'木星', emoji:'♃', unlocked:false, stars:0, bestScore:0, plays:0},
{id:5, name:'土星', emoji:'🪐', unlocked:false, stars:0, bestScore:0, plays:0},
{id:6, name:'天王星', emoji:'♅', unlocked:false, stars:0, bestScore:0, plays:0},
{id:7, name:'海王星', emoji:'♆', unlocked:false, stars:0, bestScore:0, plays:0}
];
}
}
function saveGameData() {
try {
localStorage.setItem('spaceMathGame_v2', JSON.stringify(gameData));
} catch(e) {
// 保存失败不影响游戏
}
}
loadGameData();
// 题库 海量题目
var questionBank = {
// 0:水星-观察物体入门 选择题
0: [
// 观察物体基础
{q:'观察一个正方体,从前面看是什么形状?', options:['正方形','圆形','长方形','三角形'], a:0},
{q:'观察一个球,无论从哪个方向看都是什么形状?', options:['圆形','正方形','长方形','椭圆'], a:0},
{q:'从前面观察一个圆柱,看到的形状可能是?', options:['长方形','圆形','三角形','正方形'], a:0},
{q:'从上面观察一个圆柱,看到的形状是?', options:['圆形','长方形','正方形','三角形'], a:0},
{q:'观察一个长方体,从前面和从上面看到的形状?', options:['可能不一样','一定一样','一定是圆形','一定是三角形'], a:0},
{q:'从不同方向观察同一个物体,看到的形状?', options:['可能不同','一定相同','一定是圆形','一定是正方形'], a:0},
{q:'我们观察放在桌上的粉笔盒,一次最多能看到几个面?', options:['3个','2个','1个','6个'], a:0},
{q:'我们观察一个物体,最少能看到几个面?', options:['1个','2个','3个','0个'], a:0},
{q:'从上面看一个正方体,看到的是什么?', options:['正方形','长方形','圆形','三角形'], a:0},
{q:'从侧面看一个直立的圆柱,看到的是什么?', options:['长方形','圆形','三角形','正方形'], a:0},
{q:'小明站在汽车的前面,他看到的是汽车的哪一部分?', options:['车头','车尾','车门','车轮'], a:0},
{q:'小红站在冰箱的正前方,她看不到冰箱的哪个面?', options:['后面','前面','上面','侧面'], a:0},
{q:'从上面观察一个水杯(圆柱形),看到的是?', options:['圆形','长方形','正方形','梯形'], a:0},
{q:'从前面观察一本平放的数学书,看到的形状是?', options:['长方形','正方形','圆形','三角形'], a:0},
{q:'两个同样的正方体并排摆放,从前面看是什么形状?', options:['长方形','两个圆形','三角形','正方形'], a:0},
{q:'观察一个正方体骰子,"1"的对面是"6",如果前面是"1",后面是?', options:['6','2','3','5'], a:0},
{q:'小刚从前面看到物体是正方形,这个物体不可能是?', options:['球','正方体','长方体','圆柱'], a:0},
{q:'从侧面观察球,看到的形状是?', options:['圆形','正方形','长方形','三角形'], a:0},
{q:'从任何方向观察形状都一样的物体是?', options:['球','长方体','圆柱','正方体'], a:0},
{q:'我们观察讲台上的讲台,从老师的方向(前面)看,看到的是讲台的?', options:['正面','背面','上面','底面'], a:0},
{q:'拍照时,相机对着大象的正面,拍出来的是大象的?', options:['正脸','后背','侧面','尾巴'], a:0},
{q:'观察一个长方体,最多能同时看到几个相邻的面?', options:['3个','2个','1个','4个'], a:0},
{q:'从上面看我们的课桌,桌面是什么形状?', options:['长方形','正方形','圆形','三角形'], a:0},
{q:'下面哪个物体从前面看是圆形?', options:['篮球','魔方','数学书','粉笔盒'], a:0},
{q:'下面哪个物体从前面看是正方形?', options:['魔方','水杯','铅笔','黑板'], a:0}
],
// 1:金星-长度单位基础 选择题
1: [
{q:'1厘米等于多少毫米?', options:['10毫米','100毫米','1毫米','1000毫米'], a:0},
{q:'1分米等于多少厘米?', options:['10厘米','100厘米','1厘米','1000厘米'], a:0},
{q:'1米等于多少分米?', options:['10分米','100分米','1分米','1000分米'], a:0},
{q:'1千米等于多少米?', options:['1000米','100米','10米','10000米'], a:0},
{q:'我们学过的最小长度单位是?', options:['毫米','厘米','分米','千米'], a:0},
{q:'我们学过的最大长度单位是?', options:['千米','米','分米','毫米'], a:0},
{q:'量比较短的物体长度或者要求量得比较精确时,用什么作单位?', options:['毫米','分米','米','千米'], a:0},
{q:'1枚1分硬币的厚度大约是1?', options:['毫米','厘米','分米','米'], a:0},
{q:'数学书的厚度大约是7?', options:['毫米','厘米','分米','米'], a:0},
{q:'我们的手指宽度大约是1?', options:['厘米','毫米','分米','米'], a:0},
{q:'手掌的长度大约是1?', options:['分米','厘米','毫米','米'], a:0},
{q:'课桌的高度大约是7?', options:['分米','厘米','米','千米'], a:0},
{q:'教室的长度大约是8?', options:['米','分米','千米','厘米'], a:0},
{q:'测量黄冈到武汉的路程,用什么作单位合适?', options:['千米','米','分米','厘米'], a:0},
{q:'长江是我国第一大河,全长约6300?', options:['千米','米','分米','毫米'], a:0},
{q:'小明身高135?', options:['厘米','分米','米','毫米'], a:0},
{q:'铅笔的长度大约是2?', options:['分米','厘米','毫米','米'], a:0},
{q:'10厘米等于多少分米?', options:['1分米','10分米','100分米','0.1分米'], a:0},
{q:'10分米等于多少米?', options:['1米','10米','100米','0.1米'], a:0},
{q:'1000米等于多少千米?', options:['1千米','10千米','100千米','0.1千米'], a:0},
{q:'下面单位中,哪个不是长度单位?', options:['千克','毫米','分米','千米'], a:0},
{q:'银行卡的厚度大约是1?', options:['毫米','厘米','分米','米'], a:0},
{q:'操场跑道一圈长400?', options:['米','千米','分米','厘米'], a:0},
{q:'跳绳的长度大约是2?', options:['米','分米','厘米','千米'], a:0},
{q:'字典的厚度大约是4?', options:['厘米','毫米','分米','米'], a:0}
],
// 2:地球-混合运算入门 选择题
2: [
{q:'计算 3×4+5 = ?', options:['17','12','27','20'], a:0},
{q:'计算 2×6+8 = ?', options:['20','12','48','14'], a:0},
{q:'计算 5×3-7 = ?', options:['8','15','22','-2'], a:0},
{q:'计算 4×5-10 = ?', options:['10','20','30','0'], a:0},
{q:'计算 6+3×2 = ?', options:['12','18','9','15'], a:0},
{q:'计算 20-4×3 = ?', options:['8','48','12','20'], a:0},
{q:'在没有括号的算式里,如果有乘法又有加减法,要先算什么?', options:['乘法','加法','减法','从左到右'], a:0},
{q:'计算 7+2×5 = ?', options:['17','45','14','22'], a:0},
{q:'计算 9×2-6 = ?', options:['12','24','3','18'], a:0},
{q:'计算 4+4×2 = ?', options:['12','16','8','10'], a:0},
{q:'计算 8×3-15 = ?', options:['9','39','24','3'], a:0},
{q:'计算 5×5+5 = ?', options:['30','25','50','15'], a:0},
{q:'3个6相加再加10,结果是多少?', options:['28','19','28','18'], a:0},
{q:'4乘5的积再减8,差是多少?', options:['12','28','13','20'], a:0},
{q:'计算 10+2×7 = ?', options:['24','84','19','27'], a:0},
{q:'计算 30-5×4 = ?', options:['10','100','25','15'], a:0},
{q:'下面算式中,先算乘法的是?', options:['5×2+3','5+2-3','(5+2)×3','5-2+3'], a:0},
{q:'计算 2×9+8 = ?', options:['26','34','25','27'], a:0},
{q:'计算 7×4-20 = ?', options:['8','48','28','18'], a:0},
{q:'小明买了3支笔,每支2元,又买了一个5元的本子,一共花了?', options:['11元','10元','8元','6元'], a:0},
{q:'计算 6×2+6 = ?', options:['18','18','12','24'], a:0},
{q:'计算 18-3×3 = ?', options:['9','45','12','6'], a:0},
{q:'计算 4×6+5 = ?', options:['29','44','24','34'], a:0},
{q:'计算 5+5×1 = ?', options:['10','10','5','25'], a:0},
{q:'计算 10×0+5 = ?', options:['5','50','15','0'], a:0}
],
// 3:火星-长度单位进阶 选择题
3: [
{q:'2厘米 = 多少毫米?', options:['20毫米','2毫米','200毫米','12毫米'], a:0},
{q:'5分米 = 多少厘米?', options:['50厘米','5厘米','500厘米','15厘米'], a:0},
{q:'3米 = 多少分米?', options:['30分米','3分米','300分米','13分米'], a:0},
{q:'4千米 = 多少米?', options:['4000米','400米','40米','40000米'], a:0},
{q:'30毫米 = 多少厘米?', options:['3厘米','30厘米','0.3厘米','300厘米'], a:0},
{q:'60厘米 = 多少分米?', options:['6分米','60分米','0.6分米','600分米'], a:0},
{q:'70分米 = 多少米?', options:['7米','70米','0.7米','700米'], a:0},
{q:'5000米 = 多少千米?', options:['5千米','50千米','500千米','0.5千米'], a:0},
{q:'1米 - 3分米 = 多少分米?', options:['7分米','2分米','13分米','4分米'], a:0},
{q:'1厘米 - 4毫米 = 多少毫米?', options:['6毫米','4毫米','14毫米','5毫米'], a:0},
{q:'2分米 + 8分米 = 多少米?', options:['1米','10米','10分米','6分米'], a:0},
{q:'3千米 + 2千米 = 多少米?', options:['5000米','500米','5米','3200米'], a:0},
{q:'1米 - 50厘米 = 多少厘米?', options:['50厘米','50米','150厘米','5厘米'], a:0},
{q:'一根绳子长1米,用去4分米,还剩多少?', options:['6分米','6米','4分米','5分米'], a:0},
{q:'一支铅笔原来长18厘米,用去了10毫米,还剩多少?', options:['17厘米','17毫米','8厘米','28厘米'], a:0},
{q:'80毫米 + 20毫米 = 多少厘米?', options:['10厘米','100厘米','10毫米','1厘米'], a:0},
{q:'2米 = 多少厘米?', options:['200厘米','20厘米','2厘米','2000厘米'], a:0},
{q:'3千米 - 1000米 = 多少千米?', options:['2千米','2000千米','2米','4千米'], a:0},
{q:'课桌高70厘米,也就是多少分米?', options:['7分米','70分米','7米','0.7分米'], a:0},
{q:'数学书长2分米,也就是多少厘米?', options:['20厘米','2厘米','200厘米','2米'], a:0},
{q:'1千米和1千克比较,结果是?', options:['无法比较','1千米长','1千克重','一样大'], a:0},
{q:'下面长度最长的是?', options:['2千米','200米','20分米','2000毫米'], a:0},
{q:'把16分米长的绳子对折3次,每段长多少?', options:['2分米','8分米','4分米','16分米'], a:0},
{q:'一块橡皮长3厘米6毫米,也就是多少毫米?', options:['36毫米','36厘米','306毫米','9毫米'], a:0},
{q:'我们走1千米大约需要多长时间?', options:['15分钟','1分钟','1小时','1秒'], a:0}
],
// 4:木星-混合运算进阶 选择题
4: [
{q:'算式里有括号的,要先算什么?', options:['括号里面的','乘法','加法','从左到右'], a:0},
{q:'计算 (12+8)÷4 = ?', options:['5','14','20','4'], a:0},
{q:'计算 24÷(8-4) = ?', options:['6','2','-1','8'], a:0},
{q:'计算 36÷6+3 = ?', options:['9','4','39','3'], a:0},
{q:'计算 18-12÷3 = ?', options:['14','2','6','15'], a:0},
{q:'计算 5×(6-2) = ?', options:['20','28','30','40'], a:0},
{q:'计算 48÷(3+5) = ?', options:['6','21','18','8'], a:0},
{q:'计算 10+20÷5 = ?', options:['14','6','30','25'], a:0},
{q:'计算 (50-30)÷4 = ?', options:['5','45','20','8'], a:0},
{q:'计算 7×(4+5) = ?', options:['63','33','28','72'], a:0},
{q:'计算 30-6×4 = ?', options:['6','96','24','12'], a:0},
{q:'计算 24+16÷8 = ?', options:['26','5','40','30'], a:0},
{q:'计算 (21-18)×9 = ?', options:['27','3','189','12'], a:0},
{q:'计算 45÷9+8 = ?', options:['13','5','53','12'], a:0},
{q:'计算 6×7-20 = ?', options:['22','62','42','32'], a:0},
{q:'有30个苹果,吃了6个,剩下的平均分给8个小朋友,每人分几个?正确列式是?', options:['(30-6)÷8','30-6÷8','30÷8-6','30÷6-8'], a:0},
{q:'计算 (18+18)÷6 = ?', options:['6','21','3','36'], a:0},
{q:'计算 56-7×8 = ?', options:['0','49','392','42'], a:0},
{q:'计算 4×(10-6) = ?', options:['16','34','40','24'], a:0},
{q:'计算 28÷4+30 = ?', options:['37','34','58','28'], a:0},
{q:'计算 (9+9)÷2 = ?', options:['9','18','4','13'], a:0},
{q:'小明有4套卡片,每套8张,送给同学15张,还剩多少张?列式是?', options:['4×8-15','4+8-15','4×8+15','15-4×8'], a:0},
{q:'计算 72÷(24-16) = ?', options:['9','7','8','6'], a:0},
{q:'计算 5+25÷5 = ?', options:['10','6','30','20'], a:0},
{q:'比较大小:18÷6+3 ○ 18÷(6+3),○里填?', options:['>','<','=','无法比较'], a:0}
],
// 5:土星-曹冲称象·等量代换 选择题
5: [
{q:'"曹冲称象"的故事里,曹冲用什么代替大象来称重量?', options:['石头','木头','水','牛'], a:0},
{q:'曹冲称象利用了什么数学思想?', options:['等量代换','加法计算','乘法计算','观察物体'], a:0},
{q:'曹冲称象时,为什么要在船舷上做记号?', options:['标记水面位置,保证重量相等','标记船的位置','好看','记录大象身高'], a:0},
{q:'曹冲称象的正确步骤顺序是:①赶象上船 ②称石头重量 ③赶象下船装石头 ④船舷做记号', options:['①④③②','①②③④','④①③②','①③④②'], a:0},
{q:'如果1个△ = 2个□,那么2个△ = 几个□?', options:['4个','2个','3个','1个'], a:0},
{q:'△+△+△=12,△=?', options:['4','3','6','9'], a:0},
{q:'□+□+□+□=20,□=?', options:['5','4','16','24'], a:0},
{q:'如果1个西瓜的重量 = 3个菠萝的重量,1个菠萝重2千克,1个西瓜重多少?', options:['6千克','5千克','3千克','2千克'], a:0},
{q:'1只兔子的重量 = 2只松鼠的重量,1只松鼠的重量 = 3只小鸟的重量,1只兔子等于几只小鸟?', options:['6只','5只','3只','2只'], a:0},
{q:'△+□=10,△=□+□+□,那么△=?', options:['7.5','8','6','9'], a:0},
{q:'○+○=8,△+○=12,△=?', options:['8','4','16','6'], a:0},
{q:'2个苹果可以换4个桃子,1个苹果可以换几个桃子?', options:['2个','4个','1个','8个'], a:0},
{q:'1头猪可以换2只羊,1只羊可以换4只兔,1头猪可以换几只兔?', options:['8只','6只','4只','2只'], a:0},
{q:'曹冲称象中,当大象上船后,船下沉到记号处,说明什么?', options:['大象的重量等于船排开水的重量','船坏了','大象太重了','水太少了'], a:0},
{q:'下面哪个不是曹冲称象需要的工具?', options:['秤','大石头','船','尺子'], a:3},
{q:'如果☆+☆=10,☆-△=2,那么△=?', options:['3','5','7','2'], a:0},
{q:'△+△+□=14,△+△+□+□=18,那么□=?', options:['4','5','6','3'], a:0},
{q:'3个同样的杯子装水,水面高度分别是10厘米、8厘米、6厘米,平均高度是?', options:['8厘米','10厘米','6厘米','24厘米'], a:0},
{q:'买1支钢笔的钱可以买3支圆珠笔,买1支圆珠笔的钱可以买2支铅笔,买1支钢笔的钱可以买几支铅笔?', options:['6支','5支','3支','2支'], a:0},
{q:'曹冲称象的办法好在哪里?', options:['把大象的重量转化成石头的重量,不用造大秤','更省时间','称得更准确','用的工具少'], a:0},
{q:'如果大球重量是20克,等于2个中球,1个中球等于2个小球,1个小球重多少?', options:['5克','10克','20克','40克'], a:0},
{q:'1只小狗和2只小兔一样重,1只小兔和3只小鸡一样重,1只小狗和几只小鸡一样重?', options:['6只','5只','3只','2只'], a:0},
{q:'△+△+△=15,○+△=12,○=?', options:['7','5','27','8'], a:0},
{q:'曹冲是哪个历史人物的儿子?', options:['曹操','刘备','孙权','诸葛亮'], a:0},
{q:'为什么不直接把大象放在秤上称?', options:['当时没有那么大的秤','大象太重会把秤压坏','大象不听话','曹冲想炫耀自己'], a:0}
],
// 6:天王星-填空计算挑战 混合知识点 填空题
6: [
{q:'1厘米 = ____毫米', a:'10', type:'fill'},
{q:'1分米 = ____厘米', a:'10', type:'fill'},
{q:'1米 = ____分米', a:'10', type:'fill'},
{q:'1千米 = ____米', a:'1000', type:'fill'},
{q:'5厘米 = ____毫米', a:'50', type:'fill'},
{q:'3分米 = ____厘米', a:'30', type:'fill'},
{q:'4米 = ____分米', a:'40', type:'fill'},
{q:'2千米 = ____米', a:'2000', type:'fill'},
{q:'80毫米 = ____厘米', a:'8', type:'fill'},
{q:'60厘米 = ____分米', a:'6', type:'fill'},
{q:'90分米 = ____米', a:'9', type:'fill'},
{q:'7000米 = ____千米', a:'7', type:'fill'},
{q:'3×4+8 = ____', a:'20', type:'fill'},
{q:'20-3×5 = ____', a:'5', type:'fill'},
{q:'(15+5)÷4 = ____', a:'5', type:'fill'},
{q:'24÷(4+2) = ____', a:'4', type:'fill'},
{q:'△+△+△=18,△=____', a:'6', type:'fill'},
{q:'□+□=14,□=____', a:'7', type:'fill'},
{q:'1米-6分米 = ____分米', a:'4', type:'fill'},
{q:'1厘米-3毫米 = ____毫米', a:'7', type:'fill'},
{q:'观察球,从任何方向看都是____形', a:'圆', type:'fill'},
{q:'观察正方体,一次最多看到____个面', a:'3', type:'fill'},
{q:'混合运算有括号先算____里面的', a:'括号', type:'fill'},
{q:'没有括号时,先算____除,后算加减', a:'乘', type:'fill'},
{q:'曹冲称象用的数学思想是____代换', a:'等量', type:'fill'},
{q:'5×(9-4) = ____', a:'25', type:'fill'},
{q:'36÷6+5 = ____', a:'11', type:'fill'},
{q:'2分米+8分米 = ____米', a:'1', type:'fill'},
{q:'1千米-500米 = ____米', a:'500', type:'fill'},
{q:'1个西瓜=2个菠萝,1个菠萝=3个苹果,1个西瓜=____个苹果', a:'6', type:'fill'}
],
// 7:海王星-期中综合大挑战 填空题
7: [
{q:'数学书厚度约7____(填单位)', a:'毫米', type:'fill'},
{q:'课桌高约7____(填单位)', a:'分米', type:'fill'},
{q:'教室长约8____(填单位)', a:'米', type:'fill'},
{q:'两个城市之间的距离用____作单位', a:'千米', type:'fill'},
{q:'2米 = ____厘米', a:'200', type:'fill'},
{q:'300厘米 = ____米', a:'3', type:'fill'},
{q:'5千米 = ____米', a:'5000', type:'fill'},
{q:'4000米 = ____千米', a:'4', type:'fill'},
{q:'4×7+12 = ____', a:'40', type:'fill'},
{q:'50-6×6 = ____', a:'14', type:'fill'},
{q:'(24+16)÷8 = ____', a:'5', type:'fill'},
{q:'63÷(9-2) = ____', a:'9', type:'fill'},
{q:'45÷9+18 = ____', a:'23', type:'fill'},
{q:'8×(12-5) = ____', a:'56', type:'fill'},
{q:'从前面观察直立圆柱,看到____形', a:'长方', type:'fill'},
{q:'从任何方向看形状都一样的物体是____', a:'球', type:'fill'},
{q:'△+△+□=20,△=6,那么□=____', a:'8', type:'fill'},
{q:'○-☆=8,○=☆+☆+☆,那么☆=____', a:'4', type:'fill'},
{q:'1只猫=2只鸭,1只鸭=3只鸡,1只猫=____只鸡', a:'6', type:'fill'},
{q:'曹冲用____代替大象称重', a:'石头', type:'fill'},
{q:'1米-20厘米 = ____厘米', a:'80', type:'fill'},
{q:'3厘米-8毫米 = ____毫米', a:'22', type:'fill'},
{q:'5分米+50厘米 = ____分米', a:'10', type:'fill'},
{q:'3千米-1000米 = ____千米', a:'2', type:'fill'},
{q:'一本书厚2厘米,____本这样的书摞起来厚1分米', a:'5', type:'fill'},
{q:'小明3分钟做12道口算题,照这样计算,5分钟做____道', a:'20', type:'fill'},
{q:'有24个苹果,吃了4个,剩下的平均分给5个小朋友,每人分____个', a:'4', type:'fill'},
{q:'25+5×8 = ____', a:'65', type:'fill'},
{q:'72÷(3+6) = ____', a:'8', type:'fill'},
{q:'☆+☆+☆+☆=28,☆=____', a:'7', type:'fill'}
]
};
// 关卡配置
var levels = [
{id:0, name:'水星', emoji:'☿️', desc:'观察物体入门 · 选择题', questions:6, type:'choice'},
{id:1, name:'金星', emoji:'♀️', desc:'长度单位基础 · 选择题', questions:6, type:'choice'},
{id:2, name:'地球', emoji:'🌍', desc:'混合运算入门 · 选择题', questions:7, type:'choice'},
{id:3, name:'火星', emoji:'♂️', desc:'长度单位进阶 · 选择题', questions:7, type:'choice'},
{id:4, name:'木星', emoji:'♃', desc:'混合运算进阶 · 选择题', questions:8, type:'choice'},
{id:5, name:'土星', emoji:'🪐', desc:'曹冲称象·等量代换 · 选择题', questions:8, type:'choice'},
{id:6, name:'天王星', emoji:'♅', desc:'填空计算挑战 · 填空题', questions:8, type:'fill'},
{id:7, name:'海王星', emoji:'♆', desc:'期中综合大挑战 · 填空题', questions:8, type:'fill'}
];
// 当前游戏状态
var currentLevel = 0;
var currentQuestions = [];
var currentQuestionIndex = 0;
var correctCount = 0;
var currentScore = 0;
var currentCombo = 0;
var maxCombo = 0;
var answered = false;
var usedQuestionIds = [];
// 页面切换
function showPage(pageId) {
var pages = document.querySelectorAll('.page');
for (var i = 0; i < pages.length; i++) {
pages[i].classList.remove('active');
}
document.getElementById(pageId).classList.add('active');
document.getElementById('mainContainer').scrollTop = 0;
}
function showWelcome() {
showPage('welcomePage');
}
function showLevelSelect() {
renderPlanets();
updateTotalScoreDisplay();
showPage('levelPage');
}
function showReport() {
renderReport();
showPage('reportPage');
}
// 渲染星球列表
function renderPlanets() {
var grid = document.getElementById('planetsGrid');
grid.innerHTML = '';
for (var i = 0; i < levels.length; i++) {
var level = levels[i];
var planetData = gameData.planets[i];
var card = document.createElement('div');
card.className = 'planet-card' + (planetData.unlocked ? '' : ' locked');
var stars = '';
for (var s = 0; s < 3; s++) {
stars += s < planetData.stars ? '⭐' : '☆';
}
card.innerHTML = '<div class="planet-emoji">' + level.emoji + '</div>' +
'<div class="planet-info">' +
'<div class="planet-name">' + level.name + '</div>' +
'<div class="planet-desc">' + level.desc + '</div>' +
'<div class="planet-stars">' + stars + ' 最高分:' + planetData.bestScore + '</div>' +
'</div>';
if (planetData.unlocked) {
(function(levelId) {
card.onclick = function() {
startLevel(levelId);
};
})(i);
} else {
card.innerHTML += '<div style="font-size:24px">🔒</div>';
}
grid.appendChild(card);
}
}
function updateTotalScoreDisplay() {
document.getElementById('totalScoreDisplay').textContent = '总积分:' + gameData.totalScore + ' ⭐ 总星星:' + gameData.totalStars;
}
// 随机抽取题目,不重复
function getRandomQuestions(levelId, count) {
var bank = questionBank[levelId];
var available = [];
for (var i = 0; i < bank.length; i++) {
if (usedQuestionIds.indexOf(levelId + '-' + i) === -1) {
available.push({index:i, q:bank[i]});
}
}
// 如果可用题目不够,重置已用列表
if (available.length < count) {
usedQuestionIds = [];
available = [];
for (var j = 0; j < bank.length; j++) {
available.push({index:j, q:bank[j]});
}
}
var result = [];
for (var k = 0; k < count; k++) {
if (available.length === 0) break;
var randIndex = Math.floor(Math.random() * available.length);
var item = available.splice(randIndex, 1)[0];
result.push(item.q);
usedQuestionIds.push(levelId + '-' + item.index);
}
return result;
}
// 开始关卡
function startLevel(levelId) {
currentLevel = levelId;
currentQuestionIndex = 0;
correctCount = 0;
currentScore = 0;
currentCombo = 0;
maxCombo = 0;
answered = false;
currentQuestions = getRandomQuestions(levelId, levels[levelId].questions);
showPage('quizPage');
showQuestion();
}
// 显示题目
function showQuestion() {
answered = false;
document.getElementById('feedback').textContent = '';
document.getElementById('feedback').className = 'feedback';
document.getElementById('comboTip').textContent = '';
var q = currentQuestions[currentQuestionIndex];
var total = currentQuestions.length;
document.getElementById('progressText').textContent = (currentQuestionIndex + 1) + ' / ' + total;
document.getElementById('currentScoreText').textContent = '积分:' + currentScore;
document.getElementById('progressBar').style.width = ((currentQuestionIndex) / total * 100) + '%';
document.getElementById('questionText').textContent = q.q;
var answersContainer = document.getElementById('answersContainer');
answersContainer.innerHTML = '';
if (levels[currentLevel].type === 'choice') {
// 选择题 打乱选项
var options = q.options.slice();
var correctAnswer = options[q.a];
// Fisher-Yates 打乱
for (var i = options.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = options[i];
options[i] = options[j];
options[j] = temp;
}
var newCorrectIndex = options.indexOf(correctAnswer);
var grid = document.createElement('div');
grid.className = 'answers-grid';
for (var k = 0; k < options.length; k++) {
(function(idx, answer) {
var btn = document.createElement('button');
btn.className = 'answer-btn';
btn.textContent = answer;
btn.style.color = '#ffffff';
btn.style.webkitTextFillColor = '#ffffff';
btn.onclick = function() {
if (answered) return;
checkAnswer(idx === newCorrectIndex, btn, options[newCorrectIndex]);
};
grid.appendChild(btn);
})(k, options[k]);
}
answersContainer.appendChild(grid);
} else {
// 填空题
var inputArea = document.createElement('div');
inputArea.className = 'fill-input-area';
inputArea.innerHTML = '<input type="tel" pattern="[0-9]*" class="fill-input" id="fillAnswer" placeholder="在这里输入答案" autocomplete="off">' +
'<button class="fill-submit-btn" id="fillSubmitBtn">确定</button>';
answersContainer.appendChild(inputArea);
var input = document.getElementById('fillAnswer');
var submitBtn = document.getElementById('fillSubmitBtn');
function submitAnswer() {
if (answered) return;
var userAns = input.value.trim();
if (!userAns) return;
var isCorrect = userAns === q.a || userAns === q.a + '.0';
checkAnswer(isCorrect, submitBtn, q.a, userAns);
}
submitBtn.onclick = submitAnswer;
input.onkeydown = function(e) {
if (e.key === 'Enter') {
submitAnswer();
}
};
// 自动聚焦
setTimeout(function(){ input.focus(); }, 300);
}
}
// 检查答案
function checkAnswer(isCorrect, btn, correctAnswer, userAnswer) {
answered = true;
var feedback = document.getElementById('feedback');
gameData.totalQuestions++;
// 禁用所有按钮
var buttons = document.querySelectorAll('.answer-btn, .fill-submit-btn');
for (var i = 0; i < buttons.length; i++) {
buttons[i].disabled = true;
}
if (isCorrect) {
correctCount++;
currentScore += 10;
currentCombo++;
if (currentCombo > maxCombo) maxCombo = currentCombo;
gameData.totalCorrect++;
gameData.totalScore += 10;
btn.classList.add('correct');
var praise = ['太棒了!🎉', '真厉害!⭐', '答对啦!🚀', '你真聪明!🌟', '完全正确!💯'];
feedback.textContent = praise[Math.floor(Math.random() * praise.length)];
feedback.className = 'feedback correct';
if (currentCombo >= 3) {
var comboBonus = currentCombo * 2;
currentScore += comboBonus;
gameData.totalScore += comboBonus;
document.getElementById('comboTip').textContent = '🔥 连对' + currentCombo + '题!额外奖励' + comboBonus + '分!';
}
} else {
currentCombo = 0;
btn.classList.add('wrong');
feedback.textContent = '没关系,继续加油!💪 正确答案是:' + correctAnswer;
feedback.className = 'feedback wrong';
}
saveGameData();
// 下一题或结算
setTimeout(nextQuestion, 1500);
}
function nextQuestion() {
currentQuestionIndex++;
if (currentQuestionIndex >= currentQuestions.length) {
showResult();
} else {
showQuestion();
}
}
// 显示结算
function showResult() {
var total = currentQuestions.length;
var accuracy = Math.round(correctCount / total * 100);
var stars = 0;
if (accuracy >= 90) stars = 3;
else if (accuracy >= 70) stars = 2;
else if (accuracy >= 50) stars = 1;
// 更新星球数据
var planetData = gameData.planets[currentLevel];
planetData.plays++;
if (stars > planetData.stars) {
gameData.totalStars += (stars - planetData.stars);
planetData.stars = stars;
}
if (currentScore > planetData.bestScore) {
planetData.bestScore = currentScore;
}
// 解锁下一关
var unlocked = false;
if (stars >= 1 && currentLevel < 7) {
if (!gameData.planets[currentLevel + 1].unlocked) {
gameData.planets[currentLevel + 1].unlocked = true;
unlocked = true;
}
}
saveGameData();
// 结算页面内容
var emoji, title, message;
if (stars === 3) {
emoji = '🏆';
title = '完美通关!';
message = '你太厉害了!全部题目都答对了,真是数学小天才!';
launchConfetti();
} else if (stars === 2) {
emoji = '🎉';
title = '挑战成功!';
message = '做得不错哦,再努力一下就能拿满三星啦!';
launchConfetti();
} else if (stars === 1) {
emoji = '👍';
title = '顺利过关!';
message = '恭喜解锁下一颗星球,多练习会更棒的!';
} else {
emoji = '💪';
title = '再接再厉!';
message = '没关系,多复习一下知识点,再试一次肯定能行!';
}
document.getElementById('resultEmoji').textContent = emoji;
document.getElementById('resultTitle').textContent = title;
document.getElementById('resultMessage').textContent = message;
var starsHtml = '';
for (var s = 0; s < 3; s++) {
if (s < stars) {
starsHtml += '<span class="star-pop" style="animation-delay:' + (s * 0.2) + 's">⭐</span>';
} else {
starsHtml += '<span>☆</span>';
}
}
document.getElementById('resultStars').innerHTML = starsHtml;
document.getElementById('resultCorrect').textContent = correctCount + '/' + total;
document.getElementById('resultScore').textContent = currentScore;
document.getElementById('resultAccuracy').textContent = accuracy + '%';
document.getElementById('resultCombo').textContent = maxCombo;
document.getElementById('unlockNotice').style.display = unlocked ? 'block' : 'none';
showPage('resultPage');
}
// 撒花效果
function launchConfetti() {
var colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#ffd93d', '#96c93d', '#f45c43', '#667eea'];
for (var i = 0; i < 60; i++) {
var confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = Math.random() * 100 + '%';
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
confetti.style.animationDelay = Math.random() * 0.5 + 's';
confetti.style.animationDuration = (Math.random() * 2 + 2) + 's';
if (Math.random() > 0.5) {
confetti.style.borderRadius = '50%';
}
document.body.appendChild(confetti);
setTimeout(function(el) {
el.remove();
}, 3500, confetti);
}
}
function restartLevel() {
startLevel(currentLevel);
}
function quitQuiz() {
if (confirm('确定要退出当前挑战吗?进度不会保存哦~')) {
showLevelSelect();
}
}
// 渲染成绩单
function renderReport() {
document.getElementById('reportTotalStars').textContent = gameData.totalStars + ' ⭐';
document.getElementById('reportTotalScore').textContent = gameData.totalScore;
document.getElementById('reportTotalQuestions').textContent = gameData.totalQuestions;
document.getElementById('reportTotalCorrect').textContent = gameData.totalCorrect;
var acc = gameData.totalQuestions > 0 ? Math.round(gameData.totalCorrect / gameData.totalQuestions * 100) : 0;
document.getElementById('reportAccuracy').textContent = acc + '%';
var list = document.getElementById('planetReportList');
list.innerHTML = '';
for (var i = 0; i < gameData.planets.length; i++) {
var p = gameData.planets[i];
var stars = '';
for (var s = 0; s < 3; s++) {
stars += s < p.stars ? '⭐' : '☆';
}
var item = document.createElement('div');
item.className = 'planet-report-item';
item.innerHTML = '<div class="planet-report-name">' + p.emoji + ' ' + p.name + '</div>' +
'<div class="planet-report-stars">' + stars + '</div>' +
'<div class="planet-report-score">' + p.bestScore + '分</div>';
list.appendChild(item);
}
}
function resetProgress() {
if (confirm('确定要重置所有学习进度吗?此操作不可恢复!')) {
gameData = {
totalScore: 0,
totalStars: 0,
totalQuestions: 0,
totalCorrect: 0,
planets: [
{id:0, name:'水星', emoji:'☿️', unlocked:true, stars:0, bestScore:0, plays:0},
{id:1, name:'金星', emoji:'♀️', unlocked:false, stars:0, bestScore:0, plays:0},
{id:2, name:'地球', emoji:'🌍', unlocked:false, stars:0, bestScore:0, plays:0},
{id:3, name:'火星', emoji:'♂️', unlocked:false, stars:0, bestScore:0, plays:0},
{id:4, name:'木星', emoji:'♃', unlocked:false, stars:0, bestScore:0, plays:0},
{id:5, name:'土星', emoji:'🪐', unlocked:false, stars:0, bestScore:0, plays:0},
{id:6, name:'天王星', emoji:'♅', unlocked:false, stars:0, bestScore:0, plays:0},
{id:7, name:'海王星', emoji:'♆', unlocked:false, stars:0, bestScore:0, plays:0}
]
};
saveGameData();
renderReport();
alert('进度已重置!');
}
}
</script>
</body>
</html>Game Source: 太空数学闯关
Creator: PixelFlame70
Libraries: none
Complexity: complex (1450 lines, 68.8 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-pixelflame70" to link back to the original. Then publish at arcadelab.ai/publish.