Serious game de plataforma 2D (Phaser 3 + Vite) que ensina os fundamentos de JavaScript. Desenvolvido para a disciplina MAC5001 — Jogos Educacionais Digitais.
O herói foi transportado para dentro de um sistema corrompido e precisa reconstruir o stream de retorno para voltar para casa. Cada fase ensina um conceito de programação: o jogador lê o conceito num terminal, completa código real em lacunas e vê o resultado aplicado imediatamente na física do cenário.
npm install
npm run dev # servidor de desenvolvimento
npm run build # build de produção em dist/
npm run preview # prévia local do buildA/Dou←/→: moverW,↑ouEspaço: pular (pulo duplo após desbloquear na Fase 5)E: interagir com terminaisEnter: avançar telas / confirmar respostas / executar códigoTAB/ setas / clique: trocar de campo nos terminais com várias lacunasESC: sair de terminais ou voltar ao menu
| # | Conteúdo | Mecânica |
|---|---|---|
| 1 | Variáveis, constantes e tipos primitivos | O cenário começa em wireframe sem colisão e o HUD desligado. Completar let nomeJogador = "..." (nome livre), let vidaHeroi = 2 e const VISIBILIDADE_CENARIO = true materializa a malha de blocos e ativa o HUD. |
| 2 | Expressões aritméticas (+ - * / %) e precedência |
Balsa e elevador travados e tremendo sobre o abismo. As expressões 200 / 4 (velocidade) e 50 + 70 (altura) reativam as máquinas. |
| 3 | Condicionais (if / else if / else), comparação e && |
Três portões sandbox: firewall (if), ponte de luz (===), portão final (&& com três estados). O jogador edita só os valores e executa quantas vezes quiser — o cenário reage na hora. |
| 4 | Laços (for / while) |
Esteiras rolantes: o for constrói a ponte de esteira (alvo: 8 segmentos) e o while freia a esteira contrária (400 → ≤100 px/s). O resultado do laço é a física real. |
| 5 | Funções (declaração, parâmetros, retorno, chamada) | Declarar calcularImpulso() (function/return) desbloqueia o pulo duplo permanente; chamar calcularImpulso(20) calibra o trampolim (impulso 98) até a saída. Chamar antes de declarar dá ReferenceError. |
Ao completar a Fase 5, a tela de vitória mostra o herói comemorando, e Enter
reinicia o progresso e volta ao menu.
- Persistência entre fases (registry do Phaser):
nomeJogador,vidaHeroie o estado de cada terminal sobrevivem a trocas de cena e são exibidos nos desafios. - Vidas: 2 corações. Quedas no abismo, firewall e inimigos custam 1; com 0, a conexão cai e o jogo volta ao menu.
- Inimigos "ERROR": monitores glitch que patrulham plataformas sorteadas a cada visita. Toque: perde 1 coração e o herói pisca invulnerável por 2s. Pulo em cima: o inimigo dá fade e some.
- Terminais sandbox (Fases 3–5): estrutura de código fixa com lacunas de valores,
botão EXECUTAR ilimitado, rastreamento da avaliação (
5 >= 10 → false) e efeito imediato no cenário, sem reiniciar a fase.
src/main.js— ponto de entradasrc/config/gameConfig.js— configuração do Phaser e registro das cenassrc/scenes/— menu, intro, fases 1–5, terminais (TerminalScene,ChallengeScene,GateTerminalScene), feedback e vitóriasrc/entities/—DemoPlayer(corpo físico invisível + sprite animado),Enemy,DemoPendrive,DemoTerminalsrc/systems/— fundo cyberpunk, partículas, modal de dicasrc/levels/— dados de cada fase (layout, quebra-cabeças, feedback)src/assets/images/— arte (spritesheets processados)tools/process-player-sheet.mjs— pipeline da arte: chroma key do fundo verde (por dominância de verde), detecção dos quadros e reempacotamento em grade uniforme (requernpm i pngjs; rode comnode)
player.png(fonte, fundo verde) →player-sheet.png(grade 10×3, 162×239 por quadro): caminhada 1–5, idle frontal 8–9, aceno 10, pulo 17–22, aterrissagem 23.enemy.png(fonte) →enemy-sheet.png: monitor "ERROR" com transparência.