Bem-vindo a JS Quest!

Prepare-se para uma jornada emocionante no mundo da programação de jogos com JavaScript!

Neste curso interativo, você aprenderá os fundamentos do JavaScript enquanto cria seu próprio jogo 2D estilo RPG.

Como Funciona:

  • Complete cada capítulo em ordem
  • Aprenda com exemplos práticos
  • Complete as missões para ganhar XP
  • Desbloqueie novos capítulos conforme progride

Dica: Use um editor de código como VS Code ou Sublime Text para melhor experiência.

Configuração Rápida

Para começar, crie um arquivo index.html com este conteúdo básico:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Meu Jogo JS</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

E um arquivo main.js com o código inicial:

console.log("Olá Mundo!");

Neste arquivo main.js vamos inserir os códigos dos próximos capítulos.

Missão Inicial

Clique no botão abaixo para começar sua jornada!

Capítulo 1: O Início da Jornada

Bem-vindo, jovem programador! Você está prestes a embarcar em uma aventura emocionante no mundo do JavaScript, onde aprenderá a criar seus próprios jogos 2D.

O Básico do JavaScript

JavaScript é a linguagem que dá vida às páginas web e pode ser usada para criar jogos incríveis!

// Isso é um comentário - o JavaScript ignora
let heroi = "Guerreiro JavaScript"; // Criando uma variável
let nivel = 1;
let hp = 100;

// Exibindo informações no console
console.log("Bem-vindo,", heroi);
console.log("Nível:", nivel);
console.log("HP:", hp);

Missão do Capítulo 1

Crie seu próprio personagem definindo variáveis para nome, classe (guerreiro, mago, arqueiro), nível e pontos de vida (HP).

Capítulo 2: Batalhas e Condições

Agora que você criou seu personagem, é hora de aprender a tomar decisões no código usando condições!

If/Else - Tomando Decisões

Em um jogo, você precisa tomar decisões o tempo todo. Vamos ver como fazer isso no código:

let inimigoHP = 50;
let danoDoHeroi = 15;

// Atacar o inimigo
inimigoHP -= danoDoHeroi; // Isso diminui o HP do inimigo

// Verificar se o inimigo foi derrotado
if (inimigoHP <= 0) {
  console.log("Inimigo derrotado! +10 XP");
} else {
  console.log("Inimigo ainda está vivo! HP restante:", inimigoHP);
}

Operadores de Comparação

Estes são os símbolos que usamos para comparar valores:

  • == igual a
  • != diferente de
  • > maior que
  • < menor que
  • >= maior ou igual a
  • <= menor ou igual a

Missão do Capítulo 2

Crie um sistema simples de batalha onde seu personagem ataca um inimigo. Use condições para verificar se o inimigo foi derrotado ou se ainda está vivo.

Capítulo 3: Loops e Repetições

Em jogos, muitas ações se repetem - é aí que entram os loops! Vamos aprender a automatizar tarefas repetitivas.

For Loop - Para ações repetitivas

Imagine que seu herói precisa atacar várias vezes seguidas:

let inimigoHP = 100;
let danoPorAtaque = 10;

// Atacar 5 vezes
for (let i = 0; i < 5; i++) {
  inimigoHP -= danoPorAtaque;
  console.log("Ataque", i+1, "- Inimigo HP:", inimigoHP);
}

if (inimigoHP <= 0) {
  console.log("Inimigo derrotado!");
}

While Loop - Enquanto algo for verdade

Útil quando não sabemos quantas vezes precisamos repetir:

let moedas = 0;
let tesouroEncontrado = false;

// Procurar tesouro até encontrar
while (!tesouroEncontrado) {
  moedas += 5; // Encontra algumas moedas
  console.log("Moedas encontradas! Total:", moedas);
  
  // 10% de chance de encontrar o tesouro
  if (Math.random() < 0.1) {
    tesouroEncontrado = true;
    console.log("TESOURO ENCONTRADO!");
  }
}

Missão do Capítulo 3

Crie um sistema de coleta de itens usando loops. Seu personagem deve coletar moedas até encontrar um tesouro especial (use Math.random() para chance aleatória).

Capítulo 4: Funções - Habilidades do Herói

Funções são como habilidades especiais do seu herói - blocos de código que podem ser reutilizados!

Criando e Usando Funções

Vamos criar algumas habilidades para nosso herói:

