Estoy tratando de hacer un juego de ping pong usando vanilla js, pero encontré un problema que es realmente molesto. El problema es que cada vez que cambio el tamaño, los murciélagos del navegador parpadean (se muestran y desaparecen rápidamente).

codigo js:

 import {update} from './update.js' import {draw} from './draw.js' //Take pong field element const PONG_FIELD_EL =document.getElementById('pongField'); //Call getContext api on the field el const CTX = PONG_FIELD_EL.getContext('2d'); //Set width & height of the field equal to window's dimension initially PONG_FIELD_EL.width = window.innerWidth; PONG_FIELD_EL.height = window.innerHeight; //Set width & height of the field equal to window's dimension on resizing window.addEventListener('resize',()=>{ PONG_FIELD_EL.width = window.innerWidth; PONG_FIELD_EL.height = window.innerHeight; gameLoop() }) //Specify velocity const VELOCITY = 100; //Define gameLoop func function gameLoop(){ //Call draw function draw(CTX) //Call update function update() } //Call gameLoop each time based on velocity setInterval(()=>{ gameLoop() },VELOCITY)

La razón por la que he llamado a la función gameLoop dentro del controlador de cambio de tamaño es porque quería evitar que los murciélagos escalaran al cambiar el tamaño. Si alguien pudiera ayudarme con esto, se lo agradecería mucho. Espero poder explicar mi problema con claridad.