index.html - master - shool/multi_tab

index.html
735 строк25 KB
shool
Create: index.html
06 июл 2026, 17:04
06 июл 2026, 17:048454ca5
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Таблица Умножения: Битва Знаний</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .game-container {
            width: 90%;
            max-width: 800px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            padding: 30px;
            position: relative;
        }

        .screen {
            display: none;
            animation: fadeIn 0.5s;
        }

        .screen.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        h1 {
            text-align: center;
            color: #667eea;
            font-size: 2.5em;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        h2 {
            color: #764ba2;
            margin-bottom: 15px;
            font-size: 1.8em;
        }

        .subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 30px;
            font-size: 1.1em;
        }

        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 15px 40px;
            font-size: 1.2em;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
            margin: 10px;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn-small {
            padding: 10px 25px;
            font-size: 1em;
        }

        .difficulty-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
            margin-top: 30px;
        }

        .stats-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            padding: 15px 25px;
            border-radius: 15px;
            margin-bottom: 25px;
            color: white;
            font-size: 1.1em;
            font-weight: bold;
        }

        .hearts {
            font-size: 1.5em;
        }

        .progress-container {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            height: 30px;
            margin: 20px 0;
            overflow: hidden;
            position: relative;
        }

        .progress-bar {
            background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
            height: 100%;
            width: 0%;
            transition: width 0.5s;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .question-box {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            margin: 30px 0;
            box-shadow: 0 10px 30px rgba(250, 112, 154, 0.3);
        }

        .question-text {
            font-size: 3em;
            color: white;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }

        .answers-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin: 20px 0;
        }

        .answer-btn {
            background: white;
            border: 3px solid #667eea;
            color: #667eea;
            padding: 25px;
            font-size: 1.8em;
            border-radius: 15px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: bold;
        }

        .answer-btn:hover {
            background: #667eea;
            color: white;
            transform: scale(1.05);
        }

        .answer-btn.correct {
            background: #4caf50;
            border-color: #4caf50;
            color: white;
            animation: pulse 0.5s;
        }

        .answer-btn.wrong {
            background: #f44336;
            border-color: #f44336;
            color: white;
            animation: shake 0.5s;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-10px); }
            75% { transform: translateX(10px); }
        }

        .combo-notification {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 30px 60px;
            border-radius: 20px;
            font-size: 2.5em;
            font-weight: bold;
            box-shadow: 0 10px 40px rgba(240, 147, 251, 0.5);
            z-index: 1000;
            display: none;
            animation: comboPopup 1.5s;
        }

        @keyframes comboPopup {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
            50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
        }

        .boss-indicator {
            background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%);
            color: white;
            padding: 10px 20px;
            border-radius: 10px;
            text-align: center;
            font-weight: bold;
            margin-bottom: 15px;
            animation: bossGlow 2s infinite;
        }

        @keyframes bossGlow {
            0%, 100% { box-shadow: 0 0 20px rgba(255, 8, 68, 0.5); }
            50% { box-shadow: 0 0 40px rgba(255, 8, 68, 0.8); }
        }

        .hint-btn {
            background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
            color: #333;
            border: none;
            padding: 10px 20px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 1em;
            margin-top: 15px;
        }

        .hint-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .hint-display {
            background: #fff3cd;
            border: 2px solid #ffc107;
            padding: 15px;
            border-radius: 10px;
            margin-top: 15px;
            display: none;
        }

        .level-complete {
            text-align: center;
            padding: 40px;
        }

        .reward-icon {
            font-size: 4em;
            margin: 20px 0;
            animation: bounce 1s infinite;
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        .game-over {
            text-align: center;
            padding: 40px;
        }

        .final-score {
            font-size: 3em;
            color: #667eea;
            margin: 20px 0;
        }

        .level-info {
            background: rgba(102, 126, 234, 0.1);
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: center;
        }

        .level-info h3 {
            color: #667eea;
            margin-bottom: 10px;
        }

        .scroll-table {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
            max-height: 300px;
            overflow-y: auto;
        }

        .scroll-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .scroll-table th, .scroll-table td {
            padding: 10px;
            text-align: center;
            border: 1px solid #ddd;
        }

        .scroll-table th {
            background: #667eea;
            color: white;
        }

        @media (max-width: 600px) {
            .game-container {
                width: 95%;
                padding: 20px;
            }

            h1 {
                font-size: 1.8em;
            }

            .question-text {
                font-size: 2em;
            }

            .answer-btn {
                font-size: 1.3em;
                padding: 20px;
            }

            .stats-bar {
                font-size: 0.9em;
            }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <!-- Стартовый экран -->
        <div id="startScreen" class="screen active">
            <h1>🎮 Таблица Умножения</h1>
            <h2 style="text-align: center;">Битва Знаний</h2>
            <p class="subtitle">Ты — юный маг в Школе Забытых Чисел. Злой вирус «Двойка» стер все знания из магических книг. Собери 10 магических кристаллов, чтобы открыть портал в следующий класс!</p>
            
            <div class="level-info">
                <h3>📜 Твоя миссия:</h3>
                <p>Пройди 9 Залов Древа Знаний (от 2 до 9). В каждой зале сражайся с Монстром-Числом, решая примеры. Победи боссов и стань Мастером Умножения!</p>
            </div>

            <h3 style="text-align: center; margin-top: 30px;">Выбери сложность:</h3>
            <div class="difficulty-buttons">
                <button class="btn" onclick="startGame('easy')">🌟 Легко</button>
                <button class="btn" onclick="startGame('normal')">⚔️ Норма</button>
                <button class="btn" onclick="startGame('hard')">🔥 Сложно</button>
            </div>
        </div>

        <!-- Игровой экран -->
        <div id="gameScreen" class="screen">
            <div class="stats-bar">
                <div class="hearts" id="hearts">❤️❤️❤️</div>
                <div>Уровень: <span id="currentLevel">1</span>/9</div>
                <div>Очки: <span id="score">0</span></div>
            </div>

            <div class="progress-container">
                <div class="progress-bar" id="progressBar">0%</div>
            </div>

            <div id="bossIndicator" class="boss-indicator" style="display: none;">
                ⚔️ БОСС! Дай 5 правильных ответов подряд!
            </div>

            <div class="question-box">
                <div class="question-text" id="question">7 × 8 = ?</div>
            </div>

            <div class="answers-grid" id="answersGrid">
                <!-- Ответы будут добавлены через JavaScript -->
            </div>

            <button class="hint-btn" id="hintBtn" onclick="showHint()">
                📜 Свиток подсказки (-10 очков)
            </button>

            <div class="hint-display" id="hintDisplay"></div>
        </div>

        <!-- Экран завершения уровня -->
        <div id="levelCompleteScreen" class="screen">
            <div class="level-complete">
                <h2>🎉 Уровень пройден!</h2>
                <div class="reward-icon" id="rewardIcon">⚔️</div>
                <h3 id="rewardText">Ты получил: Меч новичка</h3>
                <p style="margin: 20px 0;">Очки: <span id="levelScore">0</span></p>
                <button class="btn" onclick="nextLevel()">Следующий уровень →</button>
            </div>
        </div>

        <!-- Экран окончания игры -->
        <div id="gameOverScreen" class="screen">
            <div class="game-over">
                <h2 id="gameOverTitle">💀 Игра окончена!</h2>
                <p id="gameOverText">Вирус «Двойка» победил...</p>
                <div class="final-score">Финальный счет: <span id="finalScore">0</span></div>
                <p>Пройдено уровней: <span id="levelsCompleted">0</span>/9</p>
                <button class="btn" onclick="restartGame()">🔄 Играть снова</button>
            </div>
        </div>

        <!-- Экран победы -->
        <div id="victoryScreen" class="screen">
            <div class="level-complete">
                <h1>🏆 ПОБЕДА!</h1>
                <div class="reward-icon">🌟</div>
                <h2>Ты стал Мастером Умножения!</h2>
                <p style="margin: 20px 0; font-size: 1.2em;">Портал в 6 класс открыт!</p>
                <div class="final-score">Финальный счет: <span id="victoryScore">0</span></div>
                <button class="btn" onclick="restartGame()">🎮 Играть снова</button>
            </div>
        </div>
    </div>

    <div class="combo-notification" id="comboNotification">ОТЛИЧНО! x2</div>

    <script>
        // Игровые переменные
        let gameState = {
            difficulty: 'normal',
            currentLevel: 1,
            score: 0,
            lives: 3,
            combo: 0,
            progress: 0,
            bossMode: false,
            bossCorrectStreak: 0,
            hintUsed: false,
            timeLimit: 15000
        };

        const rewards = [
            { icon: '⚔️', name: 'Меч новичка' },
            { icon: '🛡️', name: 'Щит' },
            { icon: '🧪', name: 'Зелье скорости' },
            { icon: '🧥', name: 'Плащ' },
            { icon: '🔥', name: 'Кристалл огня' },
            { icon: '🪽', name: 'Крылья' },
            { icon: '📿', name: 'Амулет мудрости' },
            { icon: '👑', name: 'Корона' },
            { icon: '🌀', name: 'Портал в 6 класс' }
        ];

        const hardExamples = [
            [6, 7], [6, 8], [7, 8], [7, 9], [8, 9], [6, 6],
            [6, 9], [7, 7], [8, 8], [9, 9]
        ];

        // Функции игры
        function startGame(difficulty) {
            gameState.difficulty = difficulty;
            gameState.currentLevel = 1;
            gameState.score = 0;
            gameState.lives = 3;
            gameState.combo = 0;
            
            if (difficulty === 'easy') {
                gameState.timeLimit = 20000;
            } else if (difficulty === 'normal') {
                gameState.timeLimit = 15000;
            } else {
                gameState.timeLimit = 10000;
            }

            showScreen('gameScreen');
            startLevel();
        }

        function startLevel() {
            gameState.progress = 0;
            gameState.bossMode = false;
            gameState.bossCorrectStreak = 0;
            gameState.hintUsed = false;
            
            updateUI();
            generateQuestion();
        }

        function generateQuestion() {
            const levelNumber = gameState.currentLevel + 1; // Уровень 1 = таблица 2, уровень 2 = таблица 3, и т.д.
            let a, b;

            if (gameState.currentLevel === 9) {
                // Финальный уровень - случайные сложные примеры
                const randomExample = hardExamples[Math.floor(Math.random() * hardExamples.length)];
                a = randomExample[0];
                b = randomExample[1];
            } else if (gameState.bossMode || Math.random() > 0.5) {
                // Сложные примеры
                const levelHardExamples = hardExamples.filter(ex => 
                    ex[0] === levelNumber || ex[1] === levelNumber
                );
                if (levelHardExamples.length > 0) {
                    const randomExample = levelHardExamples[Math.floor(Math.random() * levelHardExamples.length)];
                    a = randomExample[0];
                    b = randomExample[1];
                } else {
                    a = levelNumber;
                    b = Math.floor(Math.random() * 9) + 1;
                }
            } else {
                // Обычные примеры для текущего уровня
                a = levelNumber;
                b = Math.floor(Math.random() * 9) + 1;
            }

            const correctAnswer = a * b;
            
            // Генерация вариантов ответов
            const options = generateOptions(correctAnswer);
            
            displayQuestion(a, b, correctAnswer, options);
        }

        function generateOptions(correct) {
            const options = [correct];
            
            while (options.length < 4) {
                let wrong;
                const variation = Math.floor(Math.random() * 10) - 5;
                wrong = correct + variation;
                
                if (wrong !== correct && wrong > 0 && !options.includes(wrong)) {
                    options.push(wrong);
                }
            }
            
            // Перемешивание
            for (let i = options.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [options[i], options[j]] = [options[j], options[i]];
            }
            
            return options;
        }

        function displayQuestion(a, b, correct, options) {
            document.getElementById('question').textContent = `${a} × ${b} = ?`;
            
            const grid = document.getElementById('answersGrid');
            grid.innerHTML = '';
            
            options.forEach(option => {
                const btn = document.createElement('button');
                btn.className = 'answer-btn';
                btn.textContent = option;
                btn.onclick = () => checkAnswer(option, correct, btn);
                grid.appendChild(btn);
            });

            // Активировать кнопку подсказки
            document.getElementById('hintBtn').disabled = gameState.hintUsed;
            document.getElementById('hintDisplay').style.display = 'none';
        }

        function checkAnswer(selected, correct, btn) {
            const allButtons = document.querySelectorAll('.answer-btn');
            allButtons.forEach(b => b.onclick = null); // Отключить все кнопки

            if (selected === correct) {
                // Правильный ответ
                btn.classList.add('correct');
                gameState.combo++;
                
                let points = 10;
                if (gameState.combo >= 3) {
                    points *= 2;
                    showCombo();
                }
                
                gameState.score += points;
                
                if (gameState.bossMode) {
                    gameState.bossCorrectStreak++;
                    if (gameState.bossCorrectStreak >= 5) {
                        setTimeout(() => completeLevel(), 1000);
                        return;
                    }
                } else {
                    gameState.progress += 20;
                    if (gameState.progress >= 100) {
                        gameState.bossMode = true;
                        document.getElementById('bossIndicator').style.display = 'block';
                    }
                }
                
                setTimeout(() => {
                    updateUI();
                    generateQuestion();
                }, 1000);
            } else {
                // Неправильный ответ
                btn.classList.add('wrong');
                gameState.combo = 0;
                gameState.lives--;
                
                if (gameState.bossMode) {
                    gameState.bossCorrectStreak = 0;
                }
                
                setTimeout(() => {
                    updateUI();
                    if (gameState.lives <= 0) {
                        gameOver();
                    } else {
                        generateQuestion();
                    }
                }, 1000);
            }
        }

        function showCombo() {
            const notification = document.getElementById('comboNotification');
            notification.style.display = 'block';
            setTimeout(() => {
                notification.style.display = 'none';
            }, 1500);
        }

        function showHint() {
            if (gameState.hintUsed) return;
            
            gameState.hintUsed = true;
            gameState.score = Math.max(0, gameState.score - 10);
            
            const levelNumber = gameState.currentLevel + 1;
            const hintDisplay = document.getElementById('hintDisplay');
            
            let hint = `<strong>Таблица умножения на ${levelNumber}:</strong><br>`;
            for (let i = 1; i <= 10; i++) {
                hint += `${levelNumber} × ${i} = ${levelNumber * i}<br>`;
            }
            
            hintDisplay.innerHTML = hint;
            hintDisplay.style.display = 'block';
            
            updateUI();
        }

        function completeLevel() {
            const reward = rewards[gameState.currentLevel - 1];
            document.getElementById('rewardIcon').textContent = reward.icon;
            document.getElementById('rewardText').textContent = `Ты получил: ${reward.name}`;
            document.getElementById('levelScore').textContent = gameState.score;
            
            showScreen('levelCompleteScreen');
        }

        function nextLevel() {
            gameState.currentLevel++;
            
            if (gameState.currentLevel > 9) {
                victory();
            } else {
                showScreen('gameScreen');
                document.getElementById('bossIndicator').style.display = 'none';
                startLevel();
            }
        }

        function gameOver() {
            document.getElementById('finalScore').textContent = gameState.score;
            document.getElementById('levelsCompleted').textContent = gameState.currentLevel - 1;
            showScreen('gameOverScreen');
        }

        function victory() {
            document.getElementById('victoryScore').textContent = gameState.score;
            showScreen('victoryScreen');
        }

        function restartGame() {
            showScreen('startScreen');
        }

        function updateUI() {
            // Обновить сердца
            const hearts = '❤️'.repeat(gameState.lives) + '🖤'.repeat(3 - gameState.lives);
            document.getElementById('hearts').textContent = hearts;
            
            // Обновить уровень
            document.getElementById('currentLevel').textContent = gameState.currentLevel;
            
            // Обновить очки
            document.getElementById('score').textContent = gameState.score;
            
            // Обновить прогресс
            const progressBar = document.getElementById('progressBar');
            progressBar.style.width = gameState.progress + '%';
            progressBar.textContent = gameState.progress + '%';
        }

        function showScreen(screenId) {
            document.querySelectorAll('.screen').forEach(screen => {
                screen.classList.remove('active');
            });
            document.getElementById(screenId).classList.add('active');
        }
    </script>
</body>
</html>