Jogo de nave | Lógica de programação: comece em lógica com o jogo Pong e JavaScript

Inspirado no curso de Pong comecei a tentar fazer um jogo de nave inspirado em Space Invaders. Por enquanto estou tentando apenas criar uma nave e fazer com que ela solte um projetil que, ao colidir com um satélite, faça desparecer da tela o satélite e o projetil. Além de compartilhar essa ideia, gostaria de duas ajudas para seguir construindo o jogo. Estou com problemas para conseguir fazer a colisão entre o projetil e o satelite. Não consegui fazer ela funcionar nem escrevendo a colisão na unha, nem usando a biblioteca pronta. Deixo aqui as 2 tentativas. Outra coisa que não funcionou foi apertar uma vez um botão para o tiro sair voando. Então precisei usar a função em que o botão fica sendo pressionado.

colisão na Unha

let xNave = (260);
let yNave = (380);
let alturaNave = (7);
let comprimentoNave = (80);
let yProjetil = (350);
let xProjetil;
let diametroProjetil = (15) ;
let velocidadeDoTiro = (1);
let xSatelite = (30);
let ySatelite = (30);
let larguraSatelite = (100);
let alturaSatelite = (30);

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

function draw() {
  background(100);

  mostraNave();
  mostraSatelite();

  movimentaNave ();

  mostraTiro();

 colisao ();

}

function mostraNave(){
 rect (xNave,yNave,comprimentoNave,alturaNave);   
}

function movimentaNave(){
  if (keyIsDown (RIGHT_ARROW) && xNave<480) {
    xNave += 9;
  }

  else if (keyIsDown (LEFT_ARROW) && xNave>40){
    xNave -=9;
  }
}

function mostraTiro(){

  // a ideia era precisa apertar o botão apenas uma vez, mas não funcionou
  // if (key === 'UP_ARROW') {

  if (keyIsDown (UP_ARROW)) {
    let xProjetil =  (xNave+40);
    circle( xProjetil,yProjetil,diametroProjetil);
    yProjetil -= velocidadeDoTiro;

   }
}

function mostraSatelite (){
  rect (xSatelite,ySatelite,larguraSatelite,alturaSatelite)
}

function colisao (){
  if ( yProjetil === ySatelite + 27){

 // minha ideia inicial era incluir isso aqui na condição:
 // && xProjetil < xSatelite + 300 && xProjetil > xSatelite ) {  
// Mas como não estava funcionando, essa parte da colisão está comentada. Pois pelo menos consigo fazer a explosão acontecer quando o projetil atinge  // a altura do satelite com esse bloco.

diametroProjetil = 0;
xSatelite = 0;
ySatelite = 0;
larguraSatelite = 0;
alturaSatelite = 0;

  }
}

E essa foi a tentativa com a biblioteca:

let xNave = (260);
let yNave = (380);
let alturaNave = (7);
let comprimentoNave = (80);
let yProjetil = (350);
let xProjetil;
let diametroProjetil = (15);
let raioProjetil = diametroProjetil/2
let velocidadeDoTiro = (1);
let xSatelite = (30);
let ySatelite = (30);
let larguraSatelite = (100);
let alturaSatelite = (30);
let colidiu = false;

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

function draw() {
  background(100);

  mostraNave();
  mostraSatelite();

  movimentaNave ();

  mostraTiro();

 colisao ();

}

function mostraNave(){
 rect (xNave,yNave,comprimentoNave,alturaNave);   
}

function movimentaNave(){
  if (keyIsDown (RIGHT_ARROW) && xNave<480) {
    xNave += 9;
  }

  else if (keyIsDown (LEFT_ARROW) && xNave>40){
    xNave -=9;
  }
}

function mostraTiro(){

  // if (key === 'UP_ARROW') {

  if (keyIsDown (UP_ARROW)) {
    let xProjetil =  (xNave+40);
    circle( xProjetil,yProjetil,diametroProjetil);
    yProjetil -= velocidadeDoTiro;

   }
  else {
    yProjetil = 350; 
  }
}

function mostraSatelite (){
  rect (xSatelite,ySatelite,larguraSatelite,alturaSatelite)
}

function colisao (){
 colidiu = collideRectCircle (xSatelite, ySatelite, larguraSatelite, alturaSatelite, xProjetil, yProjetil, raioProjetil);
  if (colidiu){
    diametroProjetil = 0;
    xSatelite = 0;
    ySatelite = 0;
    larguraSatelite = 0;
    alturaSatelite = 0;
  } 
}

Mas nada acontece, o projetil passa ileso.

Fala Iratã, tudo certo?

Peço desculpas pela demora em obter um retorno.

Sobre as suas dúvidas vamos lá.

1° Colisão: Fiz um teste no seu código aqui e notei que quando dispara a bolinha e ela encosta no retângulo ele destrói “desaparece” pelo que notei esta funcionando bem essa função.

2° Sobre o disparo do laser notei que precisa ficar segurando para o laser continuar no caso precisamos fazer alguns ajustes aqui.

Primeiro devemos criar as variáveis globais do disparo.

let imagemLaser “Desenho da bolinha”
let velocidadeLaser = 2.5

Não esquecer da posição do Laser que você configurou já.

Na movimentação da nave e o disparo do laser optei por utilizar a function keyPressed() a função é chamada toda vez que uma tecla é pressionada.

deixei assim para movimento e disparo

// comandos de teclado keyPressed()
function keyPressed() {

  // MOVER NAVE SETAS DIRECIONAIS DO TECLADO
  if(posicaoNave.x <= 850) {
    // AVANCAR ou RECUAR
    if(keyCode === RIGHT_ARROW) {
        posicaoNave.x = posicaoNave.x + velocidadeNave
    }
  }

  if(posicaoNave.x > 0) {
    if(keyCode === LEFT_ARROW) {
        posicaoNave.x = posicaoNave.x - velocidadeNave
    }
  }

// DISPARAR CONTINUAMENTE APOS MOVER A NAVE
//posicoesLaser.push(createVector(posicaoNave.x+44, posicaoNave.y-37))

  // DISPARAR LASER USANDO A BARRA DE ESPACO
  if(keyCode === 32) {    

    let metadeNave = 20 // 25 - (9/2 = 4.5) = 20.5

    if(quantDisparos <= quantMaximaLaser)  {

      posicoesLaser.push(createVector(posicaoNave.x+metadeNave, posicaoNave.y-37))

      // atualizar número de disparos do laser
      atualizaDisparosLaser()

    }

  }

} // fim keyPressed

e por fim a configuração do início do disparo e o fim da tela quando não tocar no satélite.

// DESENHAR O LASER E MOVER
function desenharLaser() {
  //image(imagemLaser, posicaoLaser.x, posicaoLaser.y)

  for(let posicao of posicoesLaser) {
      image(imagemLaser, posicao.x, posicao.y)
  }

}

function moverLaser() {
  //posicaoLaser.y = posicaoLaser.y - 1

  for(let posicao of posicoesLaser) {

    if(posicao.y <= 600 || posicao.y >= -37) {
      posicao.y = posicao.y - velocidadeLaser
    }

  }

}

Com essas alterações no seu jogo o disparo da bolinha vai ficar com um toque na tecla da barra de espaço e continuo sem precisar ficar segurando.

Abaixo vou deixar o link do projeto para você olhar a mecânica funcionando.

Projeto Luis

Qualquer dúvida estou a disposição.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Chegou a hora de transformar