Pausar execução | Lógica de programação: comece em lógica com o jogo Pong e JavaScript

Olá Roberto!

Há diversas formas de realizar essa mecânica no seu jogo, uma forma para implementar uma pausa na movimentação da bolinha assim que ela tocar a borda, você pode adicionar uma variável booleana para controlar o estado de pausa e um condicional na function draw para verificar esse estado de congelado ou não.

Como exemplificado mais abaixo:

  if (!congelado) {
    // movimentação da bolinha e demais elementos do jogo
    mostraBolinha();
    moveBolinha();
    tocaNaBorda();
    mostraRaquete(xRaquete, yRaquete);
    mostraRaquete(xRaqueteOponente, yRaqueteOponente);
    moveRaquete();
    movimentaRaqueteOponente();
    verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente);
    verificaColisaoRaquete(xRaquete, yRaquete);
    incluiPlacar();
    marcaPontos();
    bolinhaNaoFicaPresa();
  } else {
    mostraBolinha();
  }
}

Nesse caso o "!" ao lado de congelado dentro do if significa o "contrário", ou seja, o jogo só vai rolar normalmente se a variável congelado for false.

Devemos também declarar a seguinte função:

let congelado = false;

Essa é parte da lógica, depois no local onde verifica o toque na borda podemos pausar o jogo:

function tocaNaBorda() {
  if (xBolinha + raio > width || xBolinha - raio < 0) {
    velocidadeXBolinha *= -1;
    congelado = true; 
  }
  if (yBolinha + raio > height || yBolinha - raio < 0) {
    velocidadeYBolinha *= -1;
  }
}

Deixo o link de um projeto para poder se inspirar e talvez aplicar no seu game:

Pausa ao tocar

Nesse projeto de exemplo ao pausar também foi adicionado uma condição que ao apertar a tecla espaço o jogo volta a dar play.

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!