// Definindo uma função de ataque básico
function ataqueBasico() {
  let dano = 10 + Math.floor(Math.random() * 5); // Dano entre 10-14
  console.log("Ataque Básico! Dano:", dano);
  return dano;
}

// Definindo uma habilidade especial
function ataqueEspecial() {
  let dano = 20 + Math.floor(Math.random() * 10); // Dano entre 20-29
  console.log("ATAQUE ESPECIAL! Dano crítico:", dano);
  return dano;
}

// Usando as funções em batalha
let inimigoHP = 50;
inimigoHP -= ataqueBasico();
inimigoHP -= ataqueEspecial();
console.log("HP do inimigo após os ataques:", inimigoHP);

Missão do Capítulo 4

Crie pelo menos três habilidades diferentes para seu personagem (como ataque básico, cura e defesa) usando funções. Depois simule uma batalha usando essas habilidades.

Capítulo 5: Arrays - O Inventário do Herói

Arrays são como o inventário do seu herói - listas onde podemos guardar vários itens!

Criando e Manipulando Arrays

Vamos gerenciar o inventário do nosso herói:

// Criando um inventário
let inventario = ["espada", "escudo", "poção de cura"];

// Adicionando um item
inventario.push("mapa do tesouro");
console.log("Inventário:", inventario);

// Removendo um item
let itemUsado = inventario.pop(); // Remove o último item
console.log("Usou:", itemUsado);
console.log("Inventário atualizado:", inventario);

// Acessando itens específicos
console.log("Arma principal:", inventario[0]); // Lembrando que arrays começam em 0

Percorrendo Arrays com Loops

Podemos usar loops para verificar todos os itens do inventário:

// Verificando todos os itens do inventário
for (let i = 0; i < inventario.length; i++) {
  console.log("Item", i+1, ":", inventario[i]);
}

// Método mais moderno
inventario.forEach(function(item) {
  console.log("Item no inventário:", item);
});

Missão do Capítulo 5

Crie um sistema de inventário para seu personagem com pelo menos 5 itens. Implemente funções para adicionar itens, remover itens e listar todo o inventário.

Capítulo 6: Objetos - Criando Personagens

Objetos permitem agrupar informações relacionadas - perfeito para criar personagens complexos!

Criando Objetos de Personagem

Vamos criar nosso herói como um objeto literal:

// Criando um objeto herói
let heroi = {
  nome: "Aragorn JS",
  classe: "Guerreiro",
  nivel: 5,
  hp: 100,
  ataque: 15,
  defesa: 10,
  inventario: ["espada", "escudo", "poção de cura"],
  atacar: function() {
    return this.ataque + Math.floor(Math.random() * 5);
  },
  receberDano: function(dano) {
    let danoReal = dano - this.defesa;
    if (danoReal > 0) {
      this.hp -= danoReal;
      console.log(this.nome + " recebeu " + danoReal + " de dano!");
    } else {
      console.log(this.nome + " bloqueou o ataque!");
    }
  }
};

// Acessando propriedades
console.log(heroi.nome + " - Nível " + heroi.nivel);

// Usando métodos
let danoDoHeroi = heroi.atacar();
console.log(heroi.nome + " causou " + danoDoHeroi + " de dano!");

heroi.receberDano(12);
console.log("HP atual:", heroi.hp);

Criando Classes (ES6)

Em JavaScript moderno, podemos usar classes para criar personagens:

class Personagem {
  constructor(nome, classe) {
    this.nome = nome;
    this.classe = classe;
    this.nivel = 1;
    this.hp = 100;
    this.inventario = [];
  }

  atacar() {
    return 10 + Math.floor(Math.random() * 5);
  }

  receberDano(dano) {
    this.hp -= dano;
    console.log(`${this.nome} recebeu ${dano} de dano!`);
  }
}

// Criando instâncias
const heroi = new Personagem("Aragorn JS", "Guerreiro");
const inimigo = new Personagem("Orc JS", "Monstro");

// Batalha simples
inimigo.receberDano(heroi.atacar());

Missão do Capítulo 6

Crie um objeto completo para seu personagem com propriedades (nome, classe, atributos) e métodos (ataque, defesa, cura). Crie também um objeto inimigo e simule uma batalha entre eles.

Capítulo 7: Introdução ao Canvas - Desenhando no Jogo

Agora vamos começar a parte visual! O Canvas HTML5 nos permite desenhar gráficos 2D diretamente no navegador.

Configurando o Canvas

Primeiro, precisamos de um elemento canvas em nosso HTML:

