Starvard University · Tu primer juego estilo Super Mario

Tu primer juego estilo Super Mario

El pequeño juego de plataformas que te encantaba de niño, construido por ti, hoy: la IA escribe el código, tú eliges las caras, y el juego terminado vive en la web, donde tus amigos pueden jugarlo. Todos los recursos incluidos.

Todo el curso en resumen

  1. Vas a construir un juego de plataformas real y jugable: correr, saltar, pisar enemigos, monedas, bandera. El nuestro se llama Super E2, y puedes jugarlo antes de construirlo.
  2. Hay cinco maneras honestas de hacer un juego como este, desde una ventana de chat hasta un motor de juegos de verdad. Elige según cuánto control quieras.
  3. El camino más rápido: Claude construye todo el juego de una sentada, en el propio chat, y lo aloja gratis.
  4. Los juegos están hechos de recursos: sprites para los personajes, tiles para los mundos, sonidos para la alegría. El paquete completo de Super E2 es tuyo para siempre.
  5. Modificar es la verdadera habilidad: peticiones pequeñas y claras a Claude convierten el juego inicial en tu juego.
  6. ChatGPT pinta caras nuevas: tus amigos, tu perro, tu propio héroe, en el mismo estilo de píxeles que el elenco.
  7. Un juego que nadie puede abrir es un diario. Alójalo gratis, insértalo en tu sitio y envía un solo enlace.
  8. Publícalo, deja que tus amigos lo jueguen y luego remézclalo: niveles nuevos, corredores nuevos, tu nombre en la pantalla de título.

Lección 1

El juego que estás a punto de tener

Un juego de plataformas es el tipo de videojuego más amable que se ha hecho: correr, saltar, aterrizar sobre algo, agarrar lo que brilla, llegar a la bandera. Si creciste en los últimos cuarenta años, tus manos ya saben jugar uno. Lo que quizá no sabes es que en 2026, una sola persona con una IA puede construir uno en una tarde, y este curso te guía exactamente en eso, con los recursos incluidos.

Nuestro juego de ejemplo es Super E2. Lo construyó con Claude el fundador de Starvard, Dave, como uno de sus primeros juegos, y luego lo compartió con toda nuestra comunidad junto con su código, con una sola instrucción: modifícalo, ponte a ti y a tus amigos dentro. Ocho corredores (Dave, Marty, Jen, Sally, Jah Vibez, Dinesh, Chadwick y Mike), bichos para pisar, monedas para agarrar, una bandera que alcanzar. Ese espíritu es el curso: parte de un juego que ya funciona y luego hazlo tuyo.

El juego inicial, jugable aquí mismo. Con teclado: flechas para moverte, Espacio para saltar. Ábrelo en pantalla completa.

Al final tendrás: un juego jugable con tu nombre, personajes que elegiste o pintaste, un enlace que puedes enviar a cualquiera, y la habilidad que más importa en la era de la IA, que no es programar. Es describir lo que quieres con la claridad suficiente para que una máquina lo construya, y luego juzgar lo que devuelve. Los juegos son simplemente la manera más divertida de aprenderla.

La pantalla de título de Super E2: ocho corredores para elegir

Super E2, el juego alrededor del cual está construido este curso. Uno de los primeros juegos de Dave, hecho con Claude y compartido con su código.

Juega primero, construye después. Cinco minutos dentro del juego enseñan más que una hora de teoría.

Lección 2

Las cinco maneras de hacer un juego como este

Antes de construir, el mapa. Hay cinco maneras honestas de hacer un juego de plataformas en 2026, y se diferencian en un solo intercambio: control contra comodidad. La ventana de chat es la más cómoda y la menos potente; el motor de juegos es lo contrario. Ninguna es trampa y ninguna es el único camino verdadero; los diseñadores de juegos profesionales se mueven entre ellas todo el tiempo.

