Missão Fração

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Crie um jogo educativo 2D responsivo em tela cheia chamado “Missão Fração”, em português do Brasil, usando um canvas com visual flat/cartoon limpo. A interface deve funcionar com toque e mouse, sem rolagem, e adaptar-se ao tamanho da janela. Use um fundo azul-marinho muito escuro (#10182f) com pequenos pontos decorativos azulados, painéis arredondados azul-escuros, texto branco, títulos amarelos e acentos laranja, azul, verde, vermelho e roxo. Use tipografia simples semelhante a Arial, com títulos em negrito.

O jogo tem três telas principais:

1) Menu inicial: no topo esquerdo mostrar “MISSÃO FRAÇÃO” em amarelo e no topo direito “4º e 5º ano”. No centro mostrar “Aprenda brincando” e o subtítulo “Compare, represente e simplifique frações.”. Abaixo, um card grande arredondado contendo uma barra dividida em 8 partes iguais, com 5 partes preenchidas em laranja e 3 em azul escuro, a fração visual “5/8” e a legenda “partes coloridas”. Abaixo do card, botões largos “Jogar” (verde, texto escuro) e “Como jogar” (azul escuro). No rodapé, mostrar “Você pode jogar com toque ou mouse.”. O botão Jogar inicia uma nova partida; Como jogar abre a tela explicativa. A tecla Enter ou Espaço também pode iniciar pelo menu.

2) Tela “Como jogar”: manter o mesmo cabeçalho, com “COMO JOGAR” à esquerda e “Aprenda frações” à direita. Exibir três cards verticais arredondados: “1. Numerador” em amarelo, com “Quantas partes foram escolhidas.” e “Ex.: 3/4 → o 3 é o numerador.”; “2. Denominador” em azul, com “Em quantas partes iguais o todo foi dividido.” e “Ex.: 3/4 → o 4 é o denominador.”; e “3. Dica” em verde, com “Para comparar, transforme em partes” e “do mesmo tamanho ou use desenhos.”. Na parte inferior, botão largo “Voltar” para retornar ao menu.

3) Tela de jogo: no cabeçalho mostrar “MISSÃO FRAÇÃO” e, à direita, “Pontos [score] • Nível [level]”. Logo abaixo mostrar “Sequência [streak]” à esquerda e “[acertos]/[respondidas] acertos” à direita. Um painel arredondado apresenta uma pergunta gerada aleatoriamente de um destes três tipos:
- Comparação: título “Qual afirmação é verdadeira?”, duas barras de fração lado a lado em laranja e azul com suas frações, separadas por “e”. As opções são “A é maior”, “B é maior” e “São iguais”.
- Representação: título “Que fração está colorida?”, uma barra horizontal dividida em d partes iguais, com n partes preenchidas em laranja e as demais em azul escuro, e a legenda “[n] partes de [d]”. As opções são três frações, incluindo a resposta n/d e alternativas plausíveis.
- Simplificação: título “Qual é a forma simplificada?”, mostrar uma fração n/d grande em amarelo e o texto “Divida numerador e denominador pelo mesmo número.”. As opções incluem a fração reduzida e duas alternativas.

As frações devem ser geradas com numeradores menores que os denominadores. Para comparação, gere denominadores de 2 a 10 e numeradores de 1 até denominador-1; determine corretamente se A é maior, B é maior ou se são iguais. Para barras, use denominadores de 2 a 8. Para simplificação, use denominadores de 2 a 9 e reduza numerador e denominador pelo MDC. Embaralhe as opções de barra e simplificação para que a posição da resposta varie. Distribua as opções em uma coluna quando houver até três opções; o layout pode usar duas colunas se necessário, com botões grandes arredondados azul-escuros.

Ao selecionar uma opção, não permita outra resposta enquanto o feedback estiver ativo. Incrementar respondidas; se correta, incrementar acertos e sequência, somar 100 + sequência*10 pontos e mostrar “Muito bem!” em verde. Se errada, zerar a sequência e mostrar “Quase! Vamos entender juntos.” em vermelho/rosa. Exibir um card de feedback por cerca de 1,7 segundos, com a instrução de continuar; quando o feedback está visível, mostrar um botão amarelo “Próxima” que gera outra questão. Para uma resposta correta, o botão/opção correta pode receber contorno verde. O nível começa em 1 e sobe até 5, aumentando a cada quatro questões respondidas: nível = mínimo de 5, 1 + piso(respondidas/4). Manter os contadores visíveis. Um botão pequeno “Menu” no rodapé da tela de jogo retorna ao menu.

As barras de fração devem ser desenhadas como retângulos arredondados azulados, divididos em partes iguais, com cada parte preenchida em uma cor de destaque e pequenos espaçamentos visíveis. O jogo não possui personagem, inimigos, fases físicas, câmera móvel ou sons; é uma experiência de quiz matemático baseada em cartões, botões e feedback visual. Use apenas as interações de clique/toque nos botões e os controles de teclado Enter/Espaço no menu.