// No HTML
<canvas id="gameCanvas" width="400" height="300"></canvas>

// No JavaScript
let canvas = document.getElementById("gameCanvas");
let ctx = canvas.getContext("2d");

// Desenhar um retângulo (personagem)
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 30, 50); // x, y, largura, altura

// Desenhar um círculo (inimigo)
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(200, 100, 20, 0, Math.PI * 2);
ctx.fill();

// Desenhar texto
ctx.fillStyle = "black";
ctx.font = "20px Arial";
ctx.fillText("Meu Primeiro Jogo!", 100, 30);

Animando no Canvas

Para criar animações, precisamos limpar e redesenhar o canvas várias vezes por segundo:

let x = 50; // Posição inicial do personagem

function atualizar() {
  // Limpar o canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Atualizar posição
  x += 2;
  if (x > canvas.width) x = 0;

  // Desenhar personagem na nova posição
  ctx.fillStyle = "blue";
  ctx.fillRect(x, 100, 30, 50);

  // Chamar a próxima atualização
  requestAnimationFrame(atualizar);
}

// Iniciar a animação
atualizar();

Missão do Capítulo 7

Crie uma cena simples no canvas com um personagem que se move e pelo menos um objeto estático. Implemente uma animação básica onde o personagem se move pela tela.

Capítulo 8: Eventos - Controles do Jogador

Agora vamos tornar nosso jogo interativo, respondendo a entradas do jogador!

Escutando Eventos do Teclado

Vamos permitir que o jogador mova o personagem com as teclas:

let personagem = {
  x: 50,
  y: 100,
  largura: 30,
  altura: 50,
  velocidade: 5,
  cor: "blue"
};

// Objeto para rastrear teclas pressionadas
let teclas = {};

// Escutar eventos de teclado
window.addEventListener("keydown", function(e) {
  teclas[e.key] = true;
});

window.addEventListener("keyup", function(e) {
  teclas[e.key] = false;
});

function atualizar() {
  // Movimento baseado nas teclas pressionadas
  if (teclas["ArrowLeft"]) personagem.x -= personagem.velocidade;
  if (teclas["ArrowRight"]) personagem.x += personagem.velocidade;
  if (teclas["ArrowUp"]) personagem.y -= personagem.velocidade;
  if (teclas["ArrowDown"]) personagem.y += personagem.velocidade;

  // Limitar personagem dentro do canvas
  personagem.x = Math.max(0, Math.min(canvas.width - personagem.largura, personagem.x));
  personagem.y = Math.max(0, Math.min(canvas.height - personagem.altura, personagem.y));

  // Limpar e redesenhar
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = personagem.cor;
  ctx.fillRect(personagem.x, personagem.y, personagem.largura, personagem.altura);

  requestAnimationFrame(atualizar);
}

atualizar();

Eventos de Mouse/Touch

Também podemos responder a cliques/toques:

canvas.addEventListener("click", function(e) {
  let rect = canvas.getBoundingClientRect();
  let x = e.clientX - rect.left;
  let y = e.clientY - rect.top;
  console.log("Clicou em:", x, y);
});

Missão do Capítulo 8

Crie um sistema de controles para seu personagem usando teclado (setas ou WASD). Adicione também interação por mouse/toque para algum efeito especial ou ação no jogo.

Capítulo 9: Colisões e Game Loop

Agora vamos fazer os objetos interagirem! Detecção de colisão é essencial para qualquer jogo.

Detectando Colisões

O método mais simples para retângulos (bounding box):

function verificarColisao(obj1, obj2) {
  return obj1.x < obj2.x + obj2.largura &&
       obj1.x + obj1.largura > obj2.x &&
       obj1.y < obj2.y + obj2.altura &&
       obj1.y + obj1.altura > obj2.y;
}

// Exemplo de uso no game loop
let moeda = { x: 200, y: 150, largura: 20, altura: 20 };
let pontuacao = 0;

function atualizar() {
  // ... código de movimento anterior ...

  // Verificar colisão com moeda
  if (verificarColisao(personagem, moeda)) {
    pontuacao += 10;
    console.log("Moeda coletada! Pontuação:", pontuacao);
    // Reposicionar moeda
    moeda.x = Math.random() * (canvas.width - moeda.largura);
    moeda.y = Math.random() * (canvas.height - moeda.altura);
  }

  // Desenhar moeda
  ctx.fillStyle = "gold";
  ctx.fillRect(moeda.x, moeda.y, moeda.largura, moeda.altura);
  
  // Mostrar pontuação
  ctx.fillStyle = "black";
  ctx.font = "20px Arial";
  ctx.fillText("Pontos: " + pontuacao, 10, 30);
  
  requestAnimationFrame(atualizar);
}

