1
resposta

Meu placar não funciona

Por algum motivo o placar só funciona quando eu comento as funções racketCollision();

// Dimensões da bola.
var xBall = 300
var yBall = 200
var ballDiameter = 17
var ray = ballDiameter / 2;

// Velocidade da bola.
var ballSpeedX = 6
var ballSpeedY = 6

//Dimensões do retângulo direito e esquerdo.
var xLeftRectangle = 5
var yLeftRectangle = 150
var widthRectangle = 10
var heightRectangle = 70

var xRightRectangle = 579
var yRightRectangle = 150
var yRightRacketSpeed;

var hit = false;

//Pontos do placar.
var myPoints = 0
var opponentPoints = 0

// Cria o quadro (coordenadas X e Y começam no canto esquerdo).
function setup() {
  createCanvas (600,400);
}

// Edita o quadro com a cor e outras funções.
function draw() {
  background (0);
  ball();
  racket(xLeftRectangle, yLeftRectangle);
  racket(xRightRectangle, yRightRectangle);
  ballMovement();
  ballCollision();
  racketMovement();
  rightRacketMovement();
  //mainRacketCollision();
  racketCollision(xLeftRectangle, yRightRectangle);
  racketCollision(xRightRectangle, yRightRectangle);
  score();
  scorePoints();
}

// Cria a bola com a função circle com as variáveis de X,Y, e Diâmetro.
function ball(){
  circle(xBall, yBall, ballDiameter);
}

//Define o movimento da bola, adicionando 6 valores de X e Y para a animação.
function ballMovement(){
  xBall += ballSpeedX;
  yBall += ballSpeedY;
}

//Define a colisão com a borda do canvas em X e Y, e o limite do raio.
function ballCollision() {
  if (xBall + ray > width ||xBall - ray < 0) {
    ballSpeedX *= -1;
  }
  if (yBall + ray > height || yBall - ray < 0) {
    ballSpeedY *= -1;
  }
}

function racket(x,y) {
  rect(x, y, widthRectangle, heightRectangle);

}

function racketMovement() {
//Raquete esquerda.
  if (keyIsDown(DOWN_ARROW)){
      yLeftRectangle += 10;
      }
  if (keyIsDown(UP_ARROW)) {
    yLeftRectangle -= 10;
  }
}

function rightRacketMovement(){
  yRightRacketSpeed = yBall - yRightRectangle - widthRectangle / 2 - 30;
  yRightRectangle += yRightRacketSpeed;
}

function mainRacketCollision(){
  if (xBall - ray < xLeftRectangle + widthRectangle && 
      yBall - ray < yLeftRectangle + heightRectangle && 
      yBall + ray > yLeftRectangle){
    ballSpeedX *= -1;
  }
}

function racketCollision(x,y) {
    hit = collideRectCircle(x, y, widthRectangle, heightRectangle, xBall, yBall, ballDiameter);
    if (hit) {
        ballSpeedX *= -1;
    }
}

function score() {
  fill (255)
  text (myPoints, 278 , 26);
  text (opponentPoints, 321 , 26);
}

function scorePoints() {
    if (xBall > 590) {
        myPoints += 1;
    }
    if (xBall < 10) {
        opponentPoints += 1;
    }
}
1 resposta

Olá, Kellyson! Como você está?

Verifiquei seu código e observei que ao chamar a função racketCollision() na Draw(), os parâmetros não correspondem ao da raquete da esquerda. Por conta disso ocorre um conflito de informações e a bolinha não "toca" na borda do lado esquerdo, o que não gera a colisão no ponto atrás da raquete e também não marca os pontos.

Aqui verificamos que os parâmetros são o xLeftRectangle e o yRightRectangle. A do oponente está correta.

 racketCollision(xLeftRectangle, yRightRectangle);
  racketCollision(xRightRectangle, yRightRectangle);

Diminui um pouco a velocidade da bolinha e percebi que ela não tocava na "borda".

Como resolver?

Basta modificar o parâmetro yRightRectangle por yLeftRectangle

racketCollision(xLeftRectangle, yLeftRectangle);
  racketCollision(xRightRectangle, yRightRectangle);

Teste no seu código e verifique se funciona corretamente agora, tudo bem?

Um grande abraço e espero ter conseguido ajudar.