01 · Primero, una experiencia para tu cliente

En esta clase usamos a Loopin, la mascota de Loopian, para construir una aventura en el navegador. El objetivo no es aprender todos los detalles de programación: es aprender a pedir una experiencia concreta y comprobar que funcione.

Necesitás un navegador, una conversación en ChatGPT y la plantilla descargable. Podés seguir el proceso con el juego que ya dejamos preparado.

02 · Definí la idea antes de pedir el código

Elegí una acción que se entienda rápido: caminar y recoger objetos, encontrar diferencias o resolver un desafío breve. Con una sola mecánica podés evaluar si la experiencia tiene sentido.

1. La marca: qué representa y para quién es el juego.
2. El protagonista: aspecto, personalidad y forma de moverse. En nuestro ejemplo, Loopin tiene patitas y camina.
3. La meta: qué debe conseguir quien juega y cómo sabe que terminó.
4. Los controles: teclado en computadora y botones táctiles en celular.
5. El final: mensaje de victoria y opción para volver a jugar.

Buscá referencias para entender cómo explican los controles, orientan al jugador y muestran el progreso. Tomá esas decisiones como inspiración para una propuesta propia.

03 · Hacé un pedido completo

Abrí una conversación nueva, adjuntá una referencia del personaje si la tenés y pegá la plantilla de “Pedido para tu negocio”. Reemplazá los datos de la marca, el objetivo y la mecánica. Pedí una versión jugable con HTML, CSS y JavaScript y que pruebe los controles antes de entregarla.

Leé la explicación de cómo abrir el resultado. Si se entrega un archivo HTML, descargalo y abrilo con el navegador. Si la herramienta ofrece una vista previa, primero probalo ahí. Una vista previa no siempre equivale a una dirección pública permanente.

04 · Probá como si fuera tu primera vez

1. Abrí el juego sin explicarle nada a otra persona. ¿Entiende qué tiene que hacer?
2. Caminá a ambos lados y comprobá los límites del escenario.
3. Intentá ganar, perder y reiniciar. Cada estado debería explicarse.
4. Probá los botones táctiles en un teléfono real. Una emulación ayuda, pero no reemplaza esa prueba.
5. Revisá que las instrucciones no tapen al personaje y que el texto se pueda leer.

Cuando algo falle, describí el problema observable. Por ejemplo: “En el teléfono mantengo presionado derecha y el personaje no avanza; quiero que camine mientras sostengo el botón”. Pedí que corrija eso y volvé a probar también el resto del recorrido.

05 · Tu desafío

Adaptá la plantilla a tu negocio y escribí una meta que se pueda completar en una partida breve. Después pedile a otra persona que juegue sin ayuda.

• ¿Entendió la meta?
• ¿Encontró los controles?
• ¿Pudo terminar y volver a empezar?

Guardá sus respuestas. El ejemplo demuestra el proceso de creación; todavía no mide un aumento de ventas ni de participación de clientes.

Comprobá lo aprendido