Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Pong no Javascript : Como faço para pausar a trilha do jogo quando ocorre um vencedor?

Durante o curso "Jogos clássicos parte 1: Iniciando no Javascript com pong", seguindo o desenvolvimento das atividades, criei esse código para o jogar o pong.

Fiz algumas modificações como colocar um contador até 10 para estabelecer um vencedor, limitar o movimento das raquetes para não saírem da tela do jogo, etc...mas oquê eu queria mesmo, era pausar a execução da trilha que é executada durante o jogo no momento em que ocorre um vencedor.

Alguma sugestão?

Segue meu código:


// variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 22;
let raio = diametro / 2;

// velocidade da bolinha
let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;

// variáveis 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;

let colidiu = false;

// placar do jogo
let meusPontos = 0;
let pontosDoOponente = 0;

// sons do jogo
let raquetada;
let ponto;
let trilha;


function preload () {
  raquetada = loadSound ("raquetada.mp3");
  ponto = loadSound ("ponto.mp3");
  trilha = loadSound ("trilha.mp3");
}


function setup() {
  createCanvas(600, 400);
  trilha.loop();
}

function draw() {
  background(0);
  mostraBolinha (255, 255, 255);
  movimentaBolinha ();
  verificaColisaoBorda ();
  mostraRaquete(xRaquete, yRaquete);
  mostraRaquete(xRaqueteOponente, yRaqueteOponente);
  movimentaMinhaRaquete ();
  //verificaColisaoRaquete ();
  verificaColisaoRaquete(xRaquete, yRaquete);
  verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente);
  movimentaRaqueteOponente ();
  incluiPlacar ();
}


function mostraBolinha (a, b, c) {
  fill(a, b, c);
  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;
  }
}


function mostraRaquete(x, y) {
  rect (x, y, raqueteComprimento, raqueteAltura); 
}


function movimentaMinhaRaquete () {
  if (keyIsDown(UP_ARROW)) {
    yRaquete -= 10;
  }
  if (keyIsDown(DOWN_ARROW)) {
    yRaquete += 10;
  }
  if (yRaquete <= 0) {yRaquete = 0;}
  if (yRaquete >= height - raqueteAltura) {yRaquete = height - raqueteAltura;}
}


function verificaColisaoRaquete () {
  if (xBolinha - raio < xRaquete + raqueteComprimento && 
      yBolinha + raio > yRaquete &&                 
      yBolinha - raio < yRaquete + raqueteAltura) {

      velocidadeXBolinha *= -1;
      raquetada.play();
  }
}


function verificaColisaoRaquete(x, y) {
    colidiu = collideRectCircle(x, y, raqueteComprimento, raqueteAltura, xBolinha, yBolinha, raio);
    if (colidiu) {
        velocidadeXBolinha *= -1;
        raquetada.play();
    }
}


function movimentaRaqueteOponente () {
  if (keyIsDown(87)) {
    yRaqueteOponente -= 10;
  }
  if (keyIsDown(83)) {
    yRaqueteOponente += 10;
  }
  if (yRaqueteOponente <= 0) {yRaqueteOponente = 0;}
  if (yRaqueteOponente >= height - raqueteAltura) {yRaqueteOponente = height - raqueteAltura;}
}


function incluiPlacar ()  {
  stroke (255);
  textSize (25);
  textStyle(BOLD);
  textFont('Verdana');
  fill (0, 191, 255);
  rect(130, 0, 60, 35);
  fill (255, 105, 180);
  text (meusPontos, 150, 26);
  fill (0, 191, 255);
  rect(430, 0, 60, 35);
  fill (255, 105, 180);
  text (pontosDoOponente, 450, 26);


  if (xBolinha - raio <= 0) {
    pontosDoOponente++;
    ponto.play();
  }


  if (pontosDoOponente >= 10) {
    fill (0, 191, 255);
    rect(150, 100, 300, 200);
    fill (255, 105, 180);
    textSize (25);
    textStyle(BOLD);
    textFont('Verdana');
    text ("Você Venceu!!!", 185, 200);
    xBolinha = 300;
    yBolinha = 200;
    velocidadeXBolinha = 0;
    velocidadeYBolinha = 0;
  }


  if (xBolinha + raio >= width) {
    meusPontos++;
    ponto.play();
  }

  if (meusPontos >= 10) {
    fill (0, 191, 255);
    rect(150, 100, 300, 200);
    fill (255, 105, 180);
    textSize (25);
    textStyle(BOLD);
    textFont('Verdana');
    text ("Você Venceu!!!", 185, 200);
    xBolinha = 300;
    yBolinha = 200;
    velocidadeXBolinha = 0;
    velocidadeYBolinha = 0;
  }
}
3 respostas
solução!

Boa noite Marcos, tudo bem?

Só adicionar o comando trilha.stop() aonde você quer que o som pare de tocar, que no caso é quando a pontuação de um dos dos 'jogadores' chega a 10.

...
function incluiPlacar() {
...
  if (pontosDoOponente >= 10) {
      trilha.stop();
      ...
  }

  ...

  if (meusPontos >= 10) {
      trilha.stop();
      ...
  }

...
}
...

Espero ter ajudado, bons estudos!

Obrigado pela ajuda Abraão. Eu imaginei que existiria algum comando simples e direto para parar a execução da trilha. Mas não havia encontrado. O "stop" veio bem a calhar. Obrigado.

Pois é, de cara eu também não sabia não, mas aí eu olhei na referência do p5js. Mas é assim mesmo, errando e aprendendo, hahaha.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software