{"id":4876,"date":"2026-03-01T18:40:00","date_gmt":"2026-03-01T21:40:00","guid":{"rendered":"https:\/\/siminova.com.br\/blog\/?p=4876"},"modified":"2026-03-13T09:52:00","modified_gmt":"2026-03-13T12:52:00","slug":"pontos-e-formas","status":"publish","type":"post","link":"https:\/\/siminova.com.br\/blog\/2026\/03\/pontos-e-formas\/","title":{"rendered":"Pontos e Formas"},"content":{"rendered":"\n<p class=\"has-text-align-center\">Resolva opera\u00e7\u00f5es matem\u00e1ticas para revelar coordenadas x e y,<br>ao revelar todos os pontos conecte-os e descubra qual forma voc\u00ea criou!<\/p>\n\n\n    \n    <div class=\"jogo-plano-wrapper\">\n        <div class=\"jogo-plano-container\">\n            <div class=\"jogo-content\">\n                <!-- Painel de Opera\u00e7\u00f5es -->\n                <div class=\"painel-operacoes\">\n                    <div class=\"pontos-progress\">\n                        <span class=\"pontos-revelados\">0<\/span> \/ <span class=\"pontos-total\">0<\/span> pontos\n                    <\/div>\n                    \n                    <div id=\"ponto-atual\" class=\"ponto-atual\">\n                        <!-- Ponto atual ser\u00e1 inserido aqui -->\n                    <\/div>\n                    \n                    <div class=\"acoes-jogo\">\n                        <button id=\"btn-conectar\" class=\"btn-acao btn-conectar\" disabled>\n                            \ud83d\udd17 Conectar Pontos\n                        <\/button>\n                        <button id=\"btn-reiniciar\" class=\"btn-acao btn-reiniciar\">\n                            \ud83d\udd04 Novo Desafio\n                        <\/button>\n                    <\/div>\n                <\/div>\n                \n                <!-- Plano Cartesiano -->\n                <div class=\"painel-plano\">\n                    <div class=\"canvas-container\">\n                        <canvas id=\"plano-cartesiano\"><\/canvas>\n                        <div id=\"mensagem-figura\" class=\"mensagem-figura\"><\/div>\n                        <div id=\"menu-secreto\" class=\"menu-secreto\">\n                            <div class=\"menu-titulo\">\ud83d\udd13 MODO TESTE<\/div>\n                            <div class=\"menu-lista\" id=\"lista-formas\"><\/div>\n                            <button id=\"btn-fechar-menu\" class=\"btn-fechar-menu\">\u2715 Fechar<\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <style>\n        .jogo-plano-wrapper {\n            width: 100%;\n            max-width: 1400px;\n            margin: 0 auto;\n            padding: 5px;\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        }\n\n        .jogo-plano-container {\n            background: transparent;\n            padding: 0;\n        }\n\n        .jogo-content {\n            display: grid;\n            grid-template-columns: 350px 1fr;\n            gap: 15px;\n            align-items: start;\n        }\n\n        \/* Painel de Opera\u00e7\u00f5es *\/\n        .painel-operacoes {\n            background: white;\n            border-radius: 12px;\n            padding: 15px;\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n        }\n\n        .pontos-progress {\n            background: linear-gradient(90deg, #667eea, #48bb78);\n            color: white;\n            padding: 8px 12px;\n            border-radius: 8px;\n            text-align: center;\n            font-weight: bold;\n            font-size: clamp(0.9rem, 2.5vw, 1rem);\n            margin-bottom: 15px;\n        }\n\n        \/* Ponto Atual *\/\n        .ponto-atual {\n            min-height: 240px;\n        }\n\n        .coordenada-grupo {\n            background: #f7fafc;\n            border: 3px solid #667eea;\n            border-radius: 10px;\n            padding: 15px;\n            animation: aparecer 0.4s ease;\n        }\n\n        @keyframes aparecer {\n            from {\n                opacity: 0;\n                transform: translateY(20px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        .coordenada-grupo.completa {\n            background: #c6f6d5;\n            border-color: #48bb78;\n            animation: sucesso 0.6s ease;\n        }\n\n        @keyframes sucesso {\n            0%, 100% { transform: scale(1); }\n            50% { transform: scale(1.05); }\n        }\n\n        .coordenada-titulo {\n            font-weight: bold;\n            color: #667eea;\n            margin-bottom: 12px;\n            font-size: clamp(0.95rem, 2.5vw, 1.1rem);\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .coordenada-icone {\n            display: inline-block;\n            width: 28px;\n            height: 28px;\n            background: linear-gradient(135deg, #667eea, #764ba2);\n            color: white;\n            border-radius: 50%;\n            text-align: center;\n            line-height: 28px;\n            font-size: 14px;\n            font-weight: bold;\n        }\n\n        .operacao-item {\n            background: white;\n            border: 2px solid #cbd5e0;\n            border-radius: 8px;\n            padding: 12px;\n            margin-bottom: 10px;\n            transition: all 0.3s ease;\n        }\n\n        .operacao-item:last-child {\n            margin-bottom: 0;\n        }\n\n        .operacao-item.resolvida {\n            background: #e6ffed;\n            border-color: #48bb78;\n        }\n\n        .operacao-item.erro {\n            background: #fed7d7;\n            border-color: #f56565;\n            animation: shake 0.5s;\n        }\n\n        @keyframes shake {\n            0%, 100% { transform: translateX(0); }\n            25% { transform: translateX(-10px); }\n            75% { transform: translateX(10px); }\n        }\n\n        .operacao-label {\n            font-size: clamp(0.95rem, 2.5vw, 1.1rem);\n            color: #2d3748;\n            margin-bottom: 8px;\n            font-weight: 600;\n        }\n\n        .operacao-input-group {\n            display: flex;\n            gap: 8px;\n            align-items: center;\n        }\n\n        .operacao-input {\n            flex: 1;\n            padding: 10px;\n            border: 2px solid #cbd5e0;\n            border-radius: 6px;\n            font-size: clamp(0.95rem, 2.5vw, 1.05rem);\n            transition: border-color 0.3s;\n            font-weight: 500;\n        }\n\n        .operacao-input:focus {\n            outline: none;\n            border-color: #667eea;\n            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n        }\n\n        .btn-verificar {\n            background: linear-gradient(135deg, #667eea, #764ba2);\n            color: white;\n            border: none;\n            padding: 10px 16px;\n            border-radius: 6px;\n            font-weight: bold;\n            cursor: pointer;\n            font-size: clamp(0.85rem, 2vw, 0.95rem);\n            transition: transform 0.2s;\n            white-space: nowrap;\n        }\n\n        .btn-verificar:hover {\n            transform: scale(1.05);\n        }\n\n        .btn-verificar:disabled {\n            opacity: 0.5;\n            cursor: not-allowed;\n        }\n\n        .feedback-ponto {\n            margin-top: 8px;\n            font-size: clamp(0.85rem, 2vw, 0.95rem);\n            font-weight: bold;\n            padding: 6px;\n            border-radius: 5px;\n            text-align: center;\n        }\n\n        .feedback-ponto.sucesso {\n            color: #38a169;\n            background: #e6ffed;\n        }\n\n        .feedback-ponto.erro {\n            color: #e53e3e;\n            background: #fed7d7;\n        }\n\n        \/* A\u00e7\u00f5es do Jogo *\/\n        .acoes-jogo {\n            display: flex;\n            flex-direction: column;\n            gap: 8px;\n            margin-top: 15px;\n        }\n\n        .btn-acao {\n            padding: 12px;\n            border: none;\n            border-radius: 8px;\n            font-weight: bold;\n            font-size: clamp(0.85rem, 2.5vw, 1rem);\n            cursor: pointer;\n            transition: all 0.3s;\n        }\n\n        .btn-conectar {\n            background: linear-gradient(135deg, #48bb78, #38a169);\n            color: white;\n        }\n\n        .btn-reiniciar {\n            background: linear-gradient(135deg, #ed8936, #dd6b20);\n            color: white;\n        }\n\n        .btn-acao:hover:not(:disabled) {\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n        }\n\n        .btn-acao:disabled {\n            opacity: 0.5;\n            cursor: not-allowed;\n        }\n\n        \/* Painel do Plano *\/\n        .painel-plano {\n            background: white;\n            border-radius: 12px;\n            padding: 15px;\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n        }\n\n        .canvas-container {\n            position: relative;\n            width: 100%;\n            max-width: 800px;\n            aspect-ratio: 1;\n            margin: 0 auto;\n        }\n\n        #plano-cartesiano {\n            width: 100%;\n            height: 100%;\n            border: 2px solid #e2e8f0;\n            border-radius: 8px;\n        }\n\n        .mensagem-figura {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background: rgba(102, 126, 234, 0.95);\n            color: white;\n            padding: 20px 30px;\n            border-radius: 12px;\n            font-size: clamp(1rem, 2.5vw, 1.3rem);\n            font-weight: bold;\n            text-align: center;\n            line-height: 1.6;\n            display: none;\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n            animation: aparecer 0.5s ease;\n            z-index: 10;\n            max-width: 90%;\n        }\n\n        .mensagem-figura.ativo {\n            display: block;\n        }\n\n        \/* MENU SECRETO *\/\n        .menu-secreto {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background: white;\n            border-radius: 12px;\n            padding: 20px;\n            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);\n            max-width: 90%;\n            max-height: 80%;\n            overflow-y: auto;\n            display: none;\n            z-index: 20;\n        }\n\n        .menu-secreto.ativo {\n            display: block;\n        }\n\n        .menu-titulo {\n            font-size: 1.2rem;\n            font-weight: bold;\n            color: #667eea;\n            text-align: center;\n            margin-bottom: 15px;\n            padding-bottom: 10px;\n            border-bottom: 2px solid #e2e8f0;\n        }\n\n        .menu-lista {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n            gap: 10px;\n            margin-bottom: 15px;\n        }\n\n        .btn-forma {\n            background: linear-gradient(135deg, #667eea, #764ba2);\n            color: white;\n            border: none;\n            padding: 12px;\n            border-radius: 8px;\n            font-weight: bold;\n            cursor: pointer;\n            transition: all 0.3s;\n            font-size: 0.9rem;\n        }\n\n        .btn-forma:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);\n        }\n\n        .btn-fechar-menu {\n            background: #e53e3e;\n            color: white;\n            border: none;\n            padding: 10px;\n            border-radius: 8px;\n            font-weight: bold;\n            cursor: pointer;\n            width: 100%;\n            font-size: 0.9rem;\n        }\n\n        .btn-fechar-menu:hover {\n            background: #c53030;\n        }\n\n        \/* Responsivo *\/\n        @media (max-width: 1100px) {\n            .jogo-content {\n                grid-template-columns: 1fr;\n            }\n\n            .canvas-container {\n                max-width: 600px;\n            }\n        }\n\n        @media (max-width: 480px) {\n            .jogo-plano-wrapper {\n                padding: 5px;\n            }\n\n            .painel-operacoes,\n            .painel-plano {\n                padding: 12px;\n            }\n\n            .operacao-input-group {\n                flex-direction: column;\n            }\n\n            .btn-verificar {\n                width: 100%;\n            }\n\n            .canvas-container {\n                max-width: 100%;\n            }\n\n            .mensagem-figura {\n                font-size: clamp(0.9rem, 2.5vw, 1.1rem);\n                padding: 15px 20px;\n            }\n\n            .menu-lista {\n                grid-template-columns: 1fr;\n            }\n        }\n    <\/style>\n\n    <script>\n        (function() {\n            const desafios = [\n                {\n                    nome: \"TRI\u00c2NGULO\",\n                    artigo: \"um\",\n                    emoji: \"\ud83d\udd3a\",\n                    pontos: [\n                        { x: 0, y: 4, operacoes: [\"x = 5 - 5\", \"y = 2 \u00d7 2\"] },\n                        { x: 4, y: 0, operacoes: [\"x = 2 + 2\", \"y = 3 - 3\"] },\n                        { x: -4, y: 0, operacoes: [\"x = 1 - 5\", \"y = 6 \u00f7 6 - 1\"] }\n                    ]\n                },\n                {\n                    nome: \"QUADRADO\",\n                    artigo: \"um\",\n                    emoji: \"\ud83d\udfe6\",\n                    pontos: [\n                        { x: -3, y: 3, operacoes: [\"x = 1 - 4\", \"y = 6 \u00f7 2\"] },\n                        { x: 3, y: 3, operacoes: [\"x = 5 - 2\", \"y = 9 \u00f7 3\"] },\n                        { x: 3, y: -3, operacoes: [\"x = 1 + 2\", \"y = 2 - 5\"] },\n                        { x: -3, y: -3, operacoes: [\"x = 0 - 3\", \"y = 1 - 4\"] }\n                    ]\n                },\n                {\n                    nome: \"RET\u00c2NGULO\",\n                    artigo: \"um\",\n                    emoji: \"\u25ad\",\n                    pontos: [\n                        { x: -4, y: 2, operacoes: [\"x = 2 - 6\", \"y = 4 \u00f7 2\"] },\n                        { x: 4, y: 2, operacoes: [\"x = 8 \u00f7 2\", \"y = 1 + 1\"] },\n                        { x: 4, y: -2, operacoes: [\"x = 3 + 1\", \"y = 6 - 8\"] },\n                        { x: -4, y: -2, operacoes: [\"x = 1 - 5\", \"y = 0 - 2\"] }\n                    ]\n                },\n                {\n                    nome: \"LOSANGO\",\n                    artigo: \"um\",\n                    emoji: \"\u25c7\",\n                    pontos: [\n                        { x: 0, y: 4, operacoes: [\"x = 10 - 10\", \"y = 2 + 2\"] },\n                        { x: 3, y: 0, operacoes: [\"x = 9 \u00f7 3\", \"y = 5 - 5\"] },\n                        { x: 0, y: -4, operacoes: [\"x = 7 - 7\", \"y = 2 - 6\"] },\n                        { x: -3, y: 0, operacoes: [\"x = 1 - 4\", \"y = 8 - 8\"] }\n                    ]\n                },\n                {\n                    nome: \"TRAP\u00c9ZIO\",\n                    artigo: \"um\",\n                    emoji: \"\u23e2\",\n                    pontos: [\n                        { x: -2, y: 3, operacoes: [\"x = 4 - 6\", \"y = 6 \u00f7 2\"] },\n                        { x: 2, y: 3, operacoes: [\"x = 1 + 1\", \"y = 9 \u00f7 3\"] },\n                        { x: 4, y: -2, operacoes: [\"x = 2 \u00d7 2\", \"y = 0 - 2\"] },\n                        { x: -4, y: -2, operacoes: [\"x = 1 - 5\", \"y = 6 - 8\"] }\n                    ]\n                },\n                {\n                    nome: \"PARALELOGRAMO\",\n                    artigo: \"um\",\n                    emoji: \"\u25b1\",\n                    pontos: [\n                        { x: -2, y: 2, operacoes: [\"x = 3 - 5\", \"y = 4 \u00f7 2\"] },\n                        { x: 2, y: 2, operacoes: [\"x = 8 \u00f7 4\", \"y = 1 + 1\"] },\n                        { x: 4, y: -2, operacoes: [\"x = 2 + 2\", \"y = 0 - 2\"] },\n                        { x: 0, y: -2, operacoes: [\"x = 6 - 6\", \"y = 1 - 3\"] }\n                    ]\n                },\n                {\n                    nome: \"PENT\u00c1GONO\",\n                    artigo: \"um\",\n                    emoji: \"\u2b1f\",\n                    pontos: [\n                        { x: 0, y: 4, operacoes: [\"x = 8 - 8\", \"y = 2 \u00d7 2\"] },\n                        { x: 4, y: 1, operacoes: [\"x = 2 + 2\", \"y = 5 - 4\"] },\n                        { x: 2, y: -3, operacoes: [\"x = 6 \u00f7 3\", \"y = 1 - 4\"] },\n                        { x: -2, y: -3, operacoes: [\"x = 3 - 5\", \"y = 0 - 3\"] },\n                        { x: -4, y: 1, operacoes: [\"x = 1 - 5\", \"y = 7 - 6\"] }\n                    ]\n                },\n                {\n                    nome: \"HEX\u00c1GONO\",\n                    artigo: \"um\",\n                    emoji: \"\u2b21\",\n                    pontos: [\n                        { x: -2, y: 3, operacoes: [\"x = 4 - 6\", \"y = 1 + 2\"] },\n                        { x: 2, y: 3, operacoes: [\"x = 6 \u00f7 3\", \"y = 9 \u00f7 3\"] },\n                        { x: 4, y: 0, operacoes: [\"x = 2 + 2\", \"y = 7 - 7\"] },\n                        { x: 2, y: -3, operacoes: [\"x = 8 \u00f7 4\", \"y = 1 - 4\"] },\n                        { x: -2, y: -3, operacoes: [\"x = 3 - 5\", \"y = 0 - 3\"] },\n                        { x: -4, y: 0, operacoes: [\"x = 1 - 5\", \"y = 5 - 5\"] }\n                    ]\n                },\n                {\n                    nome: \"ESTRELA\",\n                    artigo: \"uma\",\n                    emoji: \"\u2b50\",\n                    pontos: [\n                        { x: 0, y: 5, operacoes: [\"x = 10 - 10\", \"y = 3 + 2\"] },\n                        { x: 1, y: 2, operacoes: [\"x = 3 - 2\", \"y = 4 \u00f7 2\"] },\n                        { x: 4, y: 2, operacoes: [\"x = 2 \u00d7 2\", \"y = 8 \u00f7 4\"] },\n                        { x: 2, y: 0, operacoes: [\"x = 6 \u00f7 3\", \"y = 5 - 5\"] },\n                        { x: 3, y: -3, operacoes: [\"x = 9 \u00f7 3\", \"y = 1 - 4\"] },\n                        { x: 0, y: -1, operacoes: [\"x = 7 - 7\", \"y = 3 - 4\"] },\n                        { x: -3, y: -3, operacoes: [\"x = 2 - 5\", \"y = 0 - 3\"] },\n                        { x: -2, y: 0, operacoes: [\"x = 4 - 6\", \"y = 8 - 8\"] },\n                        { x: -4, y: 2, operacoes: [\"x = 1 - 5\", \"y = 10 \u00f7 5\"] },\n                        { x: -1, y: 2, operacoes: [\"x = 5 - 6\", \"y = 1 + 1\"] }\n                    ]\n                },\n                {\n                    nome: \"CASA\",\n                    artigo: \"uma\",\n                    emoji: \"\ud83c\udfe0\",\n                    pontos: [\n                        { x: 0, y: 4, operacoes: [\"x = 8 - 8\", \"y = 2 + 2\"] },\n                        { x: -4, y: 1, operacoes: [\"x = 2 - 6\", \"y = 5 - 4\"] },\n                        { x: -3, y: 1, operacoes: [\"x = 1 - 4\", \"y = 3 - 2\"] },\n                        { x: -3, y: -3, operacoes: [\"x = 0 - 3\", \"y = 1 - 4\"] },\n                        { x: -1, y: -3, operacoes: [\"x = 5 - 6\", \"y = 0 - 3\"] },\n                        { x: -1, y: -1, operacoes: [\"x = 7 - 8\", \"y = 6 - 7\"] },\n                        { x: 1, y: -1, operacoes: [\"x = 9 - 8\", \"y = 4 - 5\"] },\n                        { x: 1, y: -3, operacoes: [\"x = 3 - 2\", \"y = 2 - 5\"] },\n                        { x: 3, y: -3, operacoes: [\"x = 9 \u00f7 3\", \"y = 1 - 4\"] },\n                        { x: 3, y: 1, operacoes: [\"x = 1 + 2\", \"y = 7 - 6\"] },\n                        { x: 4, y: 1, operacoes: [\"x = 2 + 2\", \"y = 8 - 7\"] },\n                        { x: 0, y: 4, operacoes: [\"x = 9 - 9\", \"y = 8 \u00f7 2\"] }\n                    ]\n                },\n                {\n                    nome: \"CORA\u00c7\u00c3O\",\n                    artigo: \"um\",\n                    emoji: \"\u2764\ufe0f\",\n                    pontos: [\n                        { x: 0, y: -4, operacoes: [\"x = 5 - 5\", \"y = 1 - 5\"] },\n                        { x: 2, y: -2, operacoes: [\"x = 6 \u00f7 3\", \"y = 0 - 2\"] },\n                        { x: 4, y: 0, operacoes: [\"x = 2 + 2\", \"y = 8 - 8\"] },\n                        { x: 4, y: 2, operacoes: [\"x = 8 \u00f7 2\", \"y = 10 \u00f7 5\"] },\n                        { x: 2, y: 3, operacoes: [\"x = 8 \u00f7 4\", \"y = 1 + 2\"] },\n                        { x: 0, y: 2, operacoes: [\"x = 10 - 10\", \"y = 4 \u00f7 2\"] },\n                        { x: -2, y: 3, operacoes: [\"x = 3 - 5\", \"y = 9 \u00f7 3\"] },\n                        { x: -4, y: 2, operacoes: [\"x = 2 - 6\", \"y = 6 - 4\"] },\n                        { x: -4, y: 0, operacoes: [\"x = 1 - 5\", \"y = 7 - 7\"] },\n                        { x: -2, y: -2, operacoes: [\"x = 4 - 6\", \"y = 3 - 5\"] },\n                        { x: 0, y: -4, operacoes: [\"x = 9 - 9\", \"y = 2 - 6\"] }\n                    ]\n                },\n                {\n                    nome: \"SETA\",\n                    artigo: \"uma\",\n                    emoji: \"\u27a1\ufe0f\",\n                    pontos: [\n                        { x: -4, y: 1, operacoes: [\"x = 1 - 5\", \"y = 5 - 4\"] },\n                        { x: 1, y: 1, operacoes: [\"x = 3 - 2\", \"y = 4 - 3\"] },\n                        { x: 1, y: 3, operacoes: [\"x = 7 - 6\", \"y = 1 + 2\"] },\n                        { x: 5, y: 0, operacoes: [\"x = 3 + 2\", \"y = 8 - 8\"] },\n                        { x: 1, y: -3, operacoes: [\"x = 9 - 8\", \"y = 1 - 4\"] },\n                        { x: 1, y: -1, operacoes: [\"x = 2 - 1\", \"y = 0 - 1\"] },\n                        { x: -4, y: -1, operacoes: [\"x = 2 - 6\", \"y = 3 - 4\"] }\n                    ]\n                },\n                {\n                    nome: \"\u00d3CULOS\",\n                    artigo: \"um\",\n                    emoji: \"\ud83d\udc53\",\n                    pontos: [\n                        { x: -4, y: 2, operacoes: [\"x = 2 - 6\", \"y = 6 \u00f7 3\"] },\n                        { x: -4, y: -2, operacoes: [\"x = 1 - 5\", \"y = 0 - 2\"] },\n                        { x: -1, y: -2, operacoes: [\"x = 5 - 6\", \"y = 4 - 6\"] },\n                        { x: -1, y: 2, operacoes: [\"x = 3 - 4\", \"y = 8 \u00f7 4\"] },\n                        { x: 1, y: 2, operacoes: [\"x = 9 - 8\", \"y = 1 + 1\"] },\n                        { x: 1, y: -2, operacoes: [\"x = 2 - 1\", \"y = 3 - 5\"] },\n                        { x: 4, y: -2, operacoes: [\"x = 2 + 2\", \"y = 1 - 3\"] },\n                        { x: 4, y: 2, operacoes: [\"x = 3 + 1\", \"y = 10 \u00f7 5\"] }\n                    ]\n                }\n            ];\n\n            let desafioAtual = null;\n            let pontosRevelados = [];\n            let pontoAtualIdx = 0;\n            let canvas, ctx;\n            let escala, centroX, centroY;\n            let teclaBuffer = '';\n\n            function iniciarJogo(indiceEspecifico = null) {\n                canvas = document.getElementById('plano-cartesiano');\n                if (!canvas) {\n                    setTimeout(function() { iniciarJogo(indiceEspecifico); }, 100);\n                    return;\n                }\n                \n                ctx = canvas.getContext('2d');\n                \n                redimensionarCanvas();\n                window.removeEventListener('resize', redimensionarCanvas);\n                window.addEventListener('resize', redimensionarCanvas);\n                \n                if (indiceEspecifico !== null) {\n                    desafioAtual = desafios[indiceEspecifico];\n                } else {\n                    desafioAtual = desafios[Math.floor(Math.random() * desafios.length)];\n                }\n                \n                pontosRevelados = [];\n                pontoAtualIdx = 0;\n                \n                desenharPlano();\n                mostrarPontoAtual();\n                \n                document.getElementById('btn-conectar').disabled = true;\n                document.getElementById('mensagem-figura').classList.remove('ativo');\n                \n                atualizarProgresso();\n            }\n\n            document.addEventListener('keypress', function(e) {\n                const elementoAtivo = document.activeElement;\n                const ehInput = elementoAtivo.tagName === 'INPUT' || \n                               elementoAtivo.tagName === 'TEXTAREA' ||\n                               elementoAtivo.isContentEditable;\n                \n                if (ehInput) return;\n                \n                teclaBuffer += e.key.toLowerCase();\n                if (teclaBuffer.length > 3) {\n                    teclaBuffer = teclaBuffer.slice(-3);\n                }\n                if (teclaBuffer === 'fff') {\n                    abrirMenuSecreto();\n                    teclaBuffer = '';\n                }\n            });\n\n            function abrirMenuSecreto() {\n                const menu = document.getElementById('menu-secreto');\n                const lista = document.getElementById('lista-formas');\n                \n                lista.innerHTML = '';\n                desafios.forEach((desafio, idx) => {\n                    const btn = document.createElement('button');\n                    btn.className = 'btn-forma';\n                    btn.textContent = `${desafio.emoji} ${desafio.nome}`;\n                    btn.onclick = function() {\n                        menu.classList.remove('ativo');\n                        iniciarJogo(idx);\n                    };\n                    lista.appendChild(btn);\n                });\n                \n                menu.classList.add('ativo');\n            }\n\n            document.getElementById('btn-fechar-menu').addEventListener('click', function() {\n                document.getElementById('menu-secreto').classList.remove('ativo');\n            });\n\n            function redimensionarCanvas() {\n                if (!canvas) return;\n                \n                const container = canvas.parentElement;\n                const size = Math.min(container.clientWidth, container.clientHeight, 800);\n                canvas.width = size;\n                canvas.height = size;\n                \n                escala = size \/ 12;\n                centroX = size \/ 2;\n                centroY = size \/ 2;\n                \n                desenharPlano();\n                if (pontosRevelados.length > 0) {\n                    pontosRevelados.forEach(p => desenharPonto(p.x, p.y));\n                }\n            }\n\n            function mostrarPontoAtual() {\n                if (pontoAtualIdx >= desafioAtual.pontos.length) {\n                    return;\n                }\n\n                const ponto = desafioAtual.pontos[pontoAtualIdx];\n                const container = document.getElementById('ponto-atual');\n                \n                const grupo = document.createElement('div');\n                grupo.className = 'coordenada-grupo';\n                grupo.dataset.pontoIdx = pontoAtualIdx;\n                \n                const titulo = document.createElement('div');\n                titulo.className = 'coordenada-titulo';\n                titulo.innerHTML = `<span class=\"coordenada-icone\">${pontoAtualIdx + 1}<\/span> Ponto (x, y)`;\n                grupo.appendChild(titulo);\n                \n                const itemX = criarOperacaoItem(ponto.operacoes[0], ponto.x, pontoAtualIdx, 0, 'x');\n                grupo.appendChild(itemX);\n                \n                const itemY = criarOperacaoItem(ponto.operacoes[1], ponto.y, pontoAtualIdx, 1, 'y');\n                grupo.appendChild(itemY);\n                \n                container.innerHTML = '';\n                container.appendChild(grupo);\n                \n                setTimeout(() => {\n                    const primeiroInput = grupo.querySelector('.operacao-input');\n                    if (primeiroInput) primeiroInput.focus();\n                }, 100);\n            }\n\n            function criarOperacaoItem(operacao, resposta, pontoIdx, opIdx, coordenada) {\n                const item = document.createElement('div');\n                item.className = 'operacao-item';\n                item.dataset.pontoIdx = pontoIdx;\n                item.dataset.opIdx = opIdx;\n                \n                item.innerHTML = `\n                    <div class=\"operacao-label\">${operacao}<\/div>\n                    <div class=\"operacao-input-group\">\n                        <input type=\"number\" class=\"operacao-input\" placeholder=\"${coordenada} = ?\" data-resposta=\"${resposta}\">\n                        <button class=\"btn-verificar\" onclick=\"verificarResposta(this)\">\u2713<\/button>\n                    <\/div>\n                    <div class=\"feedback-ponto\"><\/div>\n                `;\n                \n                const input = item.querySelector('.operacao-input');\n                const btn = item.querySelector('.btn-verificar');\n                input.addEventListener('keypress', function(e) {\n                    if (e.key === 'Enter') {\n                        e.preventDefault();\n                        btn.click();\n                    }\n                });\n                \n                return item;\n            }\n\n            window.verificarResposta = function(btn) {\n                const item = btn.closest('.operacao-item');\n                const input = item.querySelector('.operacao-input');\n                const feedback = item.querySelector('.feedback-ponto');\n                const respostaCorreta = parseFloat(input.dataset.resposta);\n                const respostaUsuario = parseFloat(input.value);\n                \n                if (input.value === '' || isNaN(respostaUsuario)) {\n                    return;\n                }\n                \n                const pontoIdx = parseInt(item.dataset.pontoIdx);\n                const opIdx = parseInt(item.dataset.opIdx);\n                const ponto = desafioAtual.pontos[pontoIdx];\n                const grupo = item.closest('.coordenada-grupo');\n                \n                if (respostaUsuario === respostaCorreta) {\n                    item.classList.add('resolvida');\n                    item.classList.remove('erro');\n                    input.disabled = true;\n                    btn.disabled = true;\n                    \n                    const coordenada = opIdx === 0 ? 'x' : 'y';\n                    feedback.className = 'feedback-ponto sucesso';\n                    feedback.textContent = `\u2713 ${coordenada} = ${respostaCorreta}`;\n                    \n                    const operacoesResolvidas = Array.from(grupo.querySelectorAll('.operacao-item'))\n                        .filter(el => el.classList.contains('resolvida')).length;\n                    \n                    if (operacoesResolvidas === 2) {\n                        grupo.classList.add('completa');\n                        \n                        if (!pontosRevelados.some(p => p.idx === pontoIdx)) {\n                            pontosRevelados.push({ idx: pontoIdx, x: ponto.x, y: ponto.y });\n                            desenharPonto(ponto.x, ponto.y);\n                            atualizarProgresso();\n                            \n                            setTimeout(() => {\n                                pontoAtualIdx++;\n                                if (pontoAtualIdx < desafioAtual.pontos.length) {\n                                    mostrarPontoAtual();\n                                } else {\n                                    document.getElementById('btn-conectar').disabled = false;\n                                }\n                            }, 800);\n                        }\n                    } else {\n                        const proximoInput = grupo.querySelector('.operacao-item:not(.resolvida) .operacao-input');\n                        if (proximoInput) {\n                            setTimeout(() => proximoInput.focus(), 200);\n                        }\n                    }\n                } else {\n                    item.classList.add('erro');\n                    setTimeout(() => item.classList.remove('erro'), 500);\n                    feedback.className = 'feedback-ponto erro';\n                    feedback.textContent = '\u2717 Tente novamente!';\n                    input.select();\n                }\n            };\n\n            function atualizarProgresso() {\n                document.querySelector('.pontos-revelados').textContent = pontosRevelados.length;\n                document.querySelector('.pontos-total').textContent = desafioAtual.pontos.length;\n            }\n\n            function desenharPlano() {\n                if (!ctx) return;\n                \n                ctx.clearRect(0, 0, canvas.width, canvas.height);\n                \n                ctx.fillStyle = '#f7fafc';\n                ctx.fillRect(0, 0, canvas.width, canvas.height);\n                \n                ctx.strokeStyle = '#e2e8f0';\n                ctx.lineWidth = 1;\n                \n                for (let i = -6; i <= 6; i++) {\n                    ctx.beginPath();\n                    ctx.moveTo(centroX + i * escala, 0);\n                    ctx.lineTo(centroX + i * escala, canvas.height);\n                    ctx.stroke();\n                    \n                    ctx.beginPath();\n                    ctx.moveTo(0, centroY - i * escala);\n                    ctx.lineTo(canvas.width, centroY - i * escala);\n                    ctx.stroke();\n                }\n                \n                ctx.strokeStyle = '#667eea';\n                ctx.lineWidth = 2;\n                \n                ctx.beginPath();\n                ctx.moveTo(0, centroY);\n                ctx.lineTo(canvas.width, centroY);\n                ctx.stroke();\n                \n                ctx.beginPath();\n                ctx.moveTo(centroX, 0);\n                ctx.lineTo(centroX, canvas.height);\n                ctx.stroke();\n                \n                ctx.fillStyle = '#667eea';\n                ctx.font = 'bold 16px Arial';\n                ctx.textAlign = 'center';\n                ctx.fillText('X', canvas.width - 25, centroY - 12);\n                ctx.fillText('Y', centroX + 25, 25);\n            }\n\n            function desenharPonto(x, y) {\n                const canvasX = centroX + x * escala;\n                const canvasY = centroY - y * escala;\n                \n                ctx.fillStyle = '#667eea';\n                ctx.beginPath();\n                ctx.arc(canvasX, canvasY, 10, 0, Math.PI * 2);\n                ctx.fill();\n                \n                ctx.strokeStyle = 'white';\n                ctx.lineWidth = 3;\n                ctx.stroke();\n                \n                ctx.fillStyle = '#2d3748';\n                ctx.font = 'bold 14px Arial';\n                ctx.textAlign = 'center';\n                ctx.fillText(`(${x},${y})`, canvasX, canvasY - 18);\n            }\n\n            function conectarPontos() {\n                \/\/ Redesenha tudo\n                desenharPlano();\n                pontosRevelados.forEach(p => desenharPonto(p.x, p.y));\n                \n                \/\/ Desenha as linhas VERDE conectando os pontos\n                ctx.strokeStyle = '#48bb78';\n                ctx.lineWidth = 4;\n                ctx.lineCap = 'round';\n                ctx.lineJoin = 'round';\n                \n                ctx.beginPath();\n                pontosRevelados.forEach((p, idx) => {\n                    const canvasX = centroX + p.x * escala;\n                    const canvasY = centroY - p.y * escala;\n                    \n                    if (idx === 0) {\n                        ctx.moveTo(canvasX, canvasY);\n                    } else {\n                        ctx.lineTo(canvasX, canvasY);\n                    }\n                });\n                ctx.closePath();\n                ctx.stroke();\n                \n                \/\/ Mostra mensagem\n                revelarFigura();\n            }\n\n            document.getElementById('btn-conectar').addEventListener('click', conectarPontos);\n\n            function revelarFigura() {\n                const mensagem = document.getElementById('mensagem-figura');\n                mensagem.innerHTML = `Voc\u00ea formou ${desafioAtual.artigo}<br><strong>${desafioAtual.nome}!<\/strong> ${desafioAtual.emoji}`;\n                mensagem.classList.add('ativo');\n            }\n\n            document.getElementById('btn-reiniciar').addEventListener('click', iniciarJogo);\n\n            setTimeout(iniciarJogo, 0);\n        })();\n    <\/script>\n\n    \n\n\n\n<p>\u2713 Atividade alinhada \u00e0 Base Nacional Comum Curricular (BNCC), BNCC da Computa\u00e7\u00e3o e aos Objetivos de Desenvolvimento Sustent\u00e1vel (ODS) da ONU. <a style=\"background-color: #e6c15a; color: #2f2f2f; padding: 4px 10px; border-radius: 3px; text-decoration: none; font-weight: 500; display: inline-block;\" href=\"https:\/\/siminova.com.br\/blog\/amigos\/alinhamento\/pontos-e-formas\/\"> \u203a Saiba mais <\/a><\/p>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Vis\u00e3o Geral do Alinhamento<\/summary>\n<p class=\"has-small-font-size\">EF03MA12, EF04MA03, EF05MA15, EF06MA16, EF06MA23, EF09MA16, EM13MAT301, EM13MAT503, EI03CO01, EI03CO02, EI03CO03, EF01CO01, EF01CO02, EF01CO03, EF02CO01, EF02CO02, EF02CO05, EF04CO01, EF04CO03, EF04CO06, EF05CO01, EF15CO01, EF15CO02, EF15CO04, EF06CO05, EF06CO06, ODS 4, ODS 8 e ODS 9.<\/p>\n<\/details>\n","protected":false},"excerpt":{"rendered":"<p>Desvende o plano e descubra a figura.<br \/>\n<\/br><\/br><br \/>\n<b>N\u00cdVEL INTERMEDI\u00c1RIO<\/b><\/p>\n","protected":false},"author":8,"featured_media":4897,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[77],"tags":[],"class_list":["post-4876","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jogos"],"_links":{"self":[{"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/posts\/4876","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/comments?post=4876"}],"version-history":[{"count":12,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/posts\/4876\/revisions"}],"predecessor-version":[{"id":5170,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/posts\/4876\/revisions\/5170"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/media\/4897"}],"wp:attachment":[{"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/media?parent=4876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/categories?post=4876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/tags?post=4876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}