2
respostas

[Dúvida] função clearRect

Nesa aula, o flávio usou a função clearRect para o circulo não ir "pintando a tela por onde passa, porém, no outro curso, criamos um jogo pong e não se fez necessário o uso dessa função, apenas criamos esses códigos para a bolinha andar

//var bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;
let vxBolinha = 6;
let vyBolinha = 6;
let raio = diametro / 2;
function bolinha() {
  circle(xBolinha, yBolinha, diametro);
}
function velocidade_bolinha() {
  xBolinha += vxBolinha;
  yBolinha += vyBolinha;
}

é apenas uma diferença da biblioteca onde o código foi feito? preciso entender para conseguir caminhar sozinho

2 respostas

Olá, Rafael! Entendo sua dúvida e acho que posso te ajudar.

A diferença entre os dois códigos está na forma como a animação é feita. No caso do jogo Pong, a biblioteca utilizada provavelmente já cuida da limpeza da tela para você, ou seja, a cada frame da animação, a biblioteca limpa a tela e desenha os objetos novamente nas novas posições.

Já no caso da animação do círculo que você mencionou, estamos lidando diretamente com o canvas do HTML e a API de desenho do JavaScript. Nesse caso, quando desenhamos algo na tela, ele permanece lá até que seja apagado. Por isso, precisamos usar a função clearRect para limpar a tela antes de desenhar o círculo na nova posição.

Para exemplificar, imagine que você está desenhando em uma folha de papel com um lápis. Se você desenhar um círculo e depois quiser desenhá-lo em uma posição diferente, você precisa apagar o círculo antigo antes, certo? A função clearRect é como a borracha que apaga o desenho antigo.

Espero ter ajudado e bons estudos!

Só pra constar, A biblioteca do pong foi a P5js. então caso queira migrar o código de lá para um html teria que modificar o código inteiro? existem formas de reaproveitar o que foi feito?

desde já, agradeço