Jogo

 <!DOCTYPE html>

<html lang="pt-br">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Aventura dos Números - Kids Premium</title>

    <!-- ====== BLOCO DE OCULTAÇÃO DO BLOGGER ====== -->

    <style>

        /* Zera todos os elementos do template */

        html, body, #outer-wrapper, #main-wrapper, #sidebar-wrapper, #footer-wrapper,

        .header, .tabs, .sidebar, .footer, .blog-posts, .date-outer, .post-body,

        .content-wrapper, .main-inner, .main-cap, .footer-inner, .header-inner,

        .navbar, .blog-header, .blog-pager, .feed-links, .comments, .sidebar,

        .column-center, .column-right, .column-left,

        .post, .post-footer, .post-header,

        .blog, .blog-posts, .date-header, .entry, .entry-content,

        .widget, .widget-content, .Blog, .blog-wrapper,

        .skip-navigation, .top-bar, .banner, .ad-container {

            all: initial !important;

            margin: 0 !important;

            padding: 0 !important;

            border: 0 !important;

            background: none !important;

            float: none !important;

            display: block !important;

            width: 100% !important;

            max-width: 100% !important;

            min-height: 0 !important;

            overflow: visible !important;

            font: inherit !important;

            color: inherit !important;

            box-sizing: border-box !important;

        }

        /* Remove todos os elementos que possam aparecer (display:none) */

        .header, .footer, .sidebar, .navbar, .blog-pager, .feed-links,

        .comments, .date-outer, .post-footer, .post-header, .widget,

        .widget-content, .blog-header, .tabs, .main-cap, .footer-inner,

        .header-inner, .main-inner, .column, .column-center, .column-right,

        .column-left, .sidebar-wrapper, #sidebar-wrapper, #footer-wrapper,

        #main-wrapper, #header-wrapper, #navbar, .skip-navigation,

        .blog-posts-container, .post-container, .post-outer,

        #outer-wrapper, .content-wrapper, .post-body, .post, .entry,

        .blog-posts, .date-header, .Blog, .blog-wrapper {

            display: none !important;

        }

        /* Faz o body ocupar a tela toda */

        body {

            display: flex !important;

            align-items: center !important;

            justify-content: center !important;

            margin: 0 !important;

            padding: 0 !important;

            min-height: 100vh !important;

            background: #F0F9FF !important;

            font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif !important;

            touch-action: manipulation !important;

            overflow-x: hidden !important;

        }

        /* Garante que o app-container seja o único elemento visível */

        .app-container {

            display: block !important;

            position: relative !important;

            z-index: 9999 !important;

            width: 95% !important;

            max-width: 600px !important;

            margin: 0 auto !important;

            background: white !important;

            padding: 25px !important;

            border-radius: 40px !important;

            box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;

            text-align: center !important;

        }

        /* Ajuste para telas pequenas */

        @media (max-width: 600px) {

            .app-container {

                width: 100% !important;

                border-radius: 0 !important;

                padding: 20px !important;

            }

        }

    </style>

    <!-- ====== ESTILOS DO JOGO (ORIGINAL) ====== -->

    <style>

        :root { --p: #FF6B6B; --s: #4ECDC4; --a: #FFE66D; --bg: #F0F9FF; }

        .app-container { /* já definido acima, mas mantido para consistência */ }

        .hidden { display: none !important; }

        input { padding: 15px; width: 85%; margin: 8px 0; border-radius: 20px; border: 2px solid #ddd; font-size: 16px; box-sizing: border-box; }

        button { background: var(--p); color: white; border: none; padding: 20px 30px; font-size: 24px; border-radius: 30px; cursor: pointer; transition: 0.2s; width: 90%; font-weight: bold; margin-top: 15px; }

        button:active { transform: scale(0.95); }

        .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }

        .btn-opcao { height: 90px; width: 100%; font-size: 36px; background: var(--s); border-radius: 25px; border: none; color: white; cursor: pointer; }

        .btn-opcao:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

        #display-area { font-size: 40px; margin: 25px 0; min-height: 100px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px; }

        #display-area span { display: inline-block; transition: all 0.2s; }

        .contando { background: #FFE66D; border-radius: 10px; transform: scale(1.2); box-shadow: 0 0 15px rgba(255, 230, 109, 0.6); }

        #progresso-bar { width: 100%; height: 20px; background: #eee; border-radius: 10px; margin: 15px 0; overflow: hidden; }

        #progresso-fill { height: 100%; background: var(--s); width: 0%; transition: 0.5s; }

        .confete { position:fixed; width:12px; height:12px; pointer-events:none; z-index:9999; border-radius:3px; }

        @keyframes shake {

            0%, 100% { transform: translateX(0); }

            25% { transform: translateX(-10px); }

            50% { transform: translateX(10px); }

            75% { transform: translateX(-6px); }

        }

        .shake { animation: shake 0.35s; }

        @keyframes fadeInScale {

            0% { opacity: 0; transform: scale(0.5); }

            100% { opacity: 1; transform: scale(1); }

        }

        .btn-opcao { animation: fadeInScale 0.25s ease-out; }

    </style>

</head>

<body>

<div class="app-container" id="app">

    <div id="tela-inicial">

        <h1>🌟 Aventura dos Números</h1>

        <input type="number" id="cfg-max" value="10" placeholder="Números até">

        <input type="number" id="cfg-fases" value="5" placeholder="Quantidade de fases">

        <input type="text" id="cfg-premio" value="Bombom" placeholder="Nome do Prêmio">

        <button onclick="iniciarJogo()">COMEÇAR</button>

    </div>

    <div id="tela-jogo" class="hidden">

        <div id="progresso-txt">Fase 1 de X</div>

        <div id="progresso-bar"><div id="progresso-fill"></div></div>

        <h2 id="pergunta-titulo">Quantos objetos aparecem?</h2>

        <div id="display-area"></div>

        <div id="alternativas" class="grid"></div>

    </div>

</div>

<script>

    // ========== CONFIGURAÇÕES ==========

    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

    let gameData = { max: 10, fases: 5, atual: 0, correta: 0, premio: '' };

    let rodando = true;

    const objs = ['🍎', '🍌', '🍓', '🍊', '🍇', '🍍', '⭐', '🌸', '🌻', '🌈', '☀️', '🐶', '🐱', '🐰', '🐻', '🦁', '🐠', '🚗', '✈️', '⚽', '🧸', '🍦', '🍕'];

    

    const NUMEROS_EXTENSO = [

        'um', 'dois', 'três', 'quatro', 'cinco', 'seis', 'sete', 'oito', 'nove', 'dez',

        'onze', 'doze', 'treze', 'quatorze', 'quinze', 'dezesseis', 'dezessete', 'dezoito', 'dezenove', 'vinte'

    ];

    // ========== AUXILIARES ==========

    function playSound(type) {

        try {

            if (audioCtx.state === "suspended") audioCtx.resume();

            const osc = audioCtx.createOscillator();

            const g = audioCtx.createGain();

            osc.connect(g); g.connect(audioCtx.destination);

            osc.frequency.value = type === 'acerto' ? 600 : 200;

            g.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + 0.5);

            osc.start(); osc.stop(audioCtx.currentTime + 0.5);

        } catch(e) {}

    }

    function narrar(texto) {

        window.speechSynthesis.cancel();

        const u = new SpeechSynthesisUtterance(texto);

        u.lang = 'pt-BR';

        u.rate = 0.7;

        window.speechSynthesis.speak(u);

    }

    function soltarConfetes(){

        const cores = ["#ff4d4d", "#4dd2ff", "#ffd633", "#66ff66", "#ff66cc", "#9966ff"];

        for(let i = 0; i < 100; i++){

            const c = document.createElement("div");

            c.className = "confete";

            const x = Math.random() * window.innerWidth;

            const y = Math.random() * -200;

            c.style.left = x + "px";

            c.style.top = y + "px";

            c.style.transform = `translateY(0px) rotate(${Math.random() * 360}deg)`;

            c.style.transition = "transform 1.2s linear";

            setTimeout(() => {

                c.style.transform = `translate(${Math.random()*200 - 100}px, 800px) rotate(${Math.random()*720}deg)`;

            }, 10);

            c.style.background = cores[Math.floor(Math.random() * cores.length)];

            document.body.appendChild(c);

            setTimeout(() => c.remove(), 2000);

        }

    }

    function atualizarProgresso() {

        document.getElementById("progresso-fill").style.width = (gameData.atual / gameData.fases) * 100 + "%";

        document.getElementById("progresso-txt").innerHTML = `Fase ${gameData.atual + 1} de ${gameData.fases}`;

    }

    // ========== LÓGICA DO JOGO ==========

    function iniciarJogo() {

        let max = parseInt(document.getElementById('cfg-max').value);

        let fases = parseInt(document.getElementById('cfg-fases').value);

        gameData.max = (max > 0) ? max : 10;

        gameData.fases = (fases > 0) ? fases : 5;

        gameData.premio = document.getElementById('cfg-premio').value || "Parabéns!";

        gameData.atual = 0;

        rodando = true;

        document.getElementById('tela-inicial').classList.add('hidden');

        document.getElementById('tela-jogo').classList.remove('hidden');

        gerarPergunta();

    }

    function gerarOpcoes() {

        let opts = [gameData.correta];

        while(opts.length < 4) {

            let n = Math.floor(Math.random() * gameData.max) + 1;

            if(!opts.includes(n)) opts.push(n);

        }

        opts.sort(() => Math.random() - 0.5);

        return opts;

    }

    function recriarAlternativas() {

        const altDiv = document.getElementById("alternativas");

        altDiv.innerHTML = "";

        const opts = gerarOpcoes();

        opts.forEach(n => {

            const btn = document.createElement("button");

            btn.className = "btn-opcao";

            btn.textContent = n;

            btn.onclick = () => verificarResposta(n);

            btn.style.animation = 'none';

            altDiv.appendChild(btn);

            void btn.offsetHeight;

            btn.style.animation = 'fadeInScale 0.25s ease-out';

        });

    }

    function gerarPergunta() {

        const target = Math.floor(Math.random() * gameData.max) + 1;

        const icon = objs[Math.floor(Math.random() * objs.length)];

        gameData.correta = target;

        const display = document.getElementById('display-area');

        display.innerHTML = '';

        for (let i = 0; i < target; i++) {

            const span = document.createElement('span');

            span.textContent = icon;

            span.style.fontSize = '40px';

            span.dataset.index = i;

            display.appendChild(span);

        }

        recriarAlternativas();

        atualizarProgresso();

        setTimeout(() => {

            narrar("Quantos objetos aparecem?");

        }, 300);

    }

    function aplicarShake(elemento) {

        elemento.style.animation = 'none';

        void elemento.offsetHeight;

        elemento.style.animation = 'shake 0.35s';

        setTimeout(() => { elemento.style.animation = ''; }, 400);

    }

    function iniciarContagemComFrase(callback) {

        narrar("Você errou, vamos contar juntos...");

        setTimeout(() => {

            contarObjetos(callback);

        }, 3500);

    }

    function contarObjetos(callback) {

        const spans = document.querySelectorAll('#display-area span');

        if (spans.length === 0) { callback(); return; }

        spans.forEach(s => s.classList.remove('contando'));

        let index = 0;

        function next() {

            if (index >= spans.length) {

                spans.forEach(s => s.classList.remove('contando'));

                callback();

                return;

            }

            const span = spans[index];

            span.classList.add('contando');

            const num = index + 1;

            const textoNum = (num <= 20) ? NUMEROS_EXTENSO[num - 1] : num.toString();

            narrar(textoNum);

            index++;

            setTimeout(next, 1200);

        }

        setTimeout(next, 300);

    }

    function verificarResposta(n) {

        if (!rodando) return;

        if (n == gameData.correta) {

            rodando = false;

            playSound("acerto");

            soltarConfetes();

            gameData.atual++;

            setTimeout(() => {

                if (gameData.atual >= gameData.fases) {

                    document.getElementById('tela-jogo').innerHTML = `

                        <h1>🎉 VENCEU!</h1>

                        <p>Prêmio: ${gameData.premio}</p>

                        <button onclick="location.reload()">Jogar Novamente</button>

                    `;

                } else {

                    rodando = true;

                    gerarPergunta();

                }

            }, 1000);

        } else {

            rodando = false;

            playSound("erro");

            const container = document.getElementById("alternativas");

            aplicarShake(container);

            document.querySelectorAll('.btn-opcao').forEach(b => b.disabled = true);

            setTimeout(() => {

                iniciarContagemComFrase(() => {

                    recriarAlternativas();

                    document.querySelectorAll('.btn-opcao').forEach(b => b.disabled = false);

                    rodando = true;

                });

            }, 400);

        }

    }

</script>

</body>

</html>