Motor de juegos narrativos y educativos
para aprender programación web
En el archivo "index.html" podrás personalizar varios detalles de tu juego. El título, el logo, los creadores o el texto del botón de inicio. Este archivo indica los diferentes elementos que hay en el juego, de una forma jerárquica. Por ejemplo, dentro de la portada está el logo, la lista de creadores y un botón de inicio:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Demo Juglar </title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<pantalla-juego class="portada actual">
<h1><img src="img/logo.png " title="Demo Juglar "/></h1>
<lista-creadores>
<h2>Créditos </h2>
<ul>
<li>Guionista: Deva </li>
</ul>
</lista-creadores>
<button>Comenzar </button>
<script src="juglar.js"></script>
<script src="juego.js"></script>
</pantalla-juego>
<diálogo-personajes>
<personaje-actual></personaje-actual>
<opciones-diálogo></opciones-diálogo>
<globo-frase>
<nombre-personaje>Nombre</nombre-personaje>
<texto-frase>Texto</texto-frase>
<button>►</button>
</globo-frase>
<botón-saltar>►</botón-saltar>
<link rel="stylesheet" href="actividad_diálogos.css">
<script src="actividad_diálogos.js"></script>
<script src="diálogos.js"></script>
</diálogo-personajes>
</body>
</html>Html es un lenguaje que permite crear documentos. En nuestro caso lo usaremos para hacer las pantallas del juego. El texto que está marcado es lo que puedes modificar para personalizar tu juego, que está principalmente dentro de la portada. Esto incluye la dirección en la que está el logotipo del juego.
Además del texto en si tenemos un montón de etiquetas que permiten al navegador conocer los elementos que hay en la página. Un ejemplo es el botón de inicio, indicado así: <button>Comenzar</button>. Más adelante veremos otras etiquetas que nos serán útiles para el juego.