← Construir

O que vais construir

O Jogo do Galo

O jogo do galo a funcionar para dois jogadores, com deteção de vitória e empate — feito só com HTML, CSS e JavaScript.

Começo · 🎮 jogo · ~35 min🌐 web
✦ introduz: Grelha / tabuleiro✦ introduz: Lógica de jogo↻ reaproveita: Estado & eventos
resultado vivo · experimentaAbrir em página inteira ↗
A construir como O Mágico. Como queres que te explique?
Primeira vez a programar? Lê isto antes (30 segundos) →

Em quase todas as apps repetimos as mesmas camadas, como construir uma casa: o HTML põe as coisas na mesa (a estrutura), o CSS veste-as (a aparência), e o JavaScript é a linguagem que lhes dá vida (o que reage ao toque). No fim, a memória guarda o que importa. Não precisas de decorar — vais reconhecê-las em cada passo. E há um truque de criador: antes de cada passo, diz em voz alta “quando eu faço X, a app deve fazer Y”. Isso transforma-te de quem copia em quem cria.

  1. Pomos na mesa: um tabuleiro de nove casas (3 por 3), uma frase que diz de quem é a vez, e um botão 'Novo jogo'. Por enquanto, só o esqueleto.

    O que aprendes aqui
    Uma grelha de 3 por 3A mensagem de quem jogaReaproveitar a estrutura
    O código (html)
    <p class="estado" id="estado">Joga o <b>X</b></p>
    <div class="tabuleiro" id="tabuleiro"></div>
    <button id="novo">Novo jogo</button>
    A tua vez · muda o comportamento

    Acrescenta um placar (X, Empates, O) por baixo — por agora só os números a zero.

    🎧 Ouvir este passo · em breve🎬 Vídeo · em breve
Faz tu · sem receita

Agora prova que és tu a mandar

Montaste a casa seguindo o plano. O salto a criador é mudá-la sozinho. Tenta estas três — da mais simples à mais corajosa — sem receita. Se travares, pede à tua IA; mas tenta primeiro, e diz antes «quando eu fizer isto, a app deve…».

  1. 1Deteta o empate («velha») e anuncia-o, não só a vitória.
  2. 2Mostra um placar: quantas vitórias de cada jogador nesta sessão.
  3. 3Deixa cada jogador escolher o seu símbolo (porque não emojis?).

Ergueste a casa inteira. 🏠

O que construíste é teu. Abre a Prova Viva, clona para a tua IA, e faz crescer — uma cor nova, um botão novo, ou O Jogo do Galo no teu telemóvel.