Claude en el chat (Artifacts)
Gratis para empezar
Describe el juego, Claude lo escribe en un solo archivo, y el enlace del artifact ES el alojamiento. Cero configuración, cero instalaciones. Límites: un solo archivo, y los juegos muy grandes se le quedan cortos.
El mejor primer juego, sin discusión.
Claude Code en tu computadora
Claude Pro, $20/mo
El mismo cerebro, trabajando en tus archivos reales. Puede dividir el juego en piezas, añadir archivos de sonido y carpetas de sprites, y seguir construyendo durante horas.
Para cuando el primer juego funciona y el segundo se vuelve ambicioso.
Constructores de apps web (Lovable, Bolt)
Niveles gratuitos, luego ~$20/mo
Escribe la idea y obtén una app web funcionando con alojamiento incluido. Rápido y bonito; el código es real, pero las herramientas apuntan primero a las apps y luego a los juegos.
Bueno si piensas en páginas, no en código.
Creadores de juegos sin código (GDevelop, Construct)
Niveles gratuitos
Arrastra escenas para unirlas, adjunta comportamientos (saltar, patrullar, recoger) desde menús, exporta a la web. Nadie escribe código; alguien sigue diseñando el juego.
Para pensadores visuales y aulas.
Un motor de verdad (Godot)
Gratis para siempre, código abierto
El camino profesional: un editor de verdad, escenas de verdad, exportación a todas partes, incluidos teléfonos y consolas. Primera semana más empinada, techo ilimitado.
El segundo o tercer juego, cuando ya estás enganchado.

Este curso toma la Manera 1 como camino principal (Claude en el chat), porque te pone hoy mismo un juego jugable delante, y todo lo que aprendes ahí (describir, iterar, recursos, alojamiento) se transfiere a las otras cuatro. Si ya programas, avanza rápido: la Manera 2 con el archivo inicial de la Lección 4 es tu rampa de entrada.

¿Nuevo aquí? Manera 1. ¿Ya eres técnico? Manera 2 o 5. Todas las maneras enseñan la misma habilidad central: describir juegos con claridad.

Lección 3

Constrúyelo en Claude de una sentada

Abre Claude (el nivel gratuito basta para un primer juego) y pega este prompt. No es magia; es específico. Nombra los controles, los verbos (pisar, recoger), la condición de victoria, el estilo, y la única función que los principiantes olvidan: una pantalla de título con una elección.

“Créame un juego de plataformas estilo Super Mario en un solo archivo HTML. Un personaje que corre con las flechas, salta con Espacio, pisa enemigos para ganar puntos, recoge monedas y gana al llegar a una bandera. Estilo pixel art, cielo azul, colinas verdes. Déjame elegir entre varios personajes diferentes en una pantalla de título.”

Lo que vuelve es un juego en un solo archivo, viviendo en un artifact: una página que Claude aloja para ti, gratis, con su propio enlace. Juégalo enseguida, hasta la bandera o hasta la pantalla de fin del juego. Luego itera, un cambio por mensaje: 'haz las colinas más redondas', 'añade tres monedas más antes de la bandera', 'el salto se siente flotante, hazlo más ágil'. Cada cambio es una versión nueva, y las viejas quedan guardadas, así que experimentar no da miedo.

Fíjate en lo que estás practicando: peticiones cortas y observables, probadas en el segundo en que llegan. Ese ciclo, describir, jugar, ajustar, no es un truco de Claude. Es como se hizo en realidad cada juego que has amado, solo que con la centésima parte del equipo. La Lección 5 convierte el ciclo en un sistema; antes, conoce las piezas de las que están hechos los juegos.

Un cambio por mensaje. Juega después de cada cambio. Ese ciclo ES el desarrollo de juegos.

Lección 4

Conoce los recursos: sprites, tiles y sonidos

Los juegos parecen hechos a mano porque se arman con cositas hechas llamadas recursos (assets). Un sprite es la imagen de un personaje. Una hoja de sprites (sprite sheet) son muchos sprites en un solo archivo de imagen, recortados por el código: nuestra tira de corredores guarda ocho retratos en fila, y el juego recorta el que elegiste. Los tiles son los bloques que se repiten y con los que se construye el mundo (hierba, tierra, ladrillo). Los sonidos son los saltos, las monedas y los pisotones que hacen que un juego se sienta vivo. El código es solo el escenario; los recursos son los actores y la escenografía.

