[Projeto] Reproduzi o projeto no VSCODE | Lógica de programação: comece em lógica com o jogo Pong e JavaScript

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
    <script src="p5.collide2d.js"></script>
  </body>
</html>

CSS

html, body {
    margin: 0;
    padding: 0;
  }
  canvas {
    display: block;
  }

//variaveis bolinha
let xBolinha = 280;
let yBolinha = 200;
let diametro = 20;
let raio = diametro/2;
//variaveis velocidade
let velocidadeXBolinha = 3;
let velocidadeYBolinha = 3;
let canvasHeigth = 400;
//variaveis raquete
let xRaquete = 10;
let yRaquete = 200;
let comprimentoRaquete = 10;
let alturaRaquete = 100;
//colisao raquete library
let colidiu = false;

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

function draw (){
    background(0);
    mostraBolinha();
    movimentaBolinha();
    colideBolinha();
    mostraRaquete();
    movimentaRaquete();
    //colideRaquete();
    colidiuRaqueteLibrary();

}

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

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

function colideBolinha () {
    if(xBolinha - raio <0 || xBolinha + raio > width){
        velocidadeXBolinha *= -1;
    }
    if (yBolinha - raio <0 || yBolinha + raio > canvasHeigth) {
        velocidadeYBolinha *= -1;
    }
}

function mostraRaquete () {
    rect(xRaquete, yRaquete, comprimentoRaquete, alturaRaquete);
}

function movimentaRaquete () {
    if (keyIsDown(UP_ARROW)) {
        yRaquete -= 5;
    }

    if (keyIsDown(DOWN_ARROW)) {
        yRaquete += 5;
    }
}
/*
function colideRaquete () {
    if (xBolinha - raio < xRaquete + comprimentoRaquete && yBolinha - raio > yRaquete && yBolinha + raio < yRaquete + alturaRaquete){
        velocidadeXBolinha *= -1;
    }
}
*/

function colidiuRaqueteLibrary() {
    colidiu = collideRectCircle(xRaquete, yRaquete, comprimentoRaquete, alturaRaquete, xBolinha, yBolinha, diametro);
    if(colidiu) {
        velocidadeXBolinha *= -1;
    }
}