Realmente algumas vezes no projeto de "Lógica de programação: comece em lógica com o jogo Pong e Javascript" a bolinha fica preza atrás da raquete e ai marca vários pontos para o oponente nesse caso uma boa forma de resolver isso é criar uma função que retorne a bolinha ao centro da tela, e chamar essa função dentro da função que marca os pontos, dessa forma no momento em que for realizado o primeiro ponto a bolinha retornará para o centro.
// Função para retonar bolinha ao centro da tela
function bolinhaVoltaParaCentroDaTela(){
xBolinha = 300
yBolinha = 200
}
Dessa forma a nossa função marca ponto ficaria da seguinte forma:
function marcaPonto() {
if(xBolinha > 590) {
meusPontos += 1;
ponto.play();
bolinhaVoltaParaCentroDaTela();
}
if(xBolinha < 10){
pontosDoOponente += 1;
ponto.play();
bolinhaVoltaParaCentroDaTela();
Achei interessante esse método, porque a função é chamada dentro de outra função e não dentro do draw como de costume rs
Código completo:
//Variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 13;
let raio = diametro / 2;
//Variáveis da velocidade da bolinha
let velocidadeXbolinha = 6;
let velocidadeYbolinha = 6;
//variaveis da raquete
let xRaquete = 5;
let yRaquete = 150;
let raqueteComprimento = 10;
let raqueteAltura =90;
let colidiu = false;
//placar do jogo
let meusPontos = 0;
let pontosDoOponente = 0;
//sons do jogo
let raquetada;
let ponto;
let trilha;
function preload(){
trilha = loadSound("trilha.mp3");
ponto = loadSound("ponto.mp3");
raquetada = loadSound("raquetada.mp3")
}
// Variaveis do Oponente
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeYOponente = 6;
// Change de Errar
let chanceDeErrar = 0;
function setup() {
createCanvas(600, 400);
trilha.loop();
}
function draw() {
background(0);
mostraBolinha();
movimentaBolinha();
verificaColisaoBordas();
mostraRaquete(xRaquete,yRaquete);
mostraRaquete(xRaqueteOponente,yRaqueteOponente);
movimentaMinhaRaquete();
movimentaRaqueteOponente();
verificaColisaoRaquete(xRaquete,yRaquete);
verificaColisaoRaquete(xRaqueteOponente,yRaqueteOponente);
incluiPlacar();
marcaPonto();
calculaChanceDeErrar();
//bolinhaVoltaParaOMeioDepoisAposPonto();
}
function mostraBolinha(){
circle(xBolinha,yBolinha,diametro);
}
function movimentaBolinha(){
xBolinha += velocidadeXbolinha;
yBolinha += velocidadeYbolinha;
}
function verificaColisaoBordas(){
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,raqueteComprimento,raqueteAltura);
}
function movimentaMinhaRaquete(){
if(keyIsDown (UP_ARROW)){
yRaquete -=10;
}
if(keyIsDown (DOWN_ARROW)){
yRaquete +=10;
}
}
/*function movimentaRaqueteOponente(){
if(keyIsDown(87)){
yRaqueteOponente -=10;
}
if(keyIsDown(83)){
yRaqueteOponente +=10;
}
}*/
function movimentaRaqueteOponente(){
velocidadeYOponente = yBolinha -yRaqueteOponente - raqueteComprimento / 2 - 30;
yRaqueteOponente += velocidadeYOponente + chanceDeErrar
calculaChanceDeErrar()
}
function verificaColisaoRaquete(){ if(xBolinha - raio < xRaquete + raqueteComprimento && yBolinha - raio < yRaquete + raqueteAltura && yBolinha + raio > yRaquete){
velocidadeXbolinha *= -1;
raquetada.play();
}
}
function verificaColisaoRaquete (x,y){
colidiu = collideRectCircle(x, y, raqueteComprimento, raqueteAltura, xBolinha, yBolinha, raio);
if(colidiu){
velocidadeXbolinha *= -1;
raquetada.play();
}
}
function incluiPlacar() {
stroke(255);
textAlign(CENTER);
textSize(16);
fill(color(255,140,0))
rect(150,10,40,20,5)
fill(255);
text(meusPontos, 170, 26);
fill(color(255,140,0))
rect(450,10,40,20,5)
fill(255);
text(pontosDoOponente, 470, 26);
}
function marcaPonto() {
if(xBolinha > 590) {
meusPontos += 1;
ponto.play();
bolinhaVoltaParaCentroDaTela();
}
if(xBolinha < 10){
pontosDoOponente += 1;
ponto.play();
bolinhaVoltaParaCentroDaTela();
}
}
function calculaChanceDeErrar() {
if (pontosDoOponente >= meusPontos) {
chanceDeErrar += 1
if (chanceDeErrar >= 39){
chanceDeErrar = 40
}
} else {
chanceDeErrar -= 1
if (chanceDeErrar <= 35){
chanceDeErrar = 35
}
}
}
function bolinhaVoltaParaCentroDaTela(){
xBolinha = 300
yBolinha = 200
}