Aquí está el paquete completo de Super E2, gratis para cada estudiante de este curso: la tira de corredores, cada corredor como tarjeta, el arte del título y el propio archivo del juego inicial. Descárgalos todos. Son tuyos para remezclar, y cuando salga el set completo de sprites de Dave, esta es la página donde aterrizará.

runners-strip.png
La tira de corredores: los 8 personajes de Super E2 en una sola hoja de sprites (768 x 96). Cambia esta única imagen y cambia todo el elenco.
runner-dave.png
Tarjeta de corredor: Dave
runner-marty.png
Tarjeta de corredor: Marty
runner-jen.png
Tarjeta de corredor: Jen
runner-sally.png
Tarjeta de corredor: Sally
runner-jahvibez.png
Tarjeta de corredor: Jah Vibez
runner-dinesh.png
Tarjeta de corredor: Dinesh
runner-chadwick.png
Tarjeta de corredor: Chadwick
runner-mike.png
Tarjeta de corredor: Mike
super-e2-title.png
El arte de la pantalla de título de Super E2, para tu propia pantalla de título o póster.
starter-game.html
El juego inicial en sí: el archivo exacto que corre en la demo de arriba. Descárgalo, ábrelo, entrégaselo a Claude.

Dos hábitos hacen que los recursos no den problemas. Primero, guarda los originales: nunca edites tu única copia de un sprite. Segundo, respeta las licencias más allá de este curso: la web está llena de paquetes gratuitos generosos (busca 'free platformer assets'), cada uno con sus términos; una línea de crédito en tu juego es la norma cortés. Nuestro paquete no trae esa tarea: es un regalo, úsalo donde quieras.

La tira de corredores de Super E2: ocho retratos de personajes en fila

La tira de corredores: ocho retratos, un solo archivo de imagen. El código recorta el corredor que elijas.

Los recursos son el juego. El código es solo el escenario donde actúan. Guarda originales, da crédito a los extraños, remezcla libremente.

Lección 5

Hazlo tuyo con Claude

Modificar es donde el juego inicial se convierte en tu juego, y es una fórmula que se aprende: nombra la cosa, nombra el cambio, nombra la cantidad. «Gravedad» más «más débil» más «más o menos la mitad» te consigue saltos lunares flotantes en un solo mensaje. El archivo inicial está comentado justamente para esto: búscale GRAVITY, JUMP, CRITTER SPEED y LEVEL, y estarás leyendo el panel de control del juego.

Un menú de primeras remezclas, en orden de alegría por minuto: cambia a tu corredor favorito (la Lección 6 pinta nuevos). Haz los saltos más flotantes o más ágiles. Añade un doble salto. Pinta un nivel nocturno con el mismo código y colores más oscuros. Añade un cronómetro y compite contra tus amigos. Haz un bicho enorme y llámalo jefe. Cada una de esas cosas es una sola frase clara para Claude, y juntas son un portafolio.

Trabaja como un diseñador: ten una listita de cambios que quieres, hazlos de uno en uno y juega después de cada uno. Cuando un cambio rompa algo (pasará), di lo que viste, no lo que crees que hizo el código: «después del doble salto, caigo a través de la segunda plataforma» arregla más errores que cualquier teoría. Roto, bien descrito, arreglado: ese es todo el oficio.

Guarda una copia antes de cada cambio grande. La versión 1 es tu máquina del tiempo, y las descripciones claras son tu llave inglesa.

Lección 6

Caras nuevas con ChatGPT

El elenco de Super E2 son ocho amigos. Tu elenco debería ser tuyo, y ChatGPT es el estudio de retratos. El flujo de trabajo: toma una foto clara, de frente (tuya, de un amigo, con su permiso), y pide a ChatGPT que la redibuje como un sprite de juego con una sola receta consistente, para que todos los retratos combinen: las mismas palabras de estilo, el mismo tamaño, el mismo fondo simple.

