El bucle de juego

Un bucle de juego (en inglés, game loop) es el código que un videojuego repite decenas de veces por segundo. Primero actualiza lo que pasa y luego lo dibuja. Gracias a él, un cuadrado quieto se convierte en algo que se mueve.

Al final sabrás explicar qué hace el bucle en cada imagen y calcular dónde estará un objeto dentro de diez imágenes. Lo verás en un juego pequeño del laboratorio, Catch the stars (Atrapa las estrellas).

Un cuaderno de dibujos animados funciona igual que un juego. Cada hoja es una imagen y, al pasarlas deprisa, parece que algo se mueve.

Un juego suele dibujar unas 60 imágenes por segundo. Cada una dura unos 17 milisegundos. En ese tiempo el programa tiene que calcular y pintar todo, y empezar otra vez.

Actualizar no pinta nada. Solo cambia números: la posición del jugador, la altura de una estrella, los puntos. Dibujar no cambia nada. Solo mira esos números y los pinta.

Por eso un objeto se mueve: en cada fotograma, actualizar suma su velocidad a su posición, y dibujar lo pinta un poco más allá. Después, el bucle le pide al navegador otra vuelta.

function loop() {
  update();
  draw();
  window.requestAnimationFrame(loop);
}

loop();

El juego del laboratorio está en la carpeta game: tres archivos, y casi todo está en game.js. Para mirarlo hay un script en Python que lee ese archivo y escribe qué contiene.

El script escribe en inglés. Verás nueve constantes con su valor, como GRAVITY = 0.15, la línea uses requestAnimationFrame: True y la lista functions: con ocho funciones.

docker exec jupyter python3 steps/loop.py

requestAnimationFrame le pide al navegador que vuelva a llamar a una función cuando vaya a dibujar el siguiente fotograma. La función loop se llama a sí misma así, y ese es el bucle.

El comando de abajo busca esa palabra en game.js. Escribe una sola línea, con su número: la 112.

docker exec jupyter grep -n "requestAnimationFrame" game/game.js

El tercer script mide los tres archivos. Escribe en inglés una línea por archivo, con su tamaño en bytes, y al final la palabra total.

Verás 667 bytes para index.html, 442 para style.css y 4399 para game.js: 5508 en total. No hay motor ni biblioteca, solo lo que ya trae el navegador. Juega una partida en la vista previa y fíjate en cómo cae cada estrella.

docker exec jupyter python3 steps/sizes.py