Maquetación Web Dinámica / Canvas y videojuegos 2D

Proyecto final: tu propio juego con menú y puntaje

Proyecto190 min150 XP

El examen final del módulo, y uno de los más satisfactorios del curso: tu propio videojuego completo, de la pantalla de inicio al game over. Pong te lo dimos casi armado; esta vez la ARQUITECTURA la diseñas tú. Elige tu juego, y aprende la estructura que sostiene a todos ellos — la máquina de estados — sobre una solución de referencia jugable de principio a fin.

Reto

Tu videojuego: menú, juego y game over

Difícil180 min150 XP(×2 sin mirar la solución)

Qué debes construir

Un juego completo de tu elección, con TRES pantallas: inicio, jugando y fin. Tres candidatos clásicos, todos alcanzables con lo que ya sabes:

Snake — la serpiente que crece al comer y muere al chocar consigo misma. Enseña grillas y colisión con el propio cuerpo. (Es la solución de referencia de abajo.)
Breakout — la paleta que rompe ladrillos con una bola. Reutiliza casi toda la física de Pong + una grilla de ladrillos con colisión AABB.
Flappy Bird — el pájaro que cae por gravedad y salta con un clic, esquivando tuberías. Enseña gravedad, generación de obstáculos y timing.

Elige UNO. Lo esencial no es cuál, sino que tenga las tres pantallas y un puntaje.

Requisitos:

Máquina de estados con al menos tres estados: "menu", "jugando", "fin". El loop se comporta distinto en cada uno.
Pantalla de inicio: título + instrucciones + "presiona para empezar". Nada se mueve solo hasta que el jugador arranca.
Bucle de juego con puntaje visible que sube según las reglas de tu juego.
Game over: condición de derrota clara, pantalla con el puntaje final y opción de reiniciar (que resetea el estado, no recarga la página).
Dificultad progresiva (aunque sea leve): el juego se acelera o complica con el puntaje.

Reglas

Canvas + JavaScript, sin librerías.
Reutiliza todo el módulo: loop, física, input, colisiones, y las partículas de la lección 8 si quieres darle "juice".
El reinicio vuelve al juego SIN recargar (reasignas el estado y las variables, como aprendiste en Pong).

180:00

Cuando estés listo, arranca el reloj.

El razonamiento — lo que separa un juego de una animación es la ARQUITECTURA de estados:

Una variable gobierna todo. estado decide qué hace el loop y qué dibuja la pantalla. Sin ella, terminarías con un enredo de banderas (empezado, terminado, enPausa...) que se contradicen. Un solo estado con valores claros ("menu", "jugando", "fin") es imposible de romper: siempre estás en exactamente uno.
reiniciar() centraliza el arranque. Toda la inicialización en una función que se llama al empezar y al reintentar. El "reinicio sin recargar" — que parece magia — es solo volver a poner las variables en su sitio y cambiar el estado a "jugando".
El tiempo de juego se desacopla de los fotogramas. Snake no se mueve 60 veces por segundo (sería injugable); avanza una celda cada ciertos fotogramas, con un contador. Ese contador ES la velocidad, y tocarlo es tocar la dificultad.

Aquí está Snake completo y jugable — estúdialo como plano, luego construye el TUYO (el que elegiste) con la misma arquitectura de tres estados:

Autoevaluación: ¿tu juego tiene las tres pantallas y una sola variable estado que las gobierna? ¿El puntaje sube y se muestra? ¿El game over aparece con la condición correcta y puedes reintentar sin recargar? ¿Se pone más difícil con el tiempo? ¿Nada se mueve hasta que empiezas? Cinco síes: tienes un videojuego propio, completo, de portafolio.

Nota honesta de cierre: fíjate en cuánto CÓDIGO A MANO pide un juego sencillo — el loop, el estado, el input, la colisión, todo lo escribes tú. Eso es exactamente lo que un MOTOR de videojuegos te ahorra, y es el puente natural al módulo 13-B: los mismos juegos que acabas de construir a mano, pero en Phaser, que te regala escenas, física y assets. Primero sufriste el canvas crudo — ahora vas a apreciar de verdad lo que un motor resuelve.

Qué sigue

Módulo 13 cerrado, y con él tu primer arco completo de videojuegos: del píxel al juego jugable, dos proyectos terminados en el bolsillo. El módulo 13-B toma justo este impulso y lo lleva a un motor real — Phaser — donde verás cuánto de lo que sufriste a mano se resuelve declarativamente, y construirás un plataformero 2D completo. Del artesano al ingeniero de juegos.