Memory Card Game
Da curiosidade a um PWA completo de jogo da memória
Ato 1 — O problema certo para treinar
Eu buscava um exercício que elevasse raciocínio lógico sem depender de backends complexos. O jogo da memória parecia simples demais — até decidir que ele seria um laboratório de UX, acessibilidade e PWA.
Se o jogo fosse rápido, acessível e com progressão clara (conquistas/modos), a experiência deixaria de ser casual e passaria a ser envolvente.
Ato 2 — O insight de design
Transformei “virar cartas” em micro‑decisões: ritmo, tempo de revelação, feedback auditivo/visual e curva de dificuldade. O objetivo era manter fluxo e evitar frustração cognitiva.
Ato 3 — Construção
- Arquitetura: React + TypeScript, build com Vite e PWA completo (install + offline).
- Game Loop: temporizações precisas, persistência de progresso e 4 modos de jogo.
- Acessibilidade: suporte total a teclado e leitores de tela, foco gerenciado e ARIA.
- Feedback: animações e sons sincronizados a cada evento crítico.
Ato 4 — Impacto esperado
- Sessões mais longas por conta das conquistas e variação de modos.
- Menos “rage quit” graças a sinais claros de acerto/erro e ritmo consistente.
- Rejogabilidade alta em ambientes offline (PWA) — ideal para dispositivos móveis.
Segundo jogo web do meu portfólio, consolidando boas práticas de UX acessível e engenharia de front‑end aplicada a jogos.
Ato 5 — O que ficou
Além da diversão, ficou um arcabouço reaproveitável para prototipar jogos web nativos com foco em progressão, performance e acessibilidade.
Modos de Jogo e Conquistas
- Clássico: pares embaralhados, tempo padrão.
- Contra o Tempo: cronômetro regressivo, bônus por combos rápidos.
- Zen: foco no fluxo e na precisão, sem pressão de tempo.
- Duelo Local: dois jogadores no mesmo dispositivo.
- Conquistas (exemplos): “Sem Erros”, “Velocista”, “Mestre da Sequência” e “Maratona Offline (PWA)”.
Funcionalidades Principais
- 4 modos de jogo e multiplayer local
- Sistema de conquistas e feedback com sons/animações
- PWA completo (instalável e com suporte offline)
- Compartilhamento nativo via Web Share API
- Acessibilidade: teclado e leitores de tela
Arquitetura e Stack Tecnológico
| Categoria | Tecnologia | Propósito |
|---|---|---|
| Framework | React | Interface declarativa |
| Linguagem | TypeScript | Tipagem estática |
| Build Tool | Vite | DX e bundling rápidos |
| PWA | Service Worker/Workbox | Instalação e offline |
| Gerenciamento de estado | Zustand | Store simples e previsível |
| Hospedagem | Vercel | Deploy e CDN |