Destino Dev

Cursos

Jogo da Memória em JavaScript Puro

Código do curso: github.com/johnpires/jogo-memoria-javascript

Construa do zero um Jogo da Memória completo usando apenas HTML, CSS e JavaScript Puro — sem frameworks. Aprenda manipulação do DOM, lógica de algoritmos, animações CSS e boas práticas de organização de código.

Conteúdo do curso

Módulo 1: Introdução e Setup

Visão geral do projeto, ambiente de desenvolvimento e estrutura de arquivos.

  1. O que vamos construir: o Jogo da Memória (8 min)
  2. Configurando o ambiente de desenvolvimento (8 min)
  3. Estrutura de arquivos e arquitetura do projeto (8 min)

Módulo 2: HTML e CSS do Tabuleiro

Criação das cartas, grid layout, animação de flip com CSS transform e perspectiva 3D.

  1. Estrutura HTML das cartas e do tabuleiro (8 min)
  2. Estilizando as cartas: frente, verso e layout base (8 min)
  3. Animação de flip 3D com CSS transform e perspective (8 min)
  4. Grid layout responsivo e CSS do modal (8 min)

Módulo 3: Lógica do Jogo com JavaScript

Geração e embaralhamento das cartas, detecção de cliques, lógica de pares e bloqueio de interação.

  1. Gerando e embaralhando as cartas com Fisher-Yates (2 min)
  2. Capturando cliques e virando cartas no DOM (8 min)
  3. Verificando pares e lógica de match (8 min)
  4. Bloqueando cliques e gerenciando estado corretamente (8 min)

Módulo 4: Placar, Timer e Estado

Contador de jogadas, cronômetro com setInterval, detecção de vitória e reset do jogo.

  1. Contador de jogadas e atualização no DOM (8 min)
  2. Cronômetro com setInterval e clearInterval (8 min)
  3. Detectando vitória e exibindo o modal de resultado (8 min)
  4. Resetar, reiniciar e função init() completa (8 min)

Módulo 5: Melhorias Visuais e Responsividade

Temas de cartas, níveis de dificuldade, animações avançadas e layout responsivo para mobile.

  1. Temas de cartas com emojis e imagens customizadas (8 min)
  2. Níveis de dificuldade: modo fácil (4×4) e difícil (6×6) (2 min)
  3. Efeitos sonoros com a Web Audio API (8 min)
  4. Responsividade avançada para mobile com media queries (2 min)

Módulo 6: Deploy e Conclusão

Publicação no GitHub Pages, otimizações finais e próximos passos.

  1. Publicando o jogo no GitHub Pages (8 min)
  2. Otimizações de performance e SEO básico (8 min)
  3. Próximos passos, melhorias e o que aprender depois (3 min)