[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","6a036afd46a08191bb21824e3c7a38bf","versionInt","title","Jogo Memoria Palavras 2ano Fundamental","type","code/react","content","import { useEffect, useMemo, useState } from \"react\";\n\n\nexport default function JogoMemoriaPalavras() {\n return (\n

\n Jogo da Memória das Palavras\n

\n Encontre os pares e complete as palavras para passar de fase!\n

\n\n \n\n

\n Professor Giovani - 2026\n

\n );\n}\n\n\nconst fases = [\n {\n palavra: \"BOLA\",\n incompleta: \"BO_A\",\n letra: \"L\",\n pares: 2,\n },\n {\n palavra: \"CASA\",\n incompleta: \"CA_A\",\n letra: \"S\",\n pares: 3,\n },\n {\n palavra: \"GATO\",\n incompleta: \"GA_O\",\n letra: \"T\",\n pares: 4,\n },\n {\n palavra: \"PATO\",\n incompleta: \"PA_O\",\n letra: \"T\",\n pares: 5,\n },\n {\n palavra: \"SAPO\",\n incompleta: \"SA_O\",\n letra: \"P\",\n pares: 6,\n },\n {\n palavra: \"DADO\",\n incompleta: \"DA_O\",\n letra: \"D\",\n pares: 6,\n },\n {\n palavra: \"FADA\",\n incompleta: \"FA_A\",\n letra: \"D\",\n pares: 7,\n },\n {\n palavra: \"MACA\",\n incompleta: \"MA_A\",\n letra: \"C\",\n pares: 7,\n },\n {\n palavra: \"BONECA\",\n incompleta: \"BO_ECA\",\n letra: \"N\",\n pares: 8,\n },\n {\n palavra: \"ESCOLA\",\n incompleta: \"ES_OLA\",\n letra: \"C\",\n pares: 8,\n },\n {\n palavra: \"JANELA\",\n incompleta: \"JANE_A\",\n letra: \"L\",\n pares: 9,\n },\n {\n palavra: \"CADEIRA\",\n incompleta: \"CA_EIRA\",\n letra: \"D\",\n pares: 9,\n },\n {\n palavra: \"ELEFANTE\",\n incompleta: \"ELE_ANTE\",\n letra: \"F\",\n pares: 10,\n },\n {\n palavra: \"COMPUTADOR\",\n incompleta: \"COMPU_ADOR\",\n letra: \"T\",\n pares: 10,\n },\n {\n palavra: \"BORBOLETA\",\n incompleta: \"BOR_OLETA\",\n letra: \"B\",\n pares: 12,\n },\n];\n\nfunction gerarCartas(qtdPares, faseAtual) {\n const temas = [\n [\"🐶\", \"🐱\", \"🦊\", \"🐸\", \"🐼\", \"🦁\", \"🐵\", \"🐷\", \"🐙\", \"🐰\", \"🐻\", \"🐹\"],\n [\"🚗\", \"🚕\", \"🚙\", \"🚌\", \"🚑\", \"🚒\", \"🚜\", \"🏎️\", \"🚲\", \"🛵\", \"✈️\", \"🚀\"],\n [\"🍎\", \"🍌\", \"🍇\", \"🍓\", \"🍉\", \"🍒\", \"🥝\", \"🍍\", \"🥥\", \"🍑\", \"🍋\", \"🍐\"],\n [\"⚽\", \"🏀\", \"🏈\", \"⚾\", \"🎾\", \"🏐\", \"🥎\", \"🎳\", \"🏓\", \"⛳\", \"🥊\", \"🏒\"],\n [\"👸\", \"🦸\", \"🧙\", \"🧚\", \"🧜\", \"🧛\", \"🦹\", \"🤴\", \"🧑‍🚀\", \"🥷\", \"🕵️\", \"👩‍🚒\"]\n ];\n\n const emojis = temas[faseAtual % temas.length];\n\n const selecionados = emojis.slice(0, qtdPares);\n\n const cartas = [...selecionados, ...selecionados]\n .map((emoji, index) => ({\n id: index + Math.random(),\n emoji,\n aberta: false,\n encontrada: false,\n }))\n .sort(() => Math.random() - 0.5);\n\n return cartas;\n}\n\nfunction Game() {\n const [fase, setFase] = useState(0);\n const dadosFase = fases[fase];\n\n const [cartas, setCartas] = useState(() =>\n gerarCartas(dadosFase.pares, fase)\n );\n\n const [selecionadas, setSelecionadas] = useState([]);\n const [paresEncontrados, setParesEncontrados] = useState(0);\n const [mostrarLetra, setMostrarLetra] = useState(false);\n const [resposta, setResposta] = useState(\"\");\n const [acertou, setAcertou] = useState(false);\n const [erro, setErro] = useState(false);\n const [venceu, setVenceu] = useState(false);\n const [pontos, setPontos] = useState(0);\n const [tempo, setTempo] = useState(0);\n const [nomeJogador, setNomeJogador] = useState(\"\");\n const [jogoIniciado, setJogoIniciado] = useState(false);\n\n const [ranking, setRanking] = useState([\n { nome: \"Ana\", pontos: 1500, tempo: 80 },\n { nome: \"Pedro\", pontos: 1300, tempo: 95 },\n { nome: \"Lucas\", pontos: 1200, tempo: 100 },\n { nome: \"Maria\", pontos: 1000, tempo: 120 },\n { nome: \"Sofia\", pontos: 900, tempo: 140 },\n { nome: \"João\", pontos: 850, tempo: 150 },\n ]);\n\n useEffect(() => {\n setCartas(gerarCartas(dadosFase.pares, fase));\n setSelecionadas([]);\n setParesEncontrados(0);\n setMostrarLetra(false);\n setResposta(\"\");\n setAcertou(false);\n setErro(false);\n setTempo(0);\n }, [fase, dadosFase.pares]);\n\n useEffect(() => {\n if (selecionadas.length === 2) {\n const [primeira, segunda] = selecionadas;\n\n if (primeira.emoji === segunda.emoji) {\n setCartas((prev) =>\n prev.map((carta) =>\n carta.emoji === primeira.emoji\n ? { ...carta, encontrada: true }\n : carta\n )\n );\n\n tocarSom(\"acerto\");\n setPontos((p) => p + 100);\n setParesEncontrados((v) => v + 1);\n setSelecionadas([]);\n } else {\n setTimeout(() => {\n setCartas((prev) =>\n prev.map((carta) =>\n carta.id === primeira.id || carta.id === segunda.id\n ? { ...carta, aberta: false }\n : carta\n )\n );\n\n setSelecionadas([]);\n }, 800);\n }\n }\n }, [selecionadas]);\n\n useEffect(() => {\n if (paresEncontrados === dadosFase.pares) {\n setMostrarLetra(true);\n }\n }, [paresEncontrados, dadosFase.pares]);\n\n useEffect(() => {\n const intervalo = setInterval(() => {\n setTempo((t) => t + 1);\n }, 1000);\n\n return () => clearInterval(intervalo);\n }, []);\n\n const verificarResposta = () => {\n if (\n resposta.trim().toUpperCase() ===\n dadosFase.letra.toUpperCase()\n ) {\n tocarSom(\"vitoria\");\n const novosPontos = pontos + 500 - tempo;\n setPontos(novosPontos);\n setAcertou(true);\n\n const novoRanking = [\n ...ranking,\n {\n nome: nomeJogador || \"Jogador\",\n pontos: novosPontos,\n tempo,\n },\n ]\n .sort((a, b) => {\n if (b.pontos === a.pontos) {\n return a.tempo - b.tempo;\n }\n return b.pontos - a.pontos;\n })\n .slice(0, 6);\n\n setRanking(novoRanking);\n setErro(false);\n } else {\n setErro(true);\n }\n };\n\n const completarPalavra = () => {\n if (fase < fases.length - 1) {\n setFase((f) => f + 1);\n } else {\n setVenceu(true);\n }\n };\n\n const tocarSom = (tipo) => {\n try {\n const audioContext = new (window.AudioContext || window.webkitAudioContext)();\n const oscillator = audioContext.createOscillator();\n const gainNode = audioContext.createGain();\n\n oscillator.connect(gainNode);\n gainNode.connect(audioContext.destination);\n\n if (tipo === \"clique\") {\n oscillator.frequency.value = 400;\n }\n\n if (tipo === \"acerto\") {\n oscillator.frequency.value = 700;\n }\n\n if (tipo === \"vitoria\") {\n oscillator.frequency.value = 900;\n }\n\n oscillator.type = \"sine\";\n gainNode.gain.value = 0.1;\n\n oscillator.start();\n oscillator.stop(audioContext.currentTime + 0.2);\n } catch (e) {\n console.log(e);\n }\n };\n\n const clicarCarta = (carta) => {\n if (\n carta.aberta ||\n carta.encontrada ||\n selecionadas.length === 2\n ) {\n return;\n }\n\n tocarSom(\"clique\");\n\n const novaCarta = { ...carta, aberta: true };\n\n setCartas((prev) =>\n prev.map((c) => (c.id === carta.id ? novaCarta : c))\n );\n\n setSelecionadas((prev) => [...prev, novaCarta]);\n };\n\n const colunas = useMemo(() => {\n if (dadosFase.pares <= 4) return \"grid-cols-4\";\n if (dadosFase.pares <= 6) return \"grid-cols-4\";\n if (dadosFase.pares <= 8) return \"grid-cols-4 md:grid-cols-6\";\n return \"grid-cols-4 md:grid-cols-6\";\n }, [dadosFase.pares]);\n\n if (!jogoIniciado) {\n return (\n

🎮

\n\n

\n Bem-vindo!\n

\n\n

\n Digite seu nome para começar o jogo.\n

\n\n setNomeJogador(e.target.value)}\n placeholder=\"Seu nome\"\n className=\"w-full px-4 py-3 rounded-2xl border-4 border-blue-300 text-xl font-bold text-center mb-4\"\n />\n\n {\n if (nomeJogador.trim()) {\n setJogoIniciado(true);\n }\n }}\n className=\"bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-2xl text-xl font-bold shadow-xl w-full\"\n >\n Começar Jogo\n \n

\n );\n }\n\n if (venceu) {\n return (\n

🏆

\n Parabéns!\n

\n {nomeJogador}, você completou todas as fases!\n

\n\n {\n setFase(0);\n setVenceu(false);\n setPontos(0);\n setTempo(0);\n setResposta(\"\");\n setAcertou(false);\n setErro(false);\n setTempo(0);\n }}\n className=\"bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-2xl text-lg font-bold shadow-lg\"\n >\n Jogar Novamente\n \n

\n );\n }\n\n return (\n

\n Fase {fase + 1}\n

\n Encontre todos os pares!\n

\n\n

\n \n ⭐ Pontos: {pontos}\n \n\n \n ⏱️ Tempo: {tempo}s\n \n

\n\n {\n setCartas(gerarCartas(dadosFase.pares, fase));\n setSelecionadas([]);\n setParesEncontrados(0);\n setMostrarLetra(false);\n setResposta(\"\");\n setAcertou(false);\n setErro(false);\n }}\n className=\"flex items-center gap-2 bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-xl font-semibold\"\n >\n 🔄 Reiniciar\n \n

\n\n

\n 🏆 Ranking Top 6\n

\n\n

\n {ranking.map((jogador, index) => (\n \n \n {index + 1}º {jogador.nome}\n \n\n \n ⭐ {jogador.pontos}\n \n

\n ))}\n

\n\n

\n Complete a palavra:\n

\n\n

\n {acertou\n ? dadosFase.palavra\n : dadosFase.incompleta}\n

\n\n {mostrarLetra && !acertou && (\n

\n setResposta(e.target.value)}\n className=\"w-24 h-24 text-center text-5xl border-4 border-blue-400 rounded-2xl font-bold uppercase\"\n placeholder=\"?\"\n />\n\n \n Verificar Letra\n \n\n {erro && (\n

\n Tente novamente!\n

\n )}\n

\n\n

\n {cartas.map((carta) => (\n clicarCarta(carta)}\n className={`aspect-square rounded-2xl text-4xl font-bold shadow-lg transition-all duration-300 ${\n carta.aberta || carta.encontrada\n ? \"bg-white border-4 border-green-400\"\n : \"bg-blue-500 hover:bg-blue-600\"\n }`}\n >\n {carta.aberta || carta.encontrada ? carta.emoji : \"❓\"}\n \n ))}\n

\n\n {acertou && (\n

🎉

\n Palavra completada!\n

\n\n \n Próxima Fase\n \n

\n )}\n \n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","12155164855364670015","traceTime",1778762792426]