2
respostas

[Dúvida] A bola continua atravessando a raquete do meu oponente (não utilizei a biblioteca)

segue o meu código:

//variaveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diamBolinha = 22;
let raio = diamBolinha / 2;

//velocidade da bolinha
let velocidadeXBolinha = 10;
let velocidadeyBolinha = 10;

//variaveis da raquete
let xRaquete = 5;
let yRaquete = 150;
let raqueteComprimento = 10;
let raqueteAltura = 90;

// variaveis do oponente 
let xRaqueteOponente = 585; 
let yRaqueteOponente =150; 
let velocidadeYOponente;

width = 600;
heigth= 400;

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

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


    }

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

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

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

      if (yBolinha + raio > heigth || 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 verificaColisaoRaqueteOponente() {
    if (xBolinha - raio > xRaqueteOponente + raqueteComprimento
        && yBolinha + raio < yRaqueteOponente + raqueteAltura
        && yBolinha + raio > yRaqueteOponente) {
        velocidadeXBolinha *= -1;
    }
}

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

Link do código

Olá Bold, tudo bem com você?

Eu tomei a liberdade para editar o seu tópico e formatar todo o seu código, assim deixando mais fácil a visualização.

Referente ao link que você compartilhou dizendo ser do código, acho que você se confundiu, o que você compartilhou foi um link para apenas testar o seu jogo e não do código. De toda forma eu testei o seu jogo e a bolinha não estar mais atravessando a raquete do oponente, logo imagino que você tenha solucionado esse problema, contudo gostaria de pontuar que o seu projeto está com um pequeno problema chato da bolinha estar ficando presa dentro da raquete do jogador.

E para solucionar esse problema desenvolvi uma função bem simples para isso:

function bolinhaNaoFicaPresa(){
    if (xBolinha - raio <= 0){
    xBolinha = 20;

    } else {

      if (xBolinha - raio >= 588){
        xBolinha = 570;
      }
    }
}

Onde a função bolinhaNaoFicaPresa() apresenta duas condições, sendo cada uma para cada raquete assim fazendo com que não aconteça aquele bug chato.

Acho importante lembrar que caso queira implementar essa função no seu projeto lembre de chamar a função bolinhaNaoFicaPresa() na função draw.

Espero que eu tenha lhe ajudado de alguma forma, e caso ainda tenha algum problema com o seu código compartilhe o link do projeto para que eu consiga visualizar melhor o problema, vou estar deixando o passo a passo de como estar fazendo isso.

Abra o menu file na parte superior direita da tela e selecione a opção share:

Recorte de captura de tela do P5js. O menu file foi selecionado, e abaixo a terceira opção, share, está destacada em rosa

E então copie o link da opção edit, e cole aqui no fórum:

Recorte de captura de tela do p5js. Uma janela cinza com título Share, e logo abaixo, o nome do projeto. Há três opções de link. Embeb, Fullscreen e Edit. A última, edit, está destacada em vermelho

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