Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

problema com a colisão da bolinha com a borda e com a raquete.

Referente ao curso Lógica de programação: comece em lógica com o jogo Pong e JavaScript, no capítulo Criando minha raquete no jogo e atividade Colisão com a raquete

por Estudante
| 25.7k xp | 4 posts

não consigo fazer a bolinha colidir do jeito certo com as bordas sem ter que dividir o raio por 2. Também não consigo fazer com que a bolinha colida com a raquete, é como se ela reconhecesse que a raquete está um pouco a frente. Não sei se a duvida ficou clara, mas preciso muito de ajuda. 

//variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let raio = 20;

//variáveis da velicide da bolinha
let velocidadeXDaBolinha = 5;
let velocidadeYDaBolinha = 6;

//varáveis da raquete
let xRaquete = 5;
let yRaquete = 150;
let larguraRaquete = 10;
let alturaRaquete = 90;

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

function desenhaBolinha() {
  circle(xBolinha, yBolinha, raio);
}
function movimentaBolinha() {
  xBolinha += velocidadeXDaBolinha;
  yBolinha += velocidadeYDaBolinha;
}
function verificaBorda() {
  if (xBolinha + raio / 2 > width || xBolinha - raio / 2 < 0) {
    velocidadeXDaBolinha *= -1;
  }

  if (yBolinha + raio / 2 > height || yBolinha - raio / 2 < 0) {
    velocidadeYDaBolinha *= -1;
  }
}

function mostraRaquete() {
  rect(xRaquete, yRaquete, larguraRaquete, alturaRaquete);
}

function movimentaRaquete() {
  if (keyIsDown(UP_ARROW)) {
    yRaquete -= 10;
  }
  if (keyIsDown(DOWN_ARROW)) {
    yRaquete += 10;
  }
}
function vericaColisaoRaquete() {
 if(xBolinha - raio < xRaquete + alturaRaquete)
 {
   velocidadeXDaBolinha *= -1;
 } 

}


function draw() {
  background(0);
  desenhaBolinha();
  movimentaBolinha();
  verificaBorda();
  mostraRaquete();
  movimentaRaquete();
  vericaColisaoRaquete();
}

`

2 respostas
solução!
por Aline Braga
| 165k xp | 1 posts
HelpDesk

Oi Yuri, tudo bem?

Se entendi bem sua dúvida, o erro está em não informar o diâmetro da sua bolinha. Desta forma, o sistema não sabe exatamente o tamanho/extensão dela e a função de colisão, não funciona.

Tente aplicar o exemplo apresentado no curso:

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

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

if (yBolinha + raio> height || yBolinha - raio < 0){ velocidadeYBolinha *= -1 }

Espero ter ajudado =D

por Khayo Barbosa Lima
| 78.1k xp | 7 posts
QA e UX

A minha não está colidindo com a borda da raquete.

//Variaveis Bolinha
var xBolinha = 300;
var yBolinha = 200;
var diametro = 15;
var raio = diametro / 2;

//Variaveis da Velocidade
var velocidadeXbolinha = 6;
var velocidadeYbolinha = 6;

//Variaveis criação da Raquete
var xRaquete = 5;
var yRaquete = 150;
var raqueteComprimento = 10;
var raqueteAltura = 70;

//Variaveis do Oponente.
var xRaqueteOponente = 585;
var yRaqueteOponente = 150;

var velocidadeYoponente;

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

function draw() {
  background(0);

  mostraBolinha();
  movimentaBolinha();
  verificaColisao();
  mostraRaquete(xRaquete, yRaquete);
  movimentaRaquete();
  verificaColisaoRaquete();
  mostraRaqueteOponente(xRaqueteOponente, yRaqueteOponente);
  movimentaRaqueteOponente();
  verificaColisaoRaqueteOponente();

}

function bolinhaNaoFicaPresa(){
    if (XBola - raio < 0){
    XBola = 23
    }
}

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

function movimentaBolinha(){
  xBolinha += velocidadeXbolinha;
  yBolinha += velocidadeYbolinha;
}

function verificaColisao(){

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

  if (yBolinha + raio > height || yBolinha - raio<0){
    velocidadeYbolinha *= -1;

  }
}

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

function movimentaRaquete(){
  if(keyIsDown(UP_ARROW)) {
    yRaquete -= 10;
  }

  if(keyIsDown(DOWN_ARROW)){
    yRaquete += + 10;
  }
}

function verificaColisaoRaquete(){
  if(xBolinha < xRaquete + raqueteComprimento 
     && yBolinha - raio < 
       yRaquete + raqueteAltura
         && yBolinha + raio > yRaquete){

    velocidadeXbolinha *= -1;
  }
}

function verificaColisaoRaqueteOponente(){
  if (xBolinha + raio > xRaqueteOponente 
      && yBolinha + raio <
        yRaqueteOponente + raqueteAltura 
          && yBolinha + raio > yRaquete) {

    velocidadeXbolinha *= -1;
  } 
}


function movimentaRaqueteOponente(){

  velocidadeYoponente = yBolinha - yRaqueteOponente - raqueteComprimento / 2 -30;
  yRaqueteOponente += velocidadeYoponente;
}