Olá pessoal, tentei fazer pelo visual studio code para já ir treinando, mas não funcionou nem a música e nem o erro do oponente. Além disso a raquete vai além do tamanho da tela. Alguém sabe resolver esses erros?
Meu código sem o "erro do oponente" e sem a "música":
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jogo Pong</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
<script>
let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;
let raio = diametro / 2;
let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;
function setup() {
createCanvas(600, 400);
}
function draw() {
background(0); // Desenha o background
mostraBolinha(); // Desenha a bolinha
movimentaBolinha(); // Movimenta a bolinha
verificaColisaoBorda(); // Verifica a colisão
mostraRaquete(xRaquete, yRaquete); //Raquete
mostraRaquete(xRaqueteOponente, yRaqueteOponente); //Raquete do Oponente
movimentaRaquete();
verificaColisaoRaquete(xRaquete, yRaquete);
verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente);
movimentaRaqueteOponente();
incluiPlacar();
marcaPonto();
}
function mostraBolinha(){
circle(xBolinha, yBolinha, diametro);
}
function movimentaBolinha(){
xBolinha += velocidadeXBolinha;
yBolinha += velocidadeYBolinha;
}
function verificaColisaoBorda(){
if (xBolinha + raio > width || xBolinha - raio < 0){
velocidadeXBolinha *= -1;
}
if (yBolinha + raio > height || yBolinha - raio < 0){
velocidadeYBolinha *= -1;
}
}
//Variaveis da raquete
let xRaquete = 5;
let yRaquete = 150;
let raqueteComprimento = 10;
let raqueteAltura = 90;
//Variáveis do oponente
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeYOponente;
function mostraRaquete(x,y){
rect(x, y, raqueteComprimento, raqueteAltura);
}
function movimentaRaquete(){
if (keyIsDown(UP_ARROW)){
yRaquete -= 10;
}
if (keyIsDown(DOWN_ARROW)){
yRaquete += 10;
}
}
function verificaColisaoRaquete(a, b){
if (xBolinha > a && xBolinha < a + raqueteComprimento && yBolinha > b && yBolinha < b + raqueteAltura) {
velocidadeXBolinha *= -1;
}
}
function movimentaRaqueteOponente(){
velocidadeYOponente = yBolinha -yRaqueteOponente - raqueteComprimento / 2 - 30;
yRaqueteOponente += velocidadeYOponente
}
//Placar do Jogo
let meusPontos = 0;
let pontosdoOponente = 0;
function incluiPlacar(){
stroke(255);
textSize(16);
textAlign(CENTER);
fill(color(255, 140, 0));
rect(150, 10, 40, 20);
fill(255);
text(meusPontos, 170, 26);
fill(color(255, 140, 0));
rect(450, 10, 40, 20);
fill(255);
text(pontosdoOponente, 470,26);
}
function marcaPonto(){
if (xBolinha > 590){
meusPontos += 1;
ponto.play();
}
if (xBolinha < 10){
pontosdoOponente += 1;
}
}
setup();
draw();
</script>
</body>
</html>
