Aula 03 - Atividade 05 - Faça como eu fiz

Olá Pessoal!

Conclui a segunda parte do exercício, criando a raquete e implementando as funções para comandos de teclas e colisão com a bolinha. Para testar:

1. clique no link abaixo.
2. Clique no botão "play".
3. Clique na área do jogo para movimentar a raquete.

https://editor.p5js.org/raphamass/sketches/neiIVzljn

segue o código abaixo:

//ball variables
let xBall = 300;
let yBall = 200;
let diameter = 15;
let radius = diameter / 2;

//ball speed
let speedXBall = 6; 
let speedYBall = 6;

//paddle variables
let xPaddle = 5;
let yPaddle = 150;
let wPaddle = 10;
let hPaddle = 90;

function setup() {
    createCanvas(600,400); // (width, height)
}

function draw() {
    background (0);
    showBall();
    ballMotion();
    ballEdgeCollision();
    showPaddle();
    paddleMotion();
    paddleCollision();

}


function showBall(){
  circle(xBall, yBall, diameter) // (x,y,d)
}

function ballMotion() {
    xBall += speedXBall; // simpler way
    yBall += speedYBall;  

    /* xBall = xBall + 1; where 1 = speed
    xBall = xBall + speedXBall */

}

function ballEdgeCollision() {
    if (xBall + radius> width || xBall - radius < 0) {
      speedXBall *= -1; // "||" stands for "or"
    }

    if (yBall + radius > height || yBall - radius < 0) {
      speedYBall *= -1;
    }
}

function showPaddle() {
  rect(xPaddle, yPaddle, wPaddle, hPaddle);
}

function paddleMotion(){
  if (keyIsDown(UP_ARROW)){
    yPaddle -= 10;
  }
  if (keyIsDown(DOWN_ARROW)){
    yPaddle += 10;
  }
}

function paddleCollision(){
  if (xBall - radius < xPaddle + wPaddle 
      && yBall - radius < yPaddle + hPaddle
      && yBall + radius > yPaddle) {
      speedXBall *= -1;
  }
}