Ao longo deste módulo, você aprenderá GitHub, VS Code, lógica de programação, HTML, CSS e JavaScript — construindo, passo a passo, um Jogo de Adivinhação completo e publicado no GitHub Pages.
O objetivo desta disciplina não é transformar os alunos em programadores, mas usar a construção de um jogo real — o Jogo de Adivinhação — como pretexto para apresentar o ciclo completo do desenvolvimento web de forma prática e motivadora. Partindo do zero, os alunos aprenderão a usar ferramentas profissionais, entenderão como a internet funciona e, passo a passo, criarão e publicarão seu primeiro jogo online.
Ao final da disciplina, cada aluno terá um jogo de adivinhação publicado na internet, acessível por qualquer pessoa pelo celular ou computador, com sua própria personalização visual.
jogo-adivinhacaogithub.devindex.html com apenas um título <h1>jogo-adivinhacao criado com um arquivo index.html contendo <h1>Meu Jogo de Adivinhação</h1> e primeiro commit registrado.
<!DOCTYPE html>, <html>, <head> e <body><head>: onde ficam configurações como charset, viewport e título da aba<tag atributo="valor"><h1>, <p>, <div>, <input>, <button>type="number" no input: limitar a entrada a númerosmin e max: definindo o intervalo válido (1 a 100)id: como dar nome único aos elementos para o JavaScript encontrá-los<style> dentro do <head>: onde escrever o CSSbody), por classe (.container), por id (#BTNAdivinhar)color, background-color, font-family, font-sizepadding → border → margindisplay: flex, justify-content: center e align-items: centerbackground-color: #fff, border-radius, box-shadow, paddingborder: none, border-radius, cursor: pointerpadding, font-size, width.message: definir tamanho e margem da área de feedback<script>: onde escrever JavaScript no HTMLlet: let numeroSecreto = 425), texto ("olá"), booleano (true / false)document.getElementById('id').textContent e .valuefunction verificarPalpite() { ... }onclickconsole.log() como ferramenta de depuraçãoverificarPalpite(). Ao clicar, a mensagem "Função chamada!" aparece na tela via textContent.
if / else if / else: tomada de decisão no código=== (igual), > (maior), < (menor)= (atribuição) e === (comparação estrita)Math.random() — retorna um decimal entre 0 e 1Math.floor(Math.random() * 100) + 1 — número de 1 a 100parseInt() — por que o valor do input é uma string?isNaN() — "Is Not a Number?"|| (OU): validar fora do intervalo ou campo vazioverificarPalpite() passo a passodocument.getElementById('TXTPalpite').valueparseInt() e armazenar em chuteDoJogadorisNaN() e limites 1–100 antes de processar===, > e <`O número é ${numeroSecreto}`DIVMensagem usando .textContentqtdTentativas = 5 para controlar o número máximo de jogadasqtdTentativas--qtdTentativas === 0 — exibir "Fim de jogo! O número era X"disableGame(): desabilitar o botão e o input após o fim do jogodocument.getElementById('BTNAdivinhar').disabled = truebutton:disabled { background-color: #ccc; cursor: not-allowed; }location.reload()// isso é um comentário — explicar o que cada trecho faz| Aula | Tema | Tecnologia | Resultado Visível |
|---|---|---|---|
| 01 | GitHub e VS Code no Navegador | GitHub, git | Repositório criado, primeiro commit |
| 02 | Como a Web Funciona | HTTP, GitHub Pages | Link público do site funcionando |
| 03 | Estrutura HTML do Jogo | HTML | Página com input, botão e área de mensagem |
| 04 | CSS – Estilo e Layout | CSS, Flexbox | Página visualmente apresentável |
| 05 | JS – Variáveis e Funções | JavaScript | Botão chamando função e atualizando a tela |
| 06 | JS – Condicionais e Math.random() | JavaScript | Número secreto gerado, validação de input |
| 07 | Lógica de Comparação do Palpite | JavaScript | Feedback "maior/menor/acertou!" funcionando |
| 08 | Tentativas e Fim de Jogo | JavaScript | 🎮 Jogo 100% funcional! |
| 09 | Testes, Depuração e Personalização | JavaScript + CSS | Jogo sem bugs, com identidade visual própria |
| 10 | GitHub Pages + Apresentação Final | GitHub Pages | 🌐 Link público compartilhado com a turma |