Moverse entre escenas
Si creamos varias escenas entre las que moverse, le damos al jugador la posibilidad de explorar y descubrir por su cuenta. Estas escenas las podemos añadir en el archivo index.html:
<escenas-juego class= "pixelart" >
<portada-juego class= "no_pixelart" escena-actual >
<h1>Las heroínas de Deva </h1>
<button data-diálogo= "intro" >Comenzar </button>
<link rel= "stylesheet" href= "escenas/portada.css" >
<script src= "motor/documento.js" ></script>
<script src= "motor/juglar.js" ></script>
<script src= "motor/actividad_diálogos.js" ></script>
</portada-juego>
<escena-paisaje>
<script src= "escenas/paisaje.js" ></script>
<link rel= "stylesheet" href= "escenas/paisaje.css" >
</escena-paisaje>
</escenas-juego>Aquí hay varios elementos
- El elemento escenas-juego en donde meteremos todas las escenas que queramos.
- Ahora tenemos dos escenas: portada-juego y escena-paisaje.
- Dentro de portada-juego tenemos un título h1 y un botón Comenzar.
- Las etiquetas link y script enlazan a otros archivos que necesitamos para dar estilo o meter código.
Un detalle: en los archivos html podemos crear nuestras propias etiquetas, como escena-paisaje, pero siempre han de llevar un guión, a diferencia de las propias etiquetas de html como button.
Por ahora solo nos interesan los archivos paisaje.js y paisaje.css. El primero es muy sencillo: ¿Viste que el botón tenía el atributo:
diálogos .añade ( "intro" ,
Juglar .cambia_escena ( "escena-paisaje" ) ,
) De momento este diálogo hace una sola cosa: cambia la escena actual, haciendo que la portada desaparezca y la escena del paisaje aparezca en su lugar. Ahora solo falta indicar el fondo que tendrá esta escena en el archivo paisaje.css:
escena-paisaje {
background-image :url( 'paisaje.png' ) ;
} De esta manera podemos definir muchas más escenas, cada una de ellas con su propio fondo. Justo eso haremos en el siguiente apartado, además de ver nuevas maneras de movernos entre ellas.