Segue abaixo o Código de programação desenvolvido durante o curso. Adicionei uma função para evitar que a raquete avance além das bordas do canvas:
//variáveis da Bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;
let raio = diametro / 2;
//velocidade da Bolinha
let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;
//variáveis da Raquete
let wRaquete = 10;
let hRaquete = 90;
//variáveis da Minha Raquete
let xRaquete = 5;
let yRaquete = 150;
//variáveis da Raquete do Oponente
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeyOponente;
let colidiu = false;
// Placar do Jogo
let meusPontos = 0;
let pontosOponente = 0;
//sons do jogo;
let raquetada;
let ponto;
let trilha;
function preload (){
trilha = loadSound ("trilha.mp3");
ponto = loadSound ("ponto.mp3");
raquetada = loadSound ("raquetada.mp3");
}
function setup() {
createCanvas(600, 400);
trilha.loop();
}
function draw() {
background(0);
mostraBolinha();
movimentaBolinha();
colisaoBorda();
mostraRaquete(xRaquete, yRaquete);
movimentaMinhaRaquete();
//colisaoRaquete();
colisaoMinhaRaqueteBiblioteca(xRaquete, yRaquete);
//mostraRaqueteOponente ();
mostraRaquete(xRaqueteOponente, yRaqueteOponente);
movimentaRaquetaOponente ();
colisaoMinhaRaqueteBiblioteca(xRaqueteOponente, yRaqueteOponente);
colisaoBordaMinhaRaquete ();
colisaoBordaRaqueteOponente ();
mostrarPlacar ();
marcaPonto ();
}
function mostraBolinha (){
circle(xBolinha, yBolinha, diametro);
}
function movimentaBolinha (){
xBolinha += velocidadeXBolinha;
yBolinha += velocidadeYBolinha;
}
function colisaoBorda (){
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, wRaquete, hRaquete);
}
function movimentaMinhaRaquete (){
if (keyIsDown (87)){
yRaquete -= 10;
}
if (keyIsDown (83)){
yRaquete += 10;
}
}
function colisaoRaquete (){
if (xBolinha - raio < xRaquete + wRaquete &&
yBolinha - raio < yRaquete + hRaquete &&
yBolinha + raio > yRaquete ){
velocidadeXBolinha *= -1;
}
}
function colisaoMinhaRaqueteBiblioteca (x, y){
colisao = collideRectCircle(x, y, wRaquete, hRaquete,
xBolinha, yBolinha, raio);
if (colisao){
velocidadeXBolinha *= -1;
raquetada.play();
}
}
//function mostraRaqueteOponente ()
//{rect (xRaqueteOponente,yRaqueteOponente,wRaquete,hRaquete)}
function movimentaRaquetaOponente (){
if (keyIsDown (UP_ARROW)){
yRaqueteOponente -= 10;
}
if (keyIsDown (DOWN_ARROW)){
yRaqueteOponente += 10;
}
}
function colisaoBordaMinhaRaquete (){
if ( yRaquete + hRaquete > 400) {
yRaquete -= 10;
}
if ( yRaquete < 0 ) {
yRaquete += 10;
}
}
function colisaoBordaRaqueteOponente (){
if ( yRaqueteOponente + hRaquete > 400) {
yRaqueteOponente -= 10;
}
if ( yRaqueteOponente < 0 ) {
yRaqueteOponente += 10;
}
}
function mostrarPlacar (){
stroke (255);
textAlign (CENTER);
textSize (16);
fill(255,140,0);
rect(130,10,40,20);
fill(255);
text (meusPontos,150,26);
fill(255,140,0);
rect(430,10,40,20);
fill(255);
text (pontosOponente,450,26);
}
function marcaPonto (){
if (xBolinha > 590){
meusPontos += 1;
ponto.play();
}
if (xBolinha < 10){
pontosOponente += 1;
ponto.play();
}
}