Estrutura Básica de um Game Loop

Um jogo completo precisa de uma estrutura organizada:

// Estado do jogo
let estadoJogo = {
  personagem: { /* propriedades do personagem */ },
  inimigos: [],
  moedas: [],
  pontuacao: 0,
  vidas: 3
};

// Inicializar o jogo
function iniciarJogo() {
  // Criar objetos iniciais
  estadoJogo.personagem = { /* ... */ };
  criarInimigos(5);
  criarMoedas(10);

  // Iniciar o loop do jogo
  gameLoop();
}

// Loop principal do jogo
function gameLoop() {
  processarEntradas();
  atualizarJogo();
  renderizarJogo();
  
  if (!estadoJogo.gameOver) {
    requestAnimationFrame(gameLoop);
  } else {
    mostrarTelaGameOver();
  }
}

// Funções auxiliares
function processarEntradas() { /* ... */ }
function atualizarJogo() { /* ... */ }
function renderizarJogo() { /* ... */ }

Missão do Capítulo 9

Crie um mini-jogo completo com: sistema de colisão, pontuação, game loop estruturado e pelo menos um objetivo simples (como coletar itens ou evitar obstáculos).

Capítulo 10: Projeto Final - Seu Primeiro Jogo Completo

Parabéns, jovem programador! Você adquiriu todas as habilidades básicas para criar seu primeiro jogo. Agora é hora de colocar tudo em prática!

Escolha seu Tipo de Jogo

Aqui estão algumas ideias para seu projeto final:

  • Jogo de Coletar Itens: Controle um personagem para coletar moedas/objetos enquanto evita obstáculos/inimigos.
  • Plataforma Simples: Um herói que pula entre plataformas para alcançar um objetivo.
  • Jogo de Nave: Controle uma nave que atira em inimigos que descem pela tela.
  • Labirinto: Encontre a saída de um labirinto dentro de um tempo limite.

Elementos Obrigatórios

Seu jogo deve incluir:

  1. Controles interativos (teclado/mouse)
  2. Sistema de pontuação ou progresso
  3. Detecção de colisão
  4. Condição de vitória/derrota
  5. Tela inicial e tela de game over

Dicas para Organizar seu Código

// 1. Defina o estado do jogo em um objeto
let jogo = {
  estado: "menu", // menu, jogando, gameover
  pontuacao: 0,
  personagem: { /* ... */ },
  objetos: []
};

// 2. Separe em funções lógicas
function iniciarJogo() { /* ... */ }
function atualizarJogo() { /* ... */ }
function desenharJogo() { /* ... */ }
function desenharMenu() { /* ... */ }

// 3. Game loop principal
function loop() {
  switch(jogo.estado) {
    case "menu":
      desenharMenu();
      break;
    case "jogando":
      atualizarJogo();
      desenharJogo();
      break;
    case "gameover":
      desenharGameOver();
      break;
  }
  requestAnimationFrame(loop);
}

// Iniciar o jogo
loop();

Missão Final

Crie seu primeiro jogo completo usando tudo que aprendeu! Seja criativo e divirta-se. Lembre-se de testar seu jogo e pedir feedback para amigos.

Próximos Passos na Sua Jornada

Agora que você completou o básico, aqui estão alguns tópicos para explorar em seguida:

  • Sprites e animações (em vez de formas geométricas simples)
  • Física mais avançada (gravidade, pulo, aceleração)
  • Geração procedural de mapas
  • IA simples para inimigos
  • Bibliotecas como Phaser ou PixiJS para jogos mais complexos

Missão Cumprida!

Parabéns, aventureiro! Você completou com sucesso a JS Quest e agora está preparado para criar seus próprios jogos em JavaScript.

Seu Progresso

0%

Você ganhou 0 XP e completou 0 de 10 capítulos!

O Que Fazer Agora?

  • Pratique: Crie pequenos jogos para consolidar seu conhecimento
  • Explore: Experimente bibliotecas como Phaser ou Three.js
  • Compartilhe: Mostre seus projetos para amigos e comunidade
  • Aprenda: Continue estudando algoritmos e padrões de design de jogos

Jornada Eterna

A programação é uma jornada sem fim. Continue explorando, criando e se divertindo!