1
resposta

O meu ficou assim

/* Importante informar que eu fiz o código um pouco diferente do professor. 
Quanto à pontuação, a minha bolinha, em um primeiro momento estava marcando ponto de 5 em 5, mas li em alguns posts que isso poderia ser por conta do tamanho. Confesso que não entendi bem o porque, mas realmente quando aumentei o diâmetro da bola, meus problemas se resolveram.

Quanto à raquete 2, eu adicionei um comando no teclado para que eu pudesse jogar com mais alguém.
*/


//variáveis da bolinha
var xBolinha = 300;
var yBolinha = 300;
var diametroBolinha = 30;
var raioBolinha = diametroBolinha/2;

//variáveis de velocidade da bolinha
var velocidadeXBolinha = 4;
var velocidadeYBolinha =4;

//variáveis raquete 1
var xRaquete1 = 5; 
var yRaquete1 = 150;
var raquete1Comprimento = 10;
var raquete1Altura = 90;

//variáveis raquete 2
var xRaquete2 = 585; 
var yRaquete2 = 150;
var raquete2Comprimento = 10;
var raquete2Altura = 90;

//variáveis do placar
var meusPontos = 0;
var pontosDoOponente = 0;

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

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  mostraRaquete1();
  mostraRaquete2();
  movimentaRaquete1 ();
  movimentaRaquete2 ();
  verificaColisaoRaquete1 ();
  verificaColisaoRaquete2 ();
  mostraPlacar();
}

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

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

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

function mostraRaquete1 (){
  rect(xRaquete1, yRaquete1, raquete1Comprimento, raquete1Altura); 
}

function mostraRaquete2 (){
  rect(xRaquete2, yRaquete2, raquete2Comprimento, raquete2Altura); 
}

function movimentaRaquete2 (){
  if(keyIsDown(UP_ARROW)){
    yRaquete2 = yRaquete2 - 5;//quanto menor o y, mais para cima estamos
  }
  if(keyIsDown(DOWN_ARROW)){
    yRaquete2 = yRaquete2 + 5;
  }
}

function movimentaRaquete1 (){
  if(keyIsDown(87)){
    yRaquete1 = yRaquete1 - 5;//quanto menor o y, mais para cima estamos
  }
  if(keyIsDown(83)){
    yRaquete1 = yRaquete1 + 5;
  }
}

function verificaColisaoRaquete1 () {
    if (xBolinha - raioBolinha < xRaquete1 + raquete1Comprimento
        && yBolinha - raioBolinha < yRaquete1 + raquete1Altura
        && yBolinha + raioBolinha > yRaquete1) {
        velocidadeXBolinha *= -1;
    }
}

function verificaColisaoRaquete2 () {
    if (xBolinha + raioBolinha > xRaquete2 
        && yBolinha - raioBolinha < yRaquete2 + raquete2Altura
        && yBolinha + raioBolinha > yRaquete2) {
        velocidadeXBolinha *= -1;
    }//nesse caso tivemos que colocar o xRaquete2 pois ele já é o primeiro ponto onde a bolinha toca
}

function mostraPlacar (){
  fill (255);
  text (meusPontos, 280, 26);
  text (pontosDoOponente, 320, 26);
  if (xBolinha > xRaquete2){
    meusPontos = meusPontos +1;
  }
  if (xBolinha < xRaquete1){
    pontosDoOponente = pontosDoOponente + 1;
  }
}
1 resposta

Fala, Ramon! Tudo bem contigo?

O fato de ter aumentado o tamanho da bolinha e ter resolvido o problema faz muito sentido, pois o que o jogo não contabiliza quando a ponta da bolinha atinge o canto da tela exatamente. Ele verifica o centro da bolinha ;-)

Quando o centro da bolinha ultrapassa a margem que estipulamos no código é que contabiliza os pontos. Por esse motivo que aumentando o tamanho da bolinha, resolveu-se o problema.

Ficou perfeito, Ramon!

Qualquer dúvida é só nos procurar!

Um abraço e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software