Laboratorio de desarrollo de juegos: bucle de juego, gravedad y colisiones en el navegador

Este laboratorio da a cada alumno un pequeño juego propio, Catch the stars, hecho de tres archivos: index.html para la página, style.css para su aspecto y game.js para sus reglas. Edita los archivos en el editor de archivos de JupyterLab y juega en un segundo enlace, Preview, servido desde la misma carpeta. Unos scripts cortos de Python leen game.js, muestran lo que contiene y repiten la aritmética del juego, de modo que el alumno puede comprobar cómo funciona un juego además de cambiarlo.

No es un laboratorio de ataque, y no tiene motor de juegos ni bibliotecas: un juego es JavaScript sencillo sobre un canvas de HTML, y el navegador es el único entorno de ejecución. Cada copia no tiene ruta a internet ni a ningún otro alumno, así que no se puede descargar nada en ella y nada de lo que hay dentro puede llegar a nadie más.

Lo que aprenden los alumnos

Qué es un bucle de juego: una función que se ejecuta una vez por fotograma, actualiza el juego, lo dibuja y pide al navegador que la vuelva a llamar. Cómo guarda un juego sus números en constantes con nombre como GRAVITY, PLAYER_SPEED y SPAWN_EVERY, y sus niveles en una tabla de datos, de modo que hacerlo más difícil es cambiar datos y no código. Cómo funciona la gravedad en un juego, como un número que se suma a una velocidad en cada fotograma y que luego mueve la posición. Y cómo se detecta una colisión, comprobando si dos cajas se solapan en los dos ejes. Encaja en introducciones al desarrollo de juegos y a la programación mediante juegos; comprueba en la unidad de tu propio organismo certificador la redacción exacta, aquí no se cita ninguna.

Ejecútalo en tu navegador

El laboratorio inicia un solo servicio, jupyter, que escribe el juego, un cuaderno de partida y los scripts cortos en su carpeta de trabajo, e inicia un servidor de archivos sencillo sobre la carpeta game. Desde la página del laboratorio se abren dos enlaces: JupyterLab, el banco de trabajo, y Preview, el propio juego. JupyterLab no pide ningún token, porque la puerta de la plataforma ya sabe quién lo abre. No hay navegador dentro del laboratorio, así que los scripts no pueden mostrar el juego, solo leer su código; el alumno lo juega en su propio navegador en el enlace Preview, con las flechas o los botones de la pantalla. Preview muestra los archivos guardados: tras editar un archivo, el alumno lo guarda y recarga Preview. El terminal junto al laboratorio no tiene Python propio: llega al del laboratorio con docker exec jupyter, seguido del comando que se ejecuta dentro.

  1. Abre la página Contenedor. Abre «Crear» en la barra y elige «Ejecutar un contenedor». Cualquiera puede abrir la página, y el laboratorio de Git y el de SQL se inician sin cuenta. Todos los demás laboratorios necesitan una cuenta gratuita: crea una, inicia sesión y pulsa «Iniciar».
  2. Busca el laboratorio. La tarjeta «Laboratorios de ejemplo» lista todos los ejemplos. Busca Desarrollo de juegos: un bucle de juego en JavaScript.
  3. Pulsa «Iniciar». «Iniciar» lo ejecuta tal cual, con una sola pulsación. «Editar el archivo primero» abre el archivo compose para que lo cambies antes de iniciarlo.
  4. Ábrelo. En la página del laboratorio, la barra del laboratorio tiene dos enlaces. Pulsa Preview para jugar, luego JupyterLab, abre la carpeta game y haz doble clic en game.js. Después pulsa «Abrir terminal» y escribe docker exec jupyter python3 steps/loop.py para listar las constantes con nombre y las funciones del juego.

Qué pedir a los alumnos que entreguen

Su propia versión del juego: los tres archivos de la carpeta game, descargados desde JupyterLab con File, Download. Después una o dos frases, con sus propias palabras, sobre un número que cambiaron, por ejemplo GRAVITY, PLAYER_SPEED o una fila de LEVELS, y lo que hizo en el juego. Nada se corrige automáticamente: la frase muestra si se entendió. Para un trabajo más sólido, pídeles que ejecuten steps/fall.py antes y después del cambio y digan qué se movió, o que añadan un quinto nivel a la tabla y expliquen cómo cambia la salida del script.

