O que vais construir
O jogo da cobra a funcionar: movimento contínuo, comida, crescimento e deteção de colisão — feito só com HTML, CSS e JavaScript (canvas).
Código 100% próprio e aberto. Um clássico, livre para reutilizares.
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.
Pomos na mesa: um quadrado onde a cobra vai viver, os botões de setas, e o contador de pontos. Este quadrado é uma 'tela' (em inglês, canvas) — pensa nele como um quadro de papel digital onde o código desenha e apaga muito depressa. A cobra não são caixas; é um desenho que o código faz e refaz a cada instante.
<canvas id="tela" width="300" height="300"></canvas>
<div class="controlos">
<button data-dir="cima">↑</button> <button data-dir="esq">←</button>
<button data-dir="baixo">↓</button> <button data-dir="dir">→</button>
</div>Acrescenta uma dica por baixo a explicar os controlos. Só os ossos, sem função ainda.
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…».
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 Snake no teu telemóvel.