Want to create interactive content? It’s easy in Genially!

Get started free

Javascript: Mi Primer RPG - Cap 1

Erica De Pacheco

Created on June 13, 2025

Start designing with a free template

Discover more than 1500 professional designs like these:

Practical Microsite

Essential Microsite

Akihabara Microsite

Essential CV

Akihabara Resume

Momentum: Manager Guide

Momentum: First Operational Steps

Transcript

Prueba la DEMO del juego, tienes que hacer clic en la imagen de abajo.

Mi Primer RPG:

Javascript: Crea tu propio videojuego Capitulo 1

Empezar

Una aventura paso a paso para diseñar personajes, mundos e historias mientras aprendés a programar en Javascript.

10

¿Listo para comenzar? ¡Haz clic en el icono del editor Vs Code y deja que la magia comience!

Importante: Nunca olvides de guardar tu proyecto en la medida que vas avanzando.

10

En esta actividad, utilizarás el Canvas (lienzo) de videojuegos para crear un plan para tu propio juego. Es posible que no estés listo para crear el código para que tu juego sea real, TODAVÍA . Sin embargo, planear tu propio juego es muy divertido y te ayudará a pensar cómo crearías el juego más tarde usando código.
IR AL LINK ----->

https://docs.google.com/drawings/d/1nBZKtUtQaFfHGIq_dzOqLN6PJmdlOCV-eFBcnMAyNek/edit?usp=sharing

10

Vamos a descargar la plantilla en un archivo zip. Ahi tienes el juego completo, lo tienes que descomprimir y abrir la carpeta "game" con Visual Studio Code

DESCARGA

10

✏️ Reemplazá por tu idea
TUTORIAL: Personalización del Menú Inicial del Juego
🎯 También podés agregar font-size: 32px si querés agrandar el texto. Cambiar el codigo de los colores y la fuente.
🧠 OBJETIVO DE HOY Modificar los colores, textos y fondo de la pantalla de inicio del juego.
1️⃣ CAMBIAR EL TÍTULO Y SUBTÍTULO
📍 Buscá en app.js:
Haz lo mismo con h4

10

2️⃣ CAMBIAR LOS COLORES DE LOS BOTONES
Para cambiar el texto de los botones y su apariencia puedes usar la misma técnica que el titulo y subtitulos
📍 Buscá la linea background:linear-gradient(180deg
Podes modificar color, porcentaje de intensidad y alineación de los colores

10

Para cambiar el color de fondo y las propiedades del mismo busca el código como esta en la imagen

10

10

10

10

10