Fundamentos del bucle de juego

Piensa en un cuaderno de dibujos que se hojea. Cada página es una imagen, y al pasarlas rápido las cosas parecen moverse. Un juego funciona igual: sesenta veces por segundo calcula dónde está cada cosa, dibuja una imagen y vuelve a empezar. Catch the stars es un juego pequeño de ese tipo. Caen estrellas desde arriba, tú deslizas una caja por abajo para atraparlas y pierdes una vida por cada estrella que pasa de largo.

• Fotograma (frame): una imagen del juego, dibujada muchas veces por segundo.
• Bucle de juego: el código que se ejecuta una vez por fotograma: actualizar y luego dibujar.
• Constante: un número con nombre al principio del código, como GRAVITY, que cambias en un solo sitio.
• Gravedad: un número que se suma a la velocidad de algo que cae, en cada fotograma.
• Colisión: dos cosas que se tocan, detectada comparando sus cajas.
• Estado del juego: lo que el juego recuerda, como la puntuación y las vidas.

ls game lista los tres archivos del juego: index.html para la página, style.css para el aspecto y game.js para las reglas. La segunda orden muestra sus tamaños: 667, 442 y 4399 bytes, 5508 en total. Casi todo el juego está en game.js. No hay motor ni biblioteca, solo lo que el navegador ya trae.

El script lee game.js y muestra las constantes con nombre del principio: GRAVITY vale 0.15, PLAYER_SPEED vale 6 y SPAWN_EVERY vale 50, una estrella nueva cada 50 fotogramas. Después lista las funciones. Dos son las más importantes. update mueve todo y comprueba lo que ha pasado, y draw pinta la imagen. La función loop llama a las dos y luego pide al navegador que la vuelva a llamar para el siguiente fotograma, con requestAnimationFrame. Esa llamada interminable es el bucle de juego.

Un buen juego guarda sus números donde se encuentran. LEVELS es una tabla de datos: cuatro filas, Drizzle, Shower, Storm y Meteors, que empiezan en las puntuaciones 0, 5, 12 y 20. Cada fila escala los números base, y el script calcula el resultado: la gravedad pasa de 0.150 a 0.360 y el hueco entre estrellas baja de 50 fotogramas a 25. Así el juego se vuelve más difícil cambiando datos y no código. Pruébalo: cambia GRAVITY en game.js, guarda, vuelve a ejecutar el script y juega en Preview.

La gravedad no mueve una estrella por sí sola. En cada fotograma suma un poco a la velocidad de la estrella, y luego la velocidad mueve la estrella. El script sigue una estrella durante diez fotogramas a partir de la constante de game.js: la velocidad crece 0.15 en cada fotograma, hasta 1.50, y la estrella ha caído 8.25 píxeles en total. Cada fotograma da un paso mayor que el anterior, por eso una estrella parece acelerar al caer.

Para atrapar una estrella, el juego pregunta si dos cajas se solapan. Se solapan cuando cada una empieza antes de que acabe la otra, a lo ancho y a lo alto. El script hace la misma prueba en Python con seis pares fijos: las cajas que se solapan y una caja dentro de otra dan True, las cajas lejanas dan False, y también las que solo comparten un borde. El juego hace la prueba con cada estrella en cada fotograma.

Preview es un servidor de archivos sencillo. El script le pide la página, el script del juego y la hoja de estilo, como hace un navegador, y cada uno responde 200. Nada en el laboratorio puede jugar por ti, porque no hay navegador dentro. Abre Preview en tu propia pestaña: usa las flechas izquierda y derecha, o los botones, para deslizar la caja. Tras tres estrellas perdidas, el juego dice Game over, y con Espacio o Restart empieza otra partida.

Abre JupyterLab desde la barra y haz doble clic en start.ipynb. Sus celdas leen las constantes, hacen la prueba de solapamiento con dos cajas y piden la página a Preview. Haz clic en una celda y pulsa Mayús e Intro para ejecutarla. La última celda es para tu propio cambio: cambia GRAVITY, guarda y calcula dónde está una estrella tras diez fotogramas.