Entrar Ainda não tem acesso?
1
resposta

O programa não evidencia nenhum erro, mas não ocorre a colisão entre o circulo e o retângulo, por quê?

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 Importando outra biblioteca

por João Pedro Serpa Matos
| 40.2k xp | 10 posts
let xCirculo = 320
let yCirculo = 238
let diametroCirculo = 24
let raio = diametroCirculo / 2

let movimentoXCirculo = 8;
let movimentoYCirculo = 8;
let velocidadeRetan = 7

let xRetanguloOponente = 580
let yRetanguloOponente = 150
let velocidadeRetanOponente = 7

let colisao = false

let xRetangulo = 5
let yRetangulo = 150
let alturaRetan = 110
let larguraRetan = 15

function recocheteRetanBiblioteca() {

  colisao = collideRectCircle(xRetangulo, yRetangulo,alturaRetan , larguraRetan, xCirculo, yCirculo, raio);
  if(colisao) {

    movimentoXCirculo * -1
  }
}

function movimentaRetanOponente() {

  velocidadeRetanOponente = yCirculo - yRetanguloOponente - larguraRetan / 4 - 20
  yRetanguloOponente += velocidadeRetanOponente
}

function recocheteRetan() {

  if(xCirculo - raio < xRetangulo + larguraRetan && yCirculo - raio < yRetangulo + alturaRetan && yCirculo + raio > yRetangulo - alturaRetan) {

    movimentoXCirculo *= -1
  }
}

function formaRetan(x, y) {

  rect (x, y, larguraRetan, alturaRetan) 
}

function movimentaRetan() {
  if(keyIsDown(UP_ARROW)) {

    yRetangulo -= velocidadeRetan}

  if(keyIsDown(DOWN_ARROW)) {

    yRetangulo += velocidadeRetan}
  }

function formaCirculo() {

  circle(xCirculo, yCirculo, diametroCirculo);
}

function movimentoCirculo() {

  xCirculo += movimentoXCirculo; 
  yCirculo += movimentoYCirculo;
}

function recocheteBorda () {

   if(xCirculo + raio > width || xCirculo - raio < 0) {

    movimentoXCirculo *= -1

  }

  if(yCirculo + raio > height || yCirculo - raio < 0) {

  movimentoYCirculo *= -1    
  }
}

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

function draw() {
  background(0);
  formaCirculo();
  movimentoCirculo();
  recocheteBorda();
  formaRetan(xRetangulo, yRetangulo);
  movimentaRetan();
  //recocheteRetan();
  formaRetan(xRetanguloOponente, yRetanguloOponente);
  movimentaRetanOponente();
  recocheteRetanBiblioteca();
}

function recocheteRetanBiblioteca() {

  colisao = collideRectCircle(xRetangulo, yRetangulo, alturaRetan, larguraRetan, xCirculo, yCirculo, raio);
  if(colisao) {

    movimentoXCirculo * -1
  }
}
1 resposta
por Camila Pessôa
| 920.3k xp | 1928 posts
Alura Scuba Team

Olá, João! Tudo bom com você?

Testei seu código e pude observar que há alguns problemas relacionados a escrita mesmo.

Um exemplo pode ser encontrado no cálculo que atribui o comportamento de "volta" da bolinha na função recocheteRetanBiblioteca() , lá está movimentoXCirculo * -1 no lugar de movimentoXCirculo *= -1. Pode parecer bobagem mas a falta do sinal de igualdade impede que a instrução seja enviada corretamente e o programa não entende o comando.

Além disso você alterou alguns valores e isso demanda também alteração nos cálculos. Dessa maneira você pode testar a colisão com o diametro e não com o raio (testei aqui e funcionou)

Vou deixar o projeto do instrutor para você comparar e tirar algumas dúvidas. Caso continue com problemas, fico à disposição:

//variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;
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;

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

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  mostraRaquete();
  movimentaMinhaRaquete();
  verificaColisaoRaquete();
}

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(){
  rect(xRaquete, yRaquete, 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;
  }
}

Fico à disposição, tudo bem?

Um abraço e bons estudos!