La receta que creó el aspecto de nuestro elenco: «Convierte esta foto en un retrato de personaje de juego en pixel art, adorable, de frente, cabeza y hombros, rasgos grandes y legibles, colores planos, fondo azul marino oscuro, formato cuadrado, estilo de pantalla de selección de personaje de videojuego». Pasa cada cara por ese mismo prompt, coloca cada resultado en una celda de la tira de corredores (el archivo inicial muestra la disposición: ocho cuadrados en fila), y tus amigos están en el juego.

ChatGPT también pinta el resto del mundo: una pantalla de título en el mismo estilo, un fondo de atardecer, una bandera con el emblema de tu equipo. Una advertencia desde la experiencia: pide un recurso por imagen, mantén la frase de estilo idéntica en todos, y regenera el que no combine en lugar de aceptar un elenco que no pega. La consistencia es lo que hace que parezca un juego y no un collage.

Una receta, cada cara. La consistencia es la diferencia entre un juego y un collage.

Lección 7

Súbelo a la web

Un juego que nadie puede abrir es un diario. La buena noticia: un juego de un solo archivo es lo más fácil de publicar en la Tierra, y todas las puertas son gratis. Puerta uno: el propio artifact de Claude. El enlace que Claude le da a tu juego ES una página publicada; envíaselo a cualquiera y estará jugando en segundos. Para la mayoría de los primeros juegos, detente aquí y celebra.

Puerta dos: tu propio sitio web. Descarga el archivo del juego (el nuestro de la Lección 4, el tuyo de Claude), súbelo a cualquier sitio que controles, y estará en vivo en tu dirección, junto a tu nombre, para siempre. ¿Lo quieres dentro de una página existente? Una línea de iframe lo inserta, igual que este curso inserta la demo en la Lección 1.

Puerta tres: un alojamiento estático gratuito. Cloudflare Pages, Netlify y GitHub Pages publican un archivo como este por cero dólares, con un enlace real que puedes compartir donde sea (arrastra el archivo a la página de subida de Netlify y terminas en menos de un minuto). Elijas la puerta que elijas, el ritual es el mismo: abre el enlace en tu teléfono, juega un nivel y luego envíalo a un amigo. Un juego con un jugador está publicado; un juego con cero es un borrador.

Un enlace, abierto en tu teléfono, enviado a un amigo. Ese es todo el plan de lanzamiento.

Lección 8

Publícalo, compártelo, remézclalo

El lanzamiento de Super E2 fue una sola publicación en nuestro Discord: el juego, el código y una invitación a remezclarlo. Copia ese lanzamiento. Publica tu enlace donde está tu gente, incluye el archivo y di las palabras que convierten jugadores en constructores: «ponte dentro tú mismo». El primer amigo que publique una remezcla de TU juego te enseña más que diez tutoriales.

Luego sigue, en cualquier orden: un segundo nivel con un set de tiles nuevo. Una canción tema (Suno escribe un chiptune pegajoso en un solo prompt, y ElevenLabs puede poner voz a un pequeño anunciador). Una tabla de puntuaciones con los nombres de tus amigos. Una versión invernal con tiles de nieve y aterrizajes resbaladizos. Cada cosa vale las peticiones de una lección, y el archivo inicial más los recursos de este curso crecen contigo.

Y fíjate en lo que ahora tienes, más allá del juego: la prueba de que puedes describir algo hasta hacerlo existir, juzgar el resultado y publicarlo al mundo gratis. Esa es la habilidad más valiosa de la década, y la aprendiste haciendo que un héroe diminuto saltara sobre un bicho. Hay maneras peores de cambiar tu vida.

Un juego diminuto terminado le gana a una épica soñada, siempre. Publica el diminuto, y luego hazlo menos diminuto.

Sigue aprendiendo

Este curso forma parte de Starvard University, en busca de la grandeza.

Explorar Starvard · Todos los cursos gratuitos