Passo 1: O tabuleiro
Um jogo da memória começa igual a qualquer projeto: a estrutura visual primeiro, com todas as cartas viradas para baixo.
Estudar esta lição interativa →Fechando os quatro primeiros projetos: um jogo da memória, o clássico de virar cartas em pares. Ele reúne praticamente tudo que você praticou até aqui, arrays de dados, eventos, DOM dinâmico, e acrescenta um ingrediente novo: estado de jogo, ou seja, variáveis que não guardam "o que mostrar", mas sim "em que momento da partida estamos" (nenhuma carta virada? uma virada, esperando a segunda? comparando um par?).
Este primeiro passo é só o tabuleiro: uma grade (display: grid) com oito cartas idênticas, todas mostrando ?. Ainda sem embaralhar símbolos nem reagir a clique, só a "mesa posta".
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Oito cartas, todas iguais, sem interação ainda.
O tabuleiro tem display: grid; grid-template-columns: repeat(4, 1fr): quatro colunas de largura igual, e as cartas se organizam sozinhas em linhas por baixo. É uma estrutura ideal para grades regulares como esta, e você não precisa entender Grid a fundo para este projeto: o CSS já está pronto, o seu trabalho aqui é o JavaScript.