Una lección básica en este laboratorio

Game Loop Basics es una lección pequeña que se practica en este laboratorio. En ella el alumno lista los tres archivos del juego, lee sus constantes con nombre, sus funciones y el bucle que se ejecuta en cada fotograma, calcula los niveles a partir de la tabla, sigue una estrella que cae durante diez fotogramas, ejecuta la prueba de solapamiento de cajas con pares fijos y pide la página al servidor de Preview. Es pequeña a propósito: muestra a un docente qué es una lección practicada en un laboratorio, y el laboratorio hace el resto. Cópiala en un módulo propio para cambiarla.

El código en GitHub

El archivo compose no tiene Dockerfile: ejecuta una sola imagen pública, el scipy-notebook de los Jupyter Docker Stacks, fijada a una etiqueta con fecha, con su propia cuenta sin privilegios y 512 MB de memoria. La imagen tiene licencia BSD-3-Clause y no la distribuimos nosotros. El archivo escribe el juego y los scripts a partir de un texto fijo al arrancar, así que cada copia es igual y no se descarga nada. Los límites son honestos: el juego es pequeño, no hay motor ni forma de traer una biblioteca de internet, y no hay navegador dentro del laboratorio, así que los scripts leen el código en lugar de ejecutar el juego, y el lugar donde empieza una estrella es aleatorio en cada partida. Nada se conserva cuando el laboratorio se detiene: el alumno descarga antes sus archivos.

Ponerlo como tarea

Indica en la tarea qué hay que entregar.

  1. Crea el laboratorio. En tu módulo añade una tarea y elige la tarjeta «Laboratorio de contenedores», y después «En un repositorio de GitHub». Indica https://github.com/mitsurutech/lab-game-web con la rama main. El archivo compose es el predeterminado, compose.yaml. Haz un fork del repositorio antes si quieres modificarlo, por ejemplo para empezar con otro juego.
  2. Publica y pruébalo. «Publicar» fija el commit que te mostraron, así que un cambio posterior en el repositorio no altera un laboratorio que ya has asignado. Inicia primero tu propia copia.
  3. Asígnalo. Asígnalo como cualquier tarea, con una fecha de entrega si quieres, e indica en la tarea qué hacer y qué entregar.
  4. Califica lo entregado. Abre la copia de un alumno y el trabajo que ha entregado, califícalo y devuélvelo con un motivo si necesita más.

Prueba este laboratorio, y lo que cuesta

Con una cuenta personal gratuita puedes seguir las lecciones básicas de este laboratorio, con crédito gratuito suficiente cada mes para seguir la mayoría de las lecciones y sin tarjeta. Para una clase, un centro tiene gratis sus primeros 365 días, hasta 50 alumnos, y después paga por alumno y año, con todos los laboratorios incluidos y el profesorado gratis.

Preguntas frecuentes

¿Por qué hay dos enlaces?
JupyterLab, el primero, es donde el alumno edita los archivos y usa el terminal. Preview, el segundo, es el propio juego, servido desde la carpeta game, tal como lo vería un jugador. Mantener el juego en su propia pestaña evita que quede dentro de un editor.
¿Pueden los scripts mostrarme el juego?
No. No hay navegador dentro del laboratorio: un script puede leer game.js y repetir su aritmética, pero no dibujarlo. Juega en tu propio navegador en el enlace Preview. Los scripts imprimen los mismos números cada vez, lo que permite a una clase comparar respuestas.
Cambié un archivo y Preview no cambió. ¿Por qué?
Preview muestra los archivos guardados. Guarda el archivo en el editor y recarga Preview. Si sigue igual, prueba una recarga forzada, porque un navegador puede conservar una copia antigua de un archivo.
¿Por qué no hay token ni contraseña que escribir?
A la página web de un laboratorio solo se llega por la puerta de la plataforma, que ya sabe quién eres y solo deja entrar a ti y al profesorado de tu módulo. Por eso JupyterLab se inicia sin token. No lo ejecutes así en una máquina a la que pueda llegar otra persona.