Como fazer um jogo de labirinto em JavaScript?
Se você já desenvolveu jogos ou animações em JavaScript, provavelmente já ouviu falar do termo “sprite”. Mas o que exatamente é um sprite e como ele é usado no desenvolvimento de jogos?
O que é um Sprite?
Um sprite é um elemento visual usado em jogos e animações para representar um personagem, objeto ou cenário. No code.org temos ferramentas que facilita o manuseio de sprites.
Agora, vamos entender um exemplo de código que cria um jogo com sprites no code.org.
Explicando o jogo
Aqui está o jogo que iremos criar:
Passo 1: Configurando o ambiente
Antes de começarmos a programar, certifique-se de ter um ambiente de desenvolvimento configurado:
Acesse o code.org, ao entrar na sua conta, selecione a opção criar novo projeto e escolha “game lab”.
Passo 2: Criação das Paredes do Labirinto
Para criar os sprites das paredes use os seguintes comandos:
createSprite(x, y, largura, altura):Cria um sprite na posição X e Y especificadas, com as dimensões de largura e altura definidas.shapeColor = "cor":Define a cor de preenchimento do sprite quando não há imagem associada. Aceita nomes de cores em inglês (“red”, “blue”), códigos hexadecimais (“#FF0000”) ou valores RGB/RGBA.
// Criação de todas as 40 paredes do labirinto
var parede1 = createSprite(5,100,10,200);
var parede2 = createSprite(5,340,10,155);
var parede3 = createSprite(200,395,400,10);
var parede4 = createSprite(200,5,400,10);
var parede5 = createSprite(395,5,10,1000);
var parede6 = createSprite(8,261,150,10);
var parede7 = createSprite(82,218,10,95);
var parede8 = createSprite(72,167,30,10);
var parede9 = createSprite(54,111,10,120);
var parede10 = createSprite(80,82,50,10);
var parede11 = createSprite(150,6,10,65);
var parede12 = createSprite(185,44,80,10);
var parede13 = createSprite(230,9,10,80);
var parede14 = createSprite(290,44,30,10);
var parede15 = createSprite(302,65,10,50);
var parede16 = createSprite(230,88,150,10);
var parede17 = createSprite(153,128,10,90);
var parede18 = createSprite(141,171,35,10);
var parede19 = createSprite(200,125,140,10);
var parede20 = createSprite(204,178,10,100);
var parede21 = createSprite(266,145,10,50);
var parede22 = createSprite(170,225,75,10);
var parede23 = createSprite(256,170,30,10);
var parede24 = createSprite(240,190,10,50);
var parede25 = createSprite(290,219,110,10);
var parede26 = createSprite(130,265,10,90);
var parede27 = createSprite(75,310,30,10);
var parede28 = createSprite(57,330,10,50);
var parede29 = createSprite(130,350,150,10);
var parede30 = createSprite(201,324,10,60);
var parede31 = createSprite(240,299,80,10);
var parede32 = createSprite(280,314,10,40);
var parede33 = createSprite(270,335,30,10);
var parede34 = createSprite(250,375,10,90);
var parede35 = createSprite(340,170,10,260);
var parede36 = createSprite(330,295,30,10);
var parede37 = createSprite(313,315,10,50);
var parede38 = createSprite(325,338,30,10);
var parede39 = createSprite(342,365,10,70);
var parede40 = createSprite(370,150,60,10);
// Configuração de cor para todas as paredes
parede1.shapeColor = "black";
parede2.shapeColor = "black";
parede3.shapeColor = "black";
parede4.shapeColor = "black";
parede5.shapeColor = "black";
parede6.shapeColor = "black";
parede7.shapeColor = "black";
parede8.shapeColor = "black";
parede9.shapeColor = "black";
parede10.shapeColor = "black";
parede11.shapeColor = "black";
parede12.shapeColor = "black";
parede13.shapeColor = "black";
parede14.shapeColor = "black";
parede15.shapeColor = "black";
parede16.shapeColor = "black";
parede17.shapeColor = "black";
parede18.shapeColor = "black";
parede19.shapeColor = "black";
parede20.shapeColor = "black";
parede21.shapeColor = "black";
parede22.shapeColor = "black";
parede23.shapeColor = "black";
parede24.shapeColor = "black";
parede25.shapeColor = "black";
parede26.shapeColor = "black";
parede27.shapeColor = "black";
parede28.shapeColor = "black";
parede29.shapeColor = "black";
parede30.shapeColor = "black";
parede31.shapeColor = "black";
parede32.shapeColor = "black";
parede33.shapeColor = "black";
parede34.shapeColor = "black";
parede35.shapeColor = "black";
parede36.shapeColor = "black";
parede37.shapeColor = "black";
parede38.shapeColor = "black";
parede39.shapeColor = "red"; // Parede especial (será destruída)
parede40.shapeColor = "black";
Passo 3: Criação dos elementos do Labirinto
Primeiro criamos o fundo:
createSprite(200, 200): Cria um sprite centralizado na tela (coordenadas x=200, y=200)setAnimation("background"): Carrega a animação do cenário
// Fundo do jogo
// Cria o sprite do fundo centralizado na tela (200,200)
var background = createSprite(200, 200);
// Aplica a animação de background
background.setAnimation("background");
Criamos o jogador:
createSprite(17, 228, 20, 20): Inicia no canto esquerdo do labirintosetAnimation("alien"): Carrega os frames de animação da personagem
// Personagem principal
var alien = createSprite(17, 228, 20, 20); // Cria o joagador na posição inicial
alien.setAnimation("alien"); // Aplica animação da personagem
Agora as estrelas coletáveis:
createSprite(x, y, 20, 20): Posiciona a estrela em um ponto específico do labirintosetAnimation("star"): Define o visual de estrela piscantescale = 0.3: Redimensiona para 30% do tamanho original (ajuste para caber no labirinto)
var sprite1 = createSprite(178, 110);
sprite1.setAnimation("moeda");
sprite1.scale=0.3
var sprite2 = createSprite(268, 200);
sprite2.setAnimation("moeda");
sprite2.scale=0.3
var sprite3 = createSprite(250, 320);
sprite3.setAnimation("moeda");
sprite3.scale=0.3
var sprite4 = createSprite(75, 330);
sprite4.setAnimation("moeda");
sprite4.scale=0.3
Por fim, criamos a medalha:
createSprite(367,200,10,10): Posiciona no canto direito (final do labirinto)setAnimation("medalha"): Animação do prêmio
// Objetivo final
var medalha = createSprite(367,200,10,10); // Cria a medalha na posição
medalha.setAnimation("medalha"); // Aplica animação da medalha
Passo 4: Adicionando Controles do Jogador
Vamos implementar os controles para mover o Jogador usando teclado (WASD ou setas direcionais).
keyDown()verifica se uma tecla está pressionada.Teclas suportadas:
↑ (UP_ARROW) ou W: Move para cima (
alien.y -= 2)↓ (DOWN_ARROW) ou S: Move para baixo (
alien.y += 2)→ (RIGHT_ARROW) ou D: Move para direita (
alien.x += 2)← (LEFT_ARROW) ou A: Move para esquerda (
alien.x -= 2)
// Controles do jogador (WASD ou setas)
if (keyDown(UP_ARROW) || keyDown("W")) { // ↑ ou 'W' (Cima)
alien.y -= 2; // Move para cima
}
if (keyDown(DOWN_ARROW) || keyDown("S")) { // ↓ ou 'S' (Baixo)
alien.y += 2; // Move para baixo
}
if (keyDown(RIGHT_ARROW) || keyDown("D")) { // → ou 'D' (Direita)
alien.x += 2; // Move para direita
}
if (keyDown(LEFT_ARROW) || keyDown("A")) { // ← ou 'A' (Esquerda)
alien.x -= 2; // Move para esquerda
}
Passo 5: Colisões com as paredes
Vamos implementar a verificação de colisão entre o alienígena e as paredes do jogo.
isTouching()verifica se o alienígena está encostando em alguma parede.Quando ocorre uma colisão, o alienígena é reposicionado para as coordenadas:
alien.x = 17(posição horizontal)alien.y = 228(posição vertical)
if(alien.isTouching(parede1) ||
alien.isTouching(parede2) ||
alien.isTouching(parede3) ||
alien.isTouching(parede4) ||
alien.isTouching(parede5) ||
alien.isTouching(parede6) ||
alien.isTouching(parede7) ||
alien.isTouching(parede8) ||
alien.isTouching(parede9) ||
alien.isTouching(parede10) ||
alien.isTouching(parede11) ||
alien.isTouching(parede12) ||
alien.isTouching(parede13) ||
alien.isTouching(parede14) ||
alien.isTouching(parede15) ||
alien.isTouching(parede16) ||
alien.isTouching(parede17) ||
alien.isTouching(parede18) ||
alien.isTouching(parede19) ||
alien.isTouching(parede20) ||
alien.isTouching(parede21) ||
alien.isTouching(parede22) ||
alien.isTouching(parede23) ||
alien.isTouching(parede24) ||
alien.isTouching(parede25) ||
alien.isTouching(parede26) ||
alien.isTouching(parede27) ||
alien.isTouching(parede28) ||
alien.isTouching(parede29) ||
alien.isTouching(parede30) ||
alien.isTouching(parede31) ||
alien.isTouching(parede32) ||
alien.isTouching(parede33) ||
alien.isTouching(parede34) ||
alien.isTouching(parede35) ||
alien.isTouching(parede36) ||
alien.isTouching(parede37) ||
alien.isTouching(parede38) ||
alien.isTouching(parede39) ||
alien.isTouching(parede40)){
alien.x=17
alien.y=228
}
Passo 6: Criando os pontos
Agora precisamos criar a variável pontos com valor zero no início do jogo.
var→ Declara uma variável (modo antigo, substituído porlet/constno JavaScript moderno)pontos→ Nome da variável que armazenará a pontuação= 0→ Atribui o valor inicial zero
var pontos = 0;
Passo 7: Exibindo os pontos
fill("white"):Define a cor do texto como branco
Todas as próximas operações de desenho de texto usarão esta cor
textSize(17):Configura o tamanho da fonte para 17 pixels
Ajusta o tamanho do texto que será exibido na tela
text("4/"+pontos, 190, 29):Exibe na tela um texto formatado como “4/X” (onde X é o valor atual da variável
pontos)Posiciona o texto nas coordenadas (190, 29) da tela
fill("white")
textSize(17)
text("4/"+pontos,190,29)
Passo 8: Colisões com as moedas
Vamos implementar a verificação de colisão entre o alienígena e as moedas do jogo.
isTouching()verifica se o alienígena está encostando em alguma parede.Quando ocorre uma colisão entre o alien e um sprite coletável:
pontos = pontos + 1→ Adiciona 1 ponto ao contador totalsprite.destroy()→ Remove o objeto coletado do jogo
if(alien.isTouching(sprite1)){
pontos=pontos +1
sprite1.destroy()
}
if(alien.isTouching(sprite2)){
pontos=pontos +1
sprite2.destroy()
}
if(alien.isTouching(sprite3)){
pontos=pontos +1
sprite3.destroy()
}
if(alien.isTouching(sprite4)){
pontos=pontos +1
sprite4.destroy()
}
Passo 9: Verificando os pontos
Verificação de progresso:
pontos >= 4checa se o jogador marcou 4 ou mais pontosO operador
>=significa “maior ou igual”
Recompensa por progresso:
Quando a condição é atendida (4+ pontos coletados)
parede39.destroy()remove a barreira do cenário
if(pontos>= 4){
parede39.destroy()}
Passo 10: Colisão com o troféu
Vamos verificar se o alienígena coletou a medalha final e, em caso positivo, exibe uma mensagem de vitória e remove a medalha do jogo.
if(alien.isTouching(medalha)){Verifica se há colisão entre o alienígena e o objeto chamado “medalha”
Usa a função
isTouching()para detecção de colisão
win = createSprite(200,200,20,20);Cria um novo sprite chamado “win” na posição (200,200)
Define tamanho inicial de 20×20 pixels (será ajustado pelo scale)
win.setAnimation("you win")Atribui a animação “you win” ao sprite de vitória
Essa animação deve conter a mensagem/efeito visual de vitória
win.scale = 1.5Aumenta o tamanho do sprite em 1.5 vezes
Torna a mensagem mais visível e impactante
medalha.destroy()Remove a medalha do jogo após ser coletada
Impede que o jogador colete repetidamente o mesmo item
if(alien.isTouching(medalha)){
win= createSprite(200,200,20,20);
win.setAnimation("you win")
win.scale= 1.5
medalha.destroy()
}
https://studio.code.org/projects/gamelab/xOhB0S6UUcUH3B58p3nNmqJPlig9FNnH663jSs4YEVE/edit
https://studio.code.org/projects/gamelab/xYZgFLslAAVJDVd7aOdhKW5sDILPRjY_cTswOuwKhVg/edit