🎮ArcadeLab

太空数学闯关

by PixelFlame70
1450 lines68.8 KB
▶ Play
<!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.