javascript

Criando jogo do Fantasma na Torre com JavaScript

Porisabellabeatriz1603@gmail.com

O jogo do Fantasma na Torre é um desafio emocionante onde você controla um fantasma que precisa escalar uma torre cheia de portas e obstáculos. O objetivo é sobreviver o máximo possível, evitando cair ou ser atingido pelas grades. Sua criação em JavaScript usando a biblioteca p5.js é uma excelente forma de aprender sobre desenvolvimento de jogos, lógica de programação e animações interativas!

Passo 1: Configurando o ambiente

Antes de começarmos a programar, certifique-se de ter um ambiente de desenvolvimento configurado:

  • Um editor de código (VS Code)

BAIXE AQUI O VISUAL CODE
  • Um navegador (Google Chrome)
BAIXE AQUI O GOOGLE CHROME

  • A biblioteca p5.js

BAIXE AQUI A BIBLIOTECA P5

Passo 2: Criando as variáveis

O jogo será composto por um fantasma, uma torre, portas, obstáculos e um sistema de pontuação. Vamos começar declarando as variáveis necessárias.

				
					// Estado do jogo
var gameState;

// Torre e fundo
var tower, towerImg;

// Portas e obstáculos
var door, doorImg, doorsGroup;
var climber, climberImg, climbersGroup;
var invisibleBlock, invisibleBlockGroup;

// Fantasma
var ghost, ghostImg;

// Sons do jogo
var spookySound;

Passo 3: Pré-carregando imagens e sons

Antes de iniciarmos o jogo, precisamos carregar os recursos gráficos e sonoros.

				
					function preload() {
  // Carrega as imagens
  towerImg = loadImage("tower.png");
  doorImg = loadImage("door.png");
  climberImg = loadImage("climber.png");
  ghostImg = loadImage("ghost-standing.png");

  // Carrega o som de fundo
  spookySound = loadSound("spooky.wav");
}

Passo 4: Configurando o Cenário e o Fantasma

Agora, vamos configurar o cenário do jogo e criar o fantasma.

				
					function setup() {
  createCanvas(600, 600);

  // Toca o som de fundo em loop
  spookySound.loop();

  // Cria a torre
  tower = createSprite(300, 300);
  tower.addImage("tower", towerImg);
  tower.velocityY = 1;

  // Cria o fantasma
  ghost = createSprite(200, 200, 50, 50);
  ghost.scale = 0.3;
  ghost.addImage("ghost", ghostImg);
  
}

Passo 5: Movimentação do Fantasma

Vamos permitir que o jogador controle o fantasma usando as setas do teclado e a barra de espaço para pular.

				
					function draw() {
  background(0);

   // Atualizando o cenário
   if (tower.y > 400) {
      tower.y = 300;
    }
    
    // Movimentação para a esquerda
    if (keyDown("left_arrow")) {
      ghost.x = ghost.x - 3;
    }

    // Movimentação para a direita
    if (keyDown("right_arrow")) {
      ghost.x = ghost.x + 3;
    }

    // Pulo
    if (keyDown("space")) {
      ghost.velocityY = -10;
    }

    // Aplica gravidade ao fantasma
    ghost.velocityY = ghost.velocityY + 0.8;

    // Desenha os sprites na tela
    drawSprites();

}

Passo 6: Gerando Portas e Obstáculos

Para tornar o jogo desafiador, precisamos gerar portas e obstáculos de forma aleatória.

				
					function spawnDoors() {
  if (frameCount % 240 === 0) {
    // Cria uma porta, um escalador e um bloco invisível
    var door = createSprite(200, -50);
    var climber = createSprite(200, 10);
    var invisibleBlock = createSprite(200, 15,100,20);
    
    // Configura os sprites
    door.x = Math.round(random(120, 400));
    climber.x = door.x;
    invisibleBlock.x = door.x;

    // Adiciona as imagens
    door.addImage(doorImg);
    climber.addImage(climberImg);

    // Define a velocidade
    door.velocityY = 1;
    climber.velocityY = 1;
    invisibleBlock.velocityY = 1;

    //Definindo camanda do fantasma 
    ghost.depth = door.depth;
    ghost.depth +=1;
        
    // Define o tempo de vida
    door.lifetime = 800;
    climber.lifetime = 800;
    invisibleBlock.lifetime = 800;

    // Adiciona aos grupos
    doorsGroup.add(door);
    climbersGroup.add(climber);
    invisibleBlockGroup.add(invisibleBlock);
    
    //colidindo com a climber
    ghost.collide(climbersGroup)
  }
}
				
			
				
					function setup() {
  createCanvas(600, 600);

  // Toca o som de fundo em loop
  spookySound.loop();

  // Cria a torre
  tower = createSprite(300, 300);
  tower.addImage("tower", towerImg);
  tower.velocityY = 1;

  // Cria o fantasma
  ghost = createSprite(200, 200, 50, 50);
  ghost.scale = 0.3;
  ghost.addImage("ghost", ghostImg);

  // Inicializa os grupos de portas e obstáculos
  doorsGroup = new Group();
  climbersGroup = new Group();
  invisibleBlockGroup = new Group();
  
  // Estado de jogo
  gameState= "PLAY";
}
				
			
				
					function draw() {
  background(0);

   // Atualizando o cenário
   if (tower.y > 400) {
      tower.y = 300;
    }
    
    // Movimentação para a esquerda
    if (keyDown("left_arrow")) {
      ghost.x = ghost.x - 3;
    }

    // Movimentação para a direita
    if (keyDown("right_arrow")) {
      ghost.x = ghost.x + 3;
    }

    // Pulo
    if (keyDown("space")) {
      ghost.velocityY = -10;
    }

    // Aplica gravidade ao fantasma
    ghost.velocityY = ghost.velocityY + 0.8;

    // Gera as portas e obstáculos
    spawnDoors();

    // Desenha os sprites na tela
    drawSprites();
}

Passo 7: Criando o estado de jogo PLAY

O jogo terá dois estados principais: PLAY e END. No estado PLAY, o o fantasma pode se mover e pular, e os obstáculos continuam aparecendo. Se colidir com um obstáculo, o jogo entra no estado END.

				
					function PLAY() {

  // Atualizando o cenário
   if (tower.y > 400) {
      tower.y = 300;
    }
    
   // Movimentação para a esquerda
    if (keyDown("left_arrow")) {
      ghost.x = ghost.x - 3;
    }

    // Movimentação para a direita
    if (keyDown("right_arrow")) {
      ghost.x = ghost.x + 3;
    }

    // Pulo
    if (keyDown("space")) {
      ghost.velocityY = -10;
    }

    // Aplica gravidade ao fantasma
    ghost.velocityY = ghost.velocityY + 0.8;

    // Verifica colisões
    if (climbersGroup.isTouching(ghost)) {
      ghost.velocityY = 0;
    }

    // Fim de jogo se o fantasma cair ou colidir com um bloco invisível
    if (invisibleBlockGroup.isTouching(ghost) || ghost.y > 600) {
      gameState = "END";
    }

    // Gera as portas e obstáculos
    spawnDoors();
}

				
			
				
					function draw() {
  background(0);

  // Chama a função PLAY se o estado do jogo for "PLAY"
  if (gameState == "PLAY") {
    PLAY();
  }
  
  // Desenha os sprites na tela  
  drawSprites();
}

Passo 8: Criando o estado de jogo END

Após o Fantasma colidir com um obstáculo, o jogo entra no estado END. E o jogador tem a opção de recomeçar o jogo. 

				
					function END() {
    // Deixando o fantasma invisivel
      ghost.visible= false;

    //Criando o texto de fim de jogo
        stroke("yellow");
        fill("yellow");
        textSize(30);
        text("Fim de Jogo, pressione R para reiniciar", 30,250)
    
    // Reinicia o jogo quando o botão de restart é pressionado
      if (keyDown("r")) {
        reset();
      }
}

				
			
				
					function draw() {
  background(0);

  // Chama a função PLAY se o estado do jogo for "PLAY"
  if (gameState == "PLAY") {
    PLAY();
  }

  // Chama a função END se o estado do jogo for "END"
  if (gameState == "END") { 
    END(); 
  }

  // Desenha os sprites na tela  
  drawSprites();
}

Passo 9: Reset do jogo

O jogo terá dois estados principais: PLAY e END. No estado PLAY, o T-Rex pode pular e o jogo avança continuamente. Se colidir com um obstáculo, o jogo entra no estado END.

				
					function reset() {
  // Deixando o fantasma visivel
  ghost.visible= true;

  // Reseta o estado do jogo para "PLAY"
  gameState = "PLAY";

  // Reposiciona o fantasma
  ghost.x = 200;
  ghost.y = 200;
  ghost.velocityY = 0;

  // Reposiciona a torre
  tower.y = 300;

  // Destroi todos os obstáculos
  climbersGroup.destroyEach();
  invisibleBlockGroup.destroyEach();
  doorsGroup.destroyEach();

  // Reinicia o som
  spookySound.stop();
  spookySound.loop();

}

RESULTADO

				
					// Estado do jogo
var gameState;

// Torre e fundo
var tower, towerImg;

// Portas e obstáculos
var door, doorImg, doorsGroup;
var climber, climberImg, climbersGroup;
var invisibleBlock, invisibleBlockGroup;

// Fantasma
var ghost, ghostImg;

// Sons do jogo
var spookySound;

function preload() {
  // Carrega as imagens
  towerImg = loadImage("tower.png");
  doorImg = loadImage("door.png");
  climberImg = loadImage("climber.png");
  ghostImg = loadImage("ghost-standing.png");

  // Carrega o som de fundo
  spookySound = loadSound("spooky.wav");
}

function setup() {
  createCanvas(600, 600);

  // Toca o som de fundo em loop
  spookySound.loop();

  // Cria a torre
  tower = createSprite(300, 300);
  tower.addImage("tower", towerImg);
  tower.velocityY = 1;

  // Cria o fantasma
  ghost = createSprite(200, 200, 50, 50);
  ghost.scale = 0.3;
  ghost.addImage("ghost", ghostImg);

  // Inicializa os grupos de portas e obstáculos
  doorsGroup = new Group();
  climbersGroup = new Group();
  invisibleBlockGroup = new Group();

  // Estado de jogo
  gameState= "PLAY";
}

function draw() {
  background(0);

    // Desenha os sprites na tela  
    drawSprites();

  // Chama a função PLAY se o estado do jogo for "PLAY"
  if (gameState == "PLAY") {
    PLAY();
  }

  // Chama a função END se o estado do jogo for "END"
  if (gameState == "END") { 
    END(); 
  }
   

}

function PLAY() {
  // Atualizando o cenário
    if (tower.y > 400) {
      tower.y = 300;
    }

  // Movimentação para a esquerda
      if (keyDown("left_arrow")) {
        ghost.x = ghost.x - 3;
      }
  
      // Movimentação para a direita
      if (keyDown("right_arrow")) {
        ghost.x = ghost.x + 3;
      }
  
      // Pulo
      if (keyDown("space")) {
        ghost.velocityY = -10;
      }  
  
      // Aplica gravidade ao fantasma
      ghost.velocityY = ghost.velocityY + 0.8;
  
      // Verifica colisões
      if (climbersGroup.isTouching(ghost)) {
        ghost.velocityY = 0;
      }
  
      // Fim de jogo se o fantasma cair ou colidir com um bloco invisível
      if (invisibleBlockGroup.isTouching(ghost) || ghost.y > 600) {
        gameState = "END";
      }
  
      // Gera as portas e obstáculos
      spawnDoors();
  }
  

  function END() {
    // Deixando o fantasma invisivel
      ghost.visible= false;

    //Criando o texto de fim de jogo
        stroke("yellow");
        fill("yellow");
        textSize(30);
        text("Fim de Jogo, pressione R para reiniciar", 30,250)
    
    // Reinicia o jogo quando o botão de restart é pressionado
      if (keyDown("r")) {
        reset();
      }
    }
    
    function spawnDoors() {
      if (frameCount % 240 === 0) {
        // Cria uma porta, um escalador e um bloco invisível
        var door = createSprite(200, -50);
        var climber = createSprite(200, 10);
        var invisibleBlock = createSprite(200, 15,100,20);
        invisibleBlock.visible= false
        // Configura os sprites
        door.x = Math.round(random(120, 400));
        climber.x = door.x;
        invisibleBlock.x = door.x;
    
        // Adiciona as imagens
        door.addImage(doorImg);
        climber.addImage(climberImg);
    
        // Define a velocidade
        door.velocityY = 1;
        climber.velocityY = 1;
        invisibleBlock.velocityY = 1;
    
        // Define o tempo de vida
        door.lifetime = 800;
        climber.lifetime = 800;
        invisibleBlock.lifetime = 800;
    
        // Adiciona aos grupos
        doorsGroup.add(door);
        climbersGroup.add(climber);
        invisibleBlockGroup.add(invisibleBlock);
      }
    }
    
function reset() {
  // Deixando o fantasma visivel
  ghost.visible= true;

  // Reseta o estado do jogo para "PLAY"
  gameState = "PLAY";

  // Reposiciona o fantasma
  ghost.x = 200;
  ghost.y = 200;
  ghost.velocityY = 0;

  // Reposiciona a torre
  tower.y = 300;

  // Destroi todos os obstáculos
  climbersGroup.destroyEach();
  invisibleBlockGroup.destroyEach();
  doorsGroup.destroyEach();

  // Reinicia o som
  spookySound.stop();
  spookySound.loop();

}

Posts Similares

matter

Como Criar Simulações Físicas com Matter.js

Porisabellabeatriz1603@gmail.com

O Matter.js é uma biblioteca JavaScript que permite criar simulações físicas realistas em 2D. Com ela você pode: Criar corpos com propriedades físicas (peso, atrito, elasticidade) Simular colisões e interações entre objetos Desenvolver jogos e experiências interativas Exemplo Prático: Simulação de Corpos Físicos Aqui está a animação que usaremos como referência: https://youtu.be/FmlhiIxjpSo Passo 1: Configurando…

space invaders

Criando o Space Invaders – Tutorial em JavaScript

Porisabellabeatriz1603@gmail.com

Space Invaders é um clássico jogo de arcade lançado em 1978, desenvolvido por Tomohiro Nishikado. No jogo, o objetivo é controlar uma nave espacial que se move horizontalmente na parte inferior da tela, atirando em uma formação de invasores alienígenas que descem gradualmente. É um marco da indústria dos videogames, e sua recriação em JavaScript…

HORTA COM SPRITES- Exercício JavaScript

Porisabellabeatriz1603@gmail.com

Aprender JavaScript pode ser uma experiência empolgante e gratificante, especialmente quando combinada com a criação de projetos práticos. Neste exercício, vamos desenvolver um jogo de horta, onde você vai praticar o uso de coordenadas cartesianas. Ao longo do processo, você não apenas entenderá os fundamentos das coordenadas e da geometria, mas também aplicará conceitos de…

framecount

O que é frameCount no p5.js?

Porisabellabeatriz1603@gmail.com

No p5.js, o framecount (ou frameCount em código) é uma variável interna que conta o número de quadros (frames) que foram renderizados desde o início da execução do programa. Ele é útil para controlar ou sincronizar eventos ao longo do tempo em uma animação ou simulação. Características do frameCount Incremento automático: O frameCount é incrementado automaticamente pelo p5.js a cada quadro…

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *