HTML: a estrutura
Cria os elementos da página, como botões, textos e a área onde aparece o jogo.
É como as paredes de uma casa.
CURSO INICIANTE · AULA 00 / 15 🎓 NÃO PRECISA SABER PROGRAMAR
Antes de criar um jogo, vamos entender como ele funciona.
Nesta primeira aula você vai aprender o que é JavaScript, para que serve, como funciona no navegador e por que vamos usá-lo nos nossos jogos. Sem termos complicados.
CSS: a aparência
Cuida de cores, fontes, tamanhos e posições. Deixa o jogo e o site bonitos.
É como a pintura da casa.
JavaScript: as ações
É a linguagem que executa regras: mover o herói, coletar moedas, contar pontos e vencer.
É a parte que faz tudo funcionar.
DEMONSTRAÇÃO INTERATIVA
Veja o JavaScript trabalhando
Imagine que o seu jogo precisa mover um herói quando alguém aperta um botão. Toque em Mover +40 e veja o resultado.
posição x = 50
O CÓDIGO DA DEMONSTRAÇÃO
// 'x' guarda a posição horizontal
let x = 50;
// A função descreve o que fazer
function mover() {
x = x + 40;
}
// O clique chama a função mover()
let- cria uma variável cujo valor pode mudar
x- é a posição horizontal do herói
function- organiza instruções em uma tarefa
+- soma 40 pixels à posição anterior
Como o jogo aparece na tela?
O navegador (Chrome ou Firefox) lê nosso código. A cada instante, o jogo atualiza as posições e desenha os objetos no Canvas, que funciona como uma folha digital de desenho. Você vai aprender a fazer isso com comandos JavaScript reais, como ctx.fillRect().
👆 Ação do jogador→⚡ JavaScript calcula→🖼️ Canvas desenha
CONFIRA SE ENTENDEU
Qual linguagem será responsável por mover nosso personagem ao apertar uma seta?
Você não precisa decorar nomes de comandos agora. Primeiro, entenda o papel de cada tecnologia.
Escolha uma opção para continuar.
DESENVOLVIMENTO DE JOGOS · NÍVEL INICIANTE
Seu primeiro personagem
Aprenda JavaScript construindo um jogo de verdade.
🎮
Isso é programação real. Você edita JavaScript, vê seu jogo no Canvas 2D e testa se o código funciona. Não existem comandos falsos como personagem("azul").
📖 AULA GUIADA · ENTENDA ANTES DE PROGRAMAR
Vamos entender o conceito
EXEMPLO DO MUNDO REAL
EXEMPLO DE CÓDIGO COMENTADO
◉ JOGO EM EXECUÇÃO
● PRONTO
</> EDITOR JAVASCRIPT código real
JS
1
✓ VERIFICAÇÃO DA MISSÃO
Execute seu código para receber uma avaliação de verdade. Os testes simulam ações no seu jogo, como apertar teclas, coletar moedas e pular.
🧠 VOCÊ ENTENDEU?
Conclua esta missão para avançar.
🏆
Seu primeiro jogo está pronto!
Você praticou variáveis, funções, arrays, loops, animação, colisões, física, estados e fases. Agora baixe um HTML com seu próprio código para jogar e modificar.
📦 Próximos passos: transformar seu jogo em um produto
Seu arquivo HTML já pode ser testado por outras pessoas. Para comercializar, faltam etapas reais de produção.
- Jogue do início ao fim e peça testes de cinco pessoas diferentes.
- Crie arte, áudio e nome originais ou com licenças que permitam uso comercial.
- Corrija bugs, melhore acessibilidade e inclua controles para celular.
- Prepare título, descrição, capturas de tela, classificação etária e política de privacidade quando aplicável.
- Escolha uma plataforma de distribuição (por exemplo, itch.io) e confira as regras e taxas atuais.
- Publique primeiro uma demonstração; colete feedback antes de cobrar.
Este guia não é uma garantia de vendas. O próximo curso deverá cobrir publicação comercial com exercícios próprios.