En este punto, podríamos decir que ya hemos programado todo nuestro juego. Sin embargo es un poco triste, que después de sufrir financiando nuestro partido, una vez lo consigamos no salga ni un triste mensaje.
Una solución sería poner un mensaje felicitándonos sobreimpresionada. Esto ya lo sabemos hacer, lo vimos aquí, pero sería más elegante tener una pantalla nueva.
Los juegos se componen de menús, pantallas y créditos. Incluso hay juegos que las pantallas difieren mucho unas de otras (tanto que pueden ser un juego nuevo). Es cada uno de estos casos estamos hablando de:
Escenas
Así pues, vamos a dividir lo que teníamos hecho en tres escenas:
- Una inicial de carga por si nuestro juego tarda mucho en cargarse y que ya os anuncio que ni la vamos a ver... :-)
- La propia pantalla del juego
- La pantalla de fin de juego, albricias y felicitaciones.
Estas escenas las crearemos en un fichero nuevo llamado scenes.js que NO deberemos olvidar incluir en nuestro index.html:
<!DOCTYPE html>
<html>
<head>
<script src="lib/crafty.js"></script>
<script src="src/game.js"></script>
<script src="src/componentes.js"></script>
<script src="src/scenes.js"></script>
<script>
window.addEventListener('load', Game.start);
</script>
</head>
<body>
</body>
</html>
Pantalla Final
Yo creo que con esto queda la escena autoexplicada:
Crafty.scene('Victory', function() {
//Ponemos el texto
Crafty.e('2D, Canvas, Text')
.attr({ x: 10, y: 150 })
.textFont({size:'13px'})
.text('Felicidades! Has conseguido financiar tu partido!');
this.restart_game = this.bind('KeyDown', function() {
// Llamamos a la escena del juego
Crafty.scene('Game');
});
}, function() {
this.unbind('KeyDown');
});
Como se puede intuir esto pone el mensaje y espera a que se pulse una tecla para mandarnos a la escena 'Game'.
----------------------------
----------------------------
Pantalla 'Game'
// Escena principal 'Game': Crea las entidades del mapa y del político.
Crafty.scene('Game', function() {
// Colocamos cada cosa en su lugar
for (var x = 0; x < mapa[0].length; x++) {
for (var y = 0; y < mapa.length; y++) {
if (mapa[y][x]==1) {
Crafty.e('MuroNegro').en(x,y);
}
if (mapa[y][x]==2) {
Crafty.e('MuroMarron').en(x,y);
}
if (mapa[y][x]==3) {
Crafty.e('Tesoro').en(x,y);
}
}
}
//Colocamos el personaje principal en el mundo.
Crafty.e('Politico').en(1, 8);
});
Como se ve, aquí dibujamos el mapa y plantamos el personaje en el mismo. No tenemos nada más que hacer ya que todos los comportamientos están definidos en las entidades.
----------------------------
Pantalla Loading...
Crafty.scene('Loading', function(){
Crafty.e('2D, DOM, Text')
.text('Cargando...')
.attr({ x: 110, y: 140 })
.textFont({size:'13px'})
Crafty.scene('Game');
});
Y esta es la pantalla de carga que no veremos nunca... :-)
___________________________________________________________________
Victoria!!!!
Hay un tema que queda pendiente. Y es cómo llamamos a la escena de victoria.
Aquí vimos como hacer que el tesoro se destruyera al pasar por encima de él. Lo que haremos ahora será preguntar si queda algún tesoro y si no queda ninguno llamaremos a la escena de victoria. Por lo tanto modificaremos el componente Tesoro en el fichero componentes.js.
Crafty.c('Tesoro', {
init: function() {
this.requires('Actor, Color')
.color('yellow');
},
recogido: function() {
this.destroy();
// Si no queda ningún tesoro ya hemos terminado.
if (!Crafty('Tesoro').length) {
Crafty.scene('Victory');
}
}
});
__________________________________________________
Código completo
Sólo queda explicar el fichero inicial game.js. Lo único que hace es definir el tamaño del canvas y llamar a la escena 'Loading'. Hago en él una cosa rara y es sacar fuera la tabla del mapa como global, para que se a accesible también desde el fichero de escenas, ya que la escena 'Game' la usa. Ya se que no es muy ortodoxo, pero es lo que tiene saltomatacaballear.
Ah se me olvidaba... si queréis ver como queda.... PINCHAD AQUÍ!!!!
No hay comentarios:
Publicar un comentario