Disciplina de Desenvolvimento de Games · Ensino Médio
O objetivo desta disciplina não é formar programadores, mas sim usar a construção de um jogo real como contexto para apresentar conceitos básicos de desenvolvimento web de forma prática e motivadora. Ao final, cada aluno terá um jogo publicado no GitHub Pages que poderá compartilhar com amigos e família.
jogo-cobrinhagithub.devindex.html e fazer o primeiro commitindex.html contendo apenas <h1>Meu Jogo da Cobrinha</h1> e primeiro commit feito.
<!DOCTYPE>, <html>, <head>, <body><div>, <h1>, <span>, <canvas>, <button>, <p>id e como ele conecta HTML ao JavaScript<style>)body), por classe (.container), por id (#canvas)color, background, font-family, font-size, margin, paddingdisplay: flex e justify-content: centerborder-radius, cursor, transitionviewport e sua importância@media (max-width: 600px).teclas) com CSS Grid: para que servem no celular<script> e onde ela deve ficar no HTMLlet, const — diferenças e quando usarfunction nome() {}) e como chamardocument.getElementById() e .textContentiniciarJogo() e pausarJogo() (apenas inicialização de variáveis por enquanto)onclick nos botões: conectando clique à funçãocobra[0]), .push(), .pop(), .unshift(){ x: 10, y: 10 } — a cobra é um array de objetos!switch/case para direçõessetInterval() e clearInterval(): o "motor" do jogoatualizarJogo() passo a passolet cabeca = {...cobra[0]} — por que copiar e não referenciar?setInterval.
<canvas>: um "papel em branco" controlado por JScanvas.getContext('2d')fillRect(x, y, largura, altura)ctx.fillStylebeginPath(), moveTo(), lineTo(), stroke()forEach()arc()desenhar() completaiffor comparando posiçõesMath.random() e Math.floor()while)mudarDirecao())addEventListener('keydown', ...)fimDeJogo(): exibir mensagem sobre o canvaslocalStorage: guardar dados no navegadorlocalStorage.setItem() e localStorage.getItem()|| para valor padrão: localStorage.getItem('recorde') || 0setInterval), tamanho do canvas| Aula | Tema | Tecnologia | Resultado Visível |
|---|---|---|---|
| 01 | GitHub e VS Code | GitHub, git | Repositório criado, primeiro commit |
| 02 | Estrutura HTML | HTML | Página com todos os elementos (sem estilo) |
| 03 | CSS – Estilo e Layout | CSS | Página visualmente apresentável |
| 04 | CSS – Responsividade | CSS Media Queries | Jogo funcionando no celular |
| 05 | JS – Variáveis e Funções | JavaScript | Botões chamando funções reais |
| 06 | JS – Arrays e Loop | JavaScript | Cobra se movendo na tela |
| 07 | Canvas – Desenho 2D | Canvas API | Cobra e comida desenhadas corretamente |
| 08 | Colisões e Pontuação | JavaScript | 🎮 Jogo 100% funcional! |
| 09 | localStorage e Extras | JavaScript | Recorde salvo + jogo personalizado |
| 10 | GitHub Pages + Apresentação | GitHub Pages | 🌐 Link público do jogo |