Actualmente estoy trabajando en hacer una versión web del juego Snake y tengo la mayoría de las piezas configuradas, pero durante el juego, de repente se retrasa (el navegador no se retrasa) y simplemente hacer clic en la página traerá vuelve a su estado normal.
No puedo encontrar la manera de corregir este problema, estoy usando setTimeout para llevar a cabo básicamente la 'renderización' de cada cuadro (cada 100 ms).
function main() { if (isGameOver()) return; setTimeout(() => { composeFrame(); updateGameModels(); main(); }, 100); }Estoy pensando que el problema podría deberse a las llamadas recursivas. ¿Puedo obtener algunos consejos sobre cómo detener el bloqueo extraño mientras se mantiene la lógica recursiva o simplemente cualquier ayuda?
Extra: lo implementé en las páginas de GitHub para poder poner un enlace aquí para que pueda ejecutarlo y ver el problema de primera mano. Puedes controlar la serpiente con tu teclado.
Gracias a la sugerencia de @mcgraphix, cambié a requestAnimationFrame() y ahora funciona bien.
function main(timestamp) { if (isGameOver()) return; if (start === undefined) { start = timestamp; } let elapsedTime = timestamp - start; if (elapsedTime >= 100) { composeFrame(); updateGameModels(); start = timestamp; } window.requestAnimationFrame(main); }