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)
// Estrelas coletáveis
var estrela1 = createSprite(178, 110, 20, 20); // Cria a 1ª estrela na posição (178,124)
estrela1.setAnimation("star"); // Aplica animação de estrela
estrela1.scale = 0.3; // Tamanho ajustado para 30% do original
var estrela2 = createSprite(268, 200, 20, 20); // Cria a 2ª estrela na posição (268,208)
estrela2.setAnimation("star"); // Aplica animação de estrela
estrela2.scale = 0.05; // Tamanho ajustado para 30% do original
var estrela3 = createSprite(250, 320, 20, 20); // Cria a 3ª estrela na posição (224,286)
estrela3.setAnimation("star"); // Aplica animação de estrela
estrela3.scale = 0.3; // Tamanho ajustado para 30% do original
var estrela4 = createSprite(75, 330, 20, 20); // Cria a 4ª estrela na posição (75,330)
estrela4.setAnimation("star"); // Aplica animação de estrela
estrela4.scale = 0.3; // Tamanho ajustado para 30% do original
Por fim, criamos o troféu:
createSprite(367,200,10,10): Posiciona no canto direito (final do labirinto)setAnimation("trophy"): Animação do prêmio
// Objetivo final
var trophy = createSprite(367,200,10,10); // Cria o troféu na posição
trophy.setAnimation("trophy"); // Aplica animação do troféu
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 7:
Crie a colisão do jogador com as estrelas para adicionar pontos e deletar as estrelas
if (player.isTouching(sprite1)){
pontos+=1;
sprite1.destroy();
}
if (player.isTouching(sprite2)){
pontos+=1;
sprite2.destroy();
}
if (player.isTouching(sprite3)){
pontos+=1;
sprite3.destroy();
}
if (player.isTouching(sprite4)){
pontos+=1;
sprite4.destroy();
}
PASSO 8:
Crie o placar de pontos
PASSO 9:
Crie o a condição para que quando o jogador colete todas as estrelas a parede vermelha seja deletada
if(pontos == 4){
parede1.destroy()
}
PASSO 10:
Crie o sprite do troféu
PASSO 11:
Crie a colisão com o troféu para o jogador vencer
if(alien.isTouching(medalha)){
win= createSprite(200,200,20,20);
win.setAnimation("you win")
win.scale= 1.5
medalha.destroy()
}
O que será trabalhado nesse projeto?
- Variáveis em javaScript
- Condições em javaScript
- Coordenadas cartesianas
- Sprites
- Propriedades dos sprites
- Métodos dos sprites
https://studio.code.org/projects/gamelab/xOhB0S6UUcUH3B58p3nNmqJPlig9FNnH663jSs4YEVE/edit
https://studio.code.org/projects/gamelab/xYZgFLslAAVJDVd7aOdhKW5sDILPRjY_cTswOuwKhVg/edit