Voy a hacer esto muy simple. En cada cuadro, necesito representar al 'jugador' donde sea que esté. Usando setInterval, pude hacer esto. Desafortunadamente, eso hace que parpadee ocasionalmente y mis muchas horas tratando de corregir esto no han tenido éxito. He reducido el problema al interior de este código:

 function eachFrame(){ ctx.clearRect(0,0,canvas.width,canvas.height); player.motion(); player.render(); setTimeout(window.requestAnimationFrame(eachFrame), 1000 / fps); }; window.requestAnimationFrame(eachFrame);

Cuando esto se ejecuta, no aparece absolutamente nada en la pantalla.

player.motion actualiza la posición del jugador y maneja la lógica de movimiento. No es el problema, pero lo necesito.

player.render dibuja la posición actual del jugador en la pantalla. Tampoco es el problema.

La razón por la que sé que player.motion y player.render están completamente bien es porque, cuando te deshaces de ctx.clearRect(), puedes mover el reproductor y se renderiza perfectamente.

 function eachFrame(){ //ctx.clearRect(0,0,canvas.width,canvas.height); player.motion(); player.render(); setTimeout(window.requestAnimationFrame(eachFrame), 1000 / fps); }; window.requestAnimationFrame(eachFrame);

Cuando te deshaces de eso, por supuesto que ahora estás jugando a la serpiente y te quedas con un rastro detrás del jugador. ctx.clearRect hace su trabajo, borra la pantalla.

Esta línea es el problema: setTimeout(window.requestAnimationFrame(eachFrame), 1000 / fps);

¿Cómo lo soluciono?