Se sua bola marca toda vez 3 ou mais pontos quando atinge a borda.

Olá pessoal, Tudo certo?

Quando acabei o capitulo 04: Placar e ponto, da Aula 4 do curso de Jogos clássicos parte 1: Iniciando no Javascript com Pong. Vi que programa estava marcando 3 pontos quando a bolinha atinge a borda, tanto para mim quando para meu oponente. Para solucionar esse problema eu achei duas opções. 1: O tamanho do diâmetro da bolinha esta muito pequeno. É só aumentar o diâmetro da bolinha de pouco em pouco até começar a marca um ponto. E se não quiser alterar o valor do diâmetro da sua bolinha, então faça isso...

2: Eu percebi que o valor estabelecido para quando a bolinha passasse da “linha de marca ponto” era muito alto ou baixo. Por exemplo: Se minha tela tem 600px e na minha função de marca ponto eu descrevo que toda vez que a bolinha passar de 595px deve marca um ponto. Devido a minha bolinha ser pequena, toda vez que a bolinha passar da linha para marca ponto, ela entra e sai mais de 3px. Então o programa vai contar ponto de acordo de quanto px a bolinha “passeou” depois da linha de marca ponto. Então é só aumente/diminua 2px para a linha de marca ponto que a bolinha tem que passar.

No meu código a seguir, eu comentei //OPÇÃO 1, E OPÇÃO 2 para você ver onde estou me referindo. Obrigado por ler, espero ter ajudado.

// forma, e posição da Bola
let xBolinha = 300;
let yBolinha = 200;
//OPÇÃO 1: AUMENTE O DIAMETRO
let diametro = 15;
let raio = diametro/2;

//velocidade da Bola
let velocidadeXBolinha = 2;
let velocidadeYBolinha = 2;

//forma e posição da minha Raquete
let xRaquete = 5;
let yRaquete = 150;
let raqueteComprimento = 10;
let raqueteAltura = 90;

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

//Variaveis do Placar
let meusPontos = 0;
let pontosDoOponente = 0;

let colidiu = false;

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

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



}

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 movimentaRaqueteOponente(){
 velocidadeYOponente = yBolinha - yRaqueteOponente - raqueteComprimento/2 -30;
  yRaqueteOponente += velocidadeYOponente;
}

function colisaoRaqueteBiblioteca(x, y) {
    colidiu = collideRectCircle(x, y, raqueteComprimento, raqueteAltura, xBolinha, yBolinha, raio);
    if (colidiu) {
        velocidadeXBolinha *= -1;
    }
}

function incluiPlacar(){
  fill (255);
  text (meusPontos, 270, 26);
  text (pontosDoOponente, 330, 26);
}

function marcaPonto() {
// OPÇÃO 2: AUMENTE O VALOR AQUI. 
    if (xBolinha > 592) {
        meusPontos += 1;
    }
//OPÇÃO 2:DIMINUA O VALOR AQUI.
    if (xBolinha < 8) {
        pontosDoOponente += 1;
    }
}