5
respostas

[Dúvida] O código colidiu esta errado, jogo Pong no p5 Js web, estou no aguardo.

Aqui esta meu código inteiro:

//variáveis da bolinha let xBolinha = 300; let yBolinha = 200; let diametro = 22; let raio = diametro / 2 ;

//velocidade da bolinha let velocidadeXBolinha = 6; let velocidadeYBolinha = 6;

//variáveis da raquete let xRaquete = 5; let yRaquete = 150; let raqueteComprimento = 10; let raqueteAltura = 90;

//variáveis do oponente let xRaqueteOponente = 585; let yRaqueteOponente = 150; let velocidadeYOponente;

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

function draw() { background(0); mostraBolinha(); movimentaBolinha(); verificaColisaoBorda(); mostraRaquete(xRaquete, yRaquete); movimentaMinhaRaquete(); //verificaColisaoRaquete(); mostraRaquete(xRaqueteOponente, yRaqueteOponente); movimentaRaqueteOponente(); colisaoRaqueteOponenteBiblioteca();

}

function mostraBolinha(){ circle(xBolinha, yBolinha, diametro); }

function movimentaBolinha(){ xBolinha += velocidadeXBolinha; yBolinha += velocidadeYBolinha; }

function verificaColisaoBorda(){ if (xBolinha + raio> width || xBolinha - raio< 0){ velocidadeXBolinha *= -1; } if (yBolinha + raio> height || yBolinha - raio < 0){ velocidadeYBolinha *= -1; } }

function mostraRaquete(x,y){ rect(x, y, raqueteComprimento, raqueteAltura); }

function movimentaMinhaRaquete(){ if (keyIsDown(UP_ARROW)){ yRaquete -= 10; } if (keyIsDown(DOWN_ARROW)){ yRaquete += 10; } }

function verificaColisaoRaquete(){ if (xBolinha - raio < xRaquete + raqueteComprimento && yBolinha - raio < yRaquete + raqueteAltura && yBolinha + raio > yRaquete){ velocidadeXBolinha *= -1; } }

function colisaoRaqueteOponenteBiblioteca(){ colidiu = collideRectCircle(xRaqueteOponente,yRaqueteOponente,raqueteComprimento,raqueteAltura,xBolinha,yBolinha,raio);

if (colidiu){ velocidadeXBolinha *= -1;

}

}

function movimentaRaqueteOponente(){ velocidadeYOponente = yBolinha - yRaqueteOponente - raqueteComprimento /2 - 30; yRaqueteOponente += velocidadeYOponente;

}

5 respostas

Olá, Joaquim. Tudo bem?

Fiz uma alteração no seu código e ficou assim:

//variáveis da bolinha 
let xBolinha = 300; 
let yBolinha = 200; 
let diametro = 22; 
let raio = diametro / 2 ;

//velocidade da bolinha 
let velocidadeXBolinha = 6; 
let velocidadeYBolinha = 6;

//variáveis da raquete 
let xRaquete = 5; 
let yRaquete = 150; 
let raqueteComprimento = 10; 
let raqueteAltura = 90;

//variáveis do oponente 
let xRaqueteOponente = 585; 
let yRaqueteOponente = 150; 
let velocidadeYOponente;

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

function draw() { 
  background(0); 
  mostraBolinha(); 
  movimentaBolinha(); 
  verificaColisaoBorda(); 
  mostraRaquete(xRaquete, yRaquete); 
  movimentaMinhaRaquete(); 
  //verificaColisaoRaquete(); 
  mostraRaquete(xRaqueteOponente, yRaqueteOponente);
  movimentaRaqueteOponente(); 
  colisaoRaqueteOponenteBiblioteca(xRaquete,yRaquete);
  colisaoRaqueteOponenteBiblioteca(xRaqueteOponente, yRaqueteOponente);

}

function mostraBolinha(){ 
  circle(xBolinha, yBolinha, diametro); 
}

function movimentaBolinha(){
  xBolinha += velocidadeXBolinha; 
  yBolinha += velocidadeYBolinha; 
}

function verificaColisaoBorda(){
  if (xBolinha + raio> width || xBolinha - raio< 0){
    velocidadeXBolinha *= -1; 
  } if (yBolinha + raio> height || yBolinha - raio < 0){ 
      velocidadeYBolinha *= -1; } }

function mostraRaquete(x,y){ 
  rect(x, y, raqueteComprimento, raqueteAltura);
}

function movimentaMinhaRaquete(){ 
  if (keyIsDown(UP_ARROW)){ 
    yRaquete -= 10;
  } if (keyIsDown(DOWN_ARROW)){ 
    yRaquete += 10; 
  } 
}

function verificaColisaoRaquete(){ 
  if (xBolinha - raio < xRaquete + raqueteComprimento && yBolinha - raio < yRaquete + raqueteAltura && yBolinha + raio > yRaquete){
    velocidadeXBolinha *= -1; 
  } 
}

function colisaoRaqueteOponenteBiblioteca(x,y){ 
  colidiu =  collideRectCircle(x,y,raqueteComprimento,raqueteAltura,xBolinha,yBolinha,raio);

if (colidiu){ velocidadeXBolinha *= -1;

}

}

function movimentaRaqueteOponente(){ velocidadeYOponente = yBolinha - yRaqueteOponente - raqueteComprimento /2 - 30; yRaqueteOponente += velocidadeYOponente;

}

Na função colisaoRaqueteOponenteBiblioteca, passei dois parametros, x e y. Você chama eles no lugar da posição x e y de cada raquete. Quando você coloca essa função dentro do seu draw, você coloca duas vezes, passando dois parametros que vão entrar no lugar de x e y. Em uma chamada você passa os parametros da sua raquete (xRaquete e yRaque) e no outro os parametros da raquete do oponente (xRaqueteOponente e yRaqueteOponente). Feito isso, a colisão ocorre das duas raquetes.

Espero ter ajudado ;)

Não deu certo, coloquei exatamente como foi pedido

Seguem os códigos

//variáveis da bolinha let xBolinha = 300; let yBolinha = 200; let diametro = 22; let raio = diametro / 2 ;

//velocidade da bolinha let velocidadeXBolinha = 6; let velocidadeYBolinha = 6;

//variáveis da raquete let xRaquete = 5; let yRaquete = 150; let raqueteComprimento = 10; let raqueteAltura = 90;

let colidiu = false

//variáveis do oponente let xRaqueteOponente = 585; let yRaqueteOponente = 150; let velocidadeYOponente;

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

function draw() { background(0); mostraBolinha(); movimentaBolinha(); verificaColisaoBorda(); mostraRaquete(xRaquete, yRaquete); movimentaMinhaRaquete(); //verificaColisaoRaquete(); mostraRaquete(xRaqueteOponente, yRaqueteOponente); movimentaRaqueteOponente(); colisaoRaqueteOponenteBiblioteca(xRaquete,yRaquete); colisaoRaqueteOponenteBiblioteca(xRaqueteOponente, yRaqueteOponente);

}

function mostraBolinha(){ circle(xBolinha, yBolinha, diametro); }

function movimentaBolinha(){ xBolinha += velocidadeXBolinha; yBolinha += velocidadeYBolinha; }

function verificaColisaoBorda(){ if (xBolinha + raio> width || xBolinha - raio< 0){ velocidadeXBolinha *= -1; } if (yBolinha + raio> height || yBolinha - raio < 0){ velocidadeYBolinha *= -1; } }

function mostraRaquete(x,y){ rect(x, y, raqueteComprimento, raqueteAltura); }

function movimentaMinhaRaquete(){ if (keyIsDown(UP_ARROW)){ yRaquete -= 10; } if (keyIsDown(DOWN_ARROW)){ yRaquete += 10; } }

function verificaColisaoRaquete(){ if (xBolinha - raio < xRaquete + raqueteComprimento && yBolinha - raio < yRaquete + raqueteAltura && yBolinha + raio > yRaquete){ velocidadeXBolinha *= -1; } }

function colisaoMinhaRaqueteBiblioteca(){ collideRectCircle(xRaquete,yRaquete,raqueteComprimento,raqueteAltura,xBolinha,yBolinha,raio); if (colidiu){ velocidadeXBolinha *= -1;

} }

function colisaoRaqueteOponenteBiblioteca(x,y){ colidiu = collideRectCircle(x,y,raqueteComprimento,raqueteAltura,xBolinha,yBolinha,raio);

if (colidiu){ velocidadeXBolinha *= -1;

}

}

function movimentaRaqueteOponente(){ velocidadeYOponente = yBolinha - yRaqueteOponente - raqueteComprimento /2 - 30; yRaqueteOponente += velocidadeYOponente;

}

A bolinha não colidiu com as raquetes? Coloca a velocidade da bolinha em 2 que vai conseguir ver melhor. Copiei seu código e tudo funcionou corretamente. Lembrando que para fazer a raquete se movimentar, após iniciar o jogo, você precisa clicar dentro do quadrado para enivar os comandos do teclado.

Bom dia é que o código "colidiu" está paralisando todo o jogo não deixando fazer nada, e se eu tirar o código volta a funcionar mas sem a colisão.

Compartilha aqui o link do seu código no p5.js