Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

[Dúvida] Minha bolinha atravessa o infinito atrás da minha raquete e depois volta

Um dos problemas que estou tendo é o seguinte: em certos momentos, a minha bolinha atravessa o infinito atrás da minha raquete, boa parte das vezes atravessando a própria raquete. Fiquei analisando meu código e comparando com o código do instrutor, mas ainda não compreendi o que fiz de errado. Alguém pode me explicar o que provavelmente eu fiz?

//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 minha raquete
let xMyRaquete = 5;
let yMyRaquete = 150;
let wMyRaquete = 10;
let hMyRaquete = 90;

//variáveis da raquete do oponente
let xRaqueteOp = 585;
let yRaqueteOp = 150;
let velocidadeYOp;

//placar do jogo
let meusPontos = 0;
let pontosOponente = 0;


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

function draw() {
  background(0);
  mostraBolinha ();
  moveBolinha ();
  verifyBordaBolinha ();
  mostraMyRaquete (xMyRaquete, yMyRaquete);
  moveMyRaquete ();
  verifyMyRaqueteBolinha ();
  mostraMyRaquete (xRaqueteOp, yRaqueteOp);
  moveRaqueteOp ();
  verifyRaqueteOp ();
  incluiPlacar ();
  marcaPontos ();

}

function mostraBolinha () {
  circle(xBolinha, yBolinha, diametro);
}
function moveBolinha () {
   xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;
}
function verifyBordaBolinha () {
  if (xBolinha + raio > width ||
     xBolinha < 0 + raio) {
    velocidadeXBolinha *= -1;
  }
  if (yBolinha + raio > height ||
     yBolinha < 0 + raio){
    velocidadeYBolinha *= -1;
  }
}
function mostraMyRaquete (x,y) {
   rect (x, y, wMyRaquete, hMyRaquete);
}

function moveMyRaquete () {
  if (keyIsDown (UP_ARROW)) {
    yMyRaquete -= 10;
  }
  if (keyIsDown (DOWN_ARROW)) {
    yMyRaquete += 10;
  }
}
function verifyMyRaqueteBolinha () {
  if (xBolinha - raio < xMyRaquete + wMyRaquete&& yBolinha - raio < yMyRaquete + hMyRaquete&& yBolinha - raio > yMyRaquete) {
    velocidadeXBolinha *= -1;
  }
}
function moveRaqueteOp () {
  velocidadeYOp = yBolinha - yRaqueteOp - wMyRaquete /2 - 50;
  yRaqueteOp += velocidadeYOp
}
function verifyRaqueteOp () {
  if (xBolinha + raio > xRaqueteOp + wMyRaquete&&yBolinha + raio < yRaqueteOp + hMyRaquete&& yBolinha + raio > yRaqueteOp) {
    velocidadeXBolinha *= -1
  }
}
function incluiPlacar () {
  fill(500)
  text(meusPontos, 200, 26)
  text(pontosOponente, 400, 26)
}

function marcaPontos () {
  if (xBolinha > 590) {
    meusPontos += 1
  }
  if (xBolinha < 10) {
    pontosOponente += 1
  }
}
4 respostas
solução!

Olá, Isadora! Tudo bem?

Verifiquei seu código e está funcionando corretamente. Fiz até um gif do seu jogo funcionando.

Talvez seja algo no seu navegador.

O gif mostra o jogo pong funcionando

Fico à disposição!

Bons estudos!

Oi, Isadora! Tudo bem?

Testando em diferentes navegadores o jogo pode apresentar diferentes comportamentos, podemos, então, alterar o navegador e testar novamente o nosso jogo.

Entretanto, caso o problema persista, para resolvermos a nossa questão podemos limitar o movimento da raquete para que não ultrapasse as extremidades do jogo.

Para isso, devemos fazer algumas pequenas alterações na função moveMyRaquete, deixando-a da seguinte forma:

function moveMyRaquete () {

  if(yMyRaquete > 0){
     if (keyIsDown (UP_ARROW)) {
       yMyRaquete -= 10;
      }
     if (keyIsDown (DOWN_ARROW)) {
       yMyRaquete += 10;
     }
   } 
  else {   
   yMyRaquete += 10;
  }

  if(yMyRaquete < 310){
    if (keyIsDown (UP_ARROW)) {
      yMyRaquete -= 10;
    }
    if (keyIsDown (DOWN_ARROW)) {
      yMyRaquete += 10;
    }
  } 
 else {
   yMyRaquete -= 10;
  } 
}

A lógica do nosso código consiste agora em: se a posição y da raquete (yMyRaquete) for maior que 0 (limite superior do nosso jogo), então o nosso comando será executado. Porém, caso não, adiciona-se 10 à yMyRaquete, não permitindo que ela ultrapasse aquela extremidade, pois sempre ao tocá-la o comando a movera a raquete para baixo. Uma lógica semelhante é aplicada quando a raquete toca o limite inferior do nosso jogo.

Espero ter ajudado, caso surja alguma dúvida fique à vontade em comunicar, estou à disposição!

Um forte abraço e bons estudos!

Caso este post tenha te ajudado, por favor, marcar como solucionado ✓

Obrigada, gente <3

quando eu coloco o "else" parece: Unexpected token 'else' at /sketch.js:73:3

//variaveis da Bolinha

let xBolinha =300 let yBolinha = 200 let diametro = 15 let raio = diametro / 2

//velocidade da Bolinha let velocidadexBolinha = 8 let velocidadeyBolinha = 8

//variaveis da raquete let xRaquete = 5 let yRaquete = 150 let comprimento =10 let altura = 90 //variaveis do oponente let xRaqueteoponente = 581 let yRaqueteoponente = 150 let velocidadeyOponente; //placar do jogo let meusPontos = 0; let pontosOponente = 0;

let colidiu = false

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

function draw() { background(0); mostraBolinha() movimentaBolinha() colisaoBolinha() mostraRaquete (xRaquete, yRaquete) movimentoRaquete() //verifica colisao colisaoRaquete() Verificacolisaoraquete(xRaquete, yRaquete) mostraRaquete (xRaqueteoponente, yRaqueteoponente ) movimentaRaqueteoponente() Verificacolisaoraquete(xRaqueteoponente, yRaqueteoponente ) incluiPlacar (); marcaPonto()}

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

function movimentaBolinha() { xBolinha += velocidadexBolinha yBolinha += velocidadeyBolinha}

function colisaoBolinha() {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, comprimento, altura)}

function movimentoRaquete(){ if (keyIsDown (UP_ARROW)) yRaquete -= 10

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

if(yMyRaquete < 310){ if (keyIsDown (UP_ARROW)) { yRaquete -= 10; } if (keyIsDown (DOWN_ARROW)) { yRaquete += 10; } } else { yRaquete -= 10; }

function colisaoRaquete(){ if (xBolinha - raio < xRaquete + comprimento && yBolinha - raio < yRaquete + altura && yBolinha + raio > yRaquete ) velocidadexBolinha *= -1 }

function Verificacolisaoraquete(x,y){ colidiu = collideRectCircle(x,y, comprimento, altura, xBolinha, yBolinha, raio); if (colidiu){ velocidadexBolinha *= -1; } }

function movimentaRaqueteoponente (){ velocidadeyOponente = yBolinha - yRaqueteoponente - comprimento / 2 -89 yRaqueteoponente += velocidadeyOponente}

function incluiPlacar() { fill(255); text(meusPontos, 278, 26); text(pontosOponente, 321, 26); }

function marcaPonto() { if (xBolinha > 590) { meusPontos += 1; } if (xBolinha < 10) { pontosOponente += 1; } }