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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Define la dimensión de la rejilla y el método para colocar entidades en ella. | |
| Crafty.c('Rejilla', { | |
| init: function( ) { | |
| this.attr({ | |
| w: Game.anchoCelda, | |
| h: Game.altoCelda | |
| }) | |
| }, | |
| en: function(x, y) { | |
| this.attr({ x: x * Game.anchoCelda, y: y * Game.altoCelda }); | |
| return this; | |
| } | |
| }); | |
| //Componente que agrupa los comportamientos comunes, | |
| Crafty.c('Actor', { | |
| init: function( ) { | |
| this.requires('2D, Canvas, Rejilla, Color'); | |
| }, | |
| }); | |
| // Dotamos a los actores de color y personalidad | |
| Crafty.c('MuroNegro', { | |
| init: function( ) { | |
| this.requires('Actor, Color, Pared'); | |
| this.color('black'); | |
| }, | |
| }); | |
| Crafty.c('MuroMarron', { | |
| init: function( ) { | |
| this.requires('Actor, Color, Pared'); | |
| this.color('brown'); | |
| }, | |
| }); | |
| // Esta componente será nuestro jugador, añadimos código para la colisión. | |
| Crafty.c('Politico', { | |
| init: function() { | |
| this.requires('Actor, Fourway, Color, Collision') | |
| .fourway(4) | |
| .color('rgb(20, 75, 40)') | |
| .onHit('Pared', this.detenerMov) | |
| .onHit('Tesoro', this.recogerTesoro) | |
| }, | |
| // detiene el movimiento | |
| detenerMov: function() { | |
| if (this._movement) { | |
| this.x -= this._movement.x; | |
| this.y -= this._movement.y; | |
| } | |
| }, | |
| recogerTesoro: function(datos) { | |
| datos[0].obj.recogido(); //Disparamos el evento recogido del Tesoro | |
| } | |
| }); | |
| // Para ganar el juego nuestro jugador debe recoger todos los tesoros | |
| 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'); | |
| } | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Esta rejilla marca como será nuestro mapa: (0) nada, (1) muro exterior, (2) muro interior, (3) Tesoro | |
| var mapa = [[1, 1, 1, 1, 1, 1, 1, 1, 1, 1], | |
| [1, 3, 2, 2, 3, 2, 3, 2, 2, 1], | |
| [1, 0, 0, 2, 0, 2, 0, 0, 0, 1], | |
| [1, 2, 0, 2, 0, 2, 2, 2, 0, 1], | |
| [1, 2, 0, 0, 0, 0, 0, 2, 0, 1], | |
| [1, 2, 2, 2, 0, 2, 0, 2, 0, 1], | |
| [1, 0, 0, 0, 0, 2, 0, 2, 0, 1], | |
| [1, 0, 2, 2, 0, 2, 0, 2, 0, 1], | |
| [1, 0, 2, 2, 3, 2, 0 ,0 ,3, 1], | |
| [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]]; | |
| Game = { | |
| // Definimos tamaño que va a tener cada celda | |
| anchoCelda : 32, | |
| altoCelda : 32, | |
| start:function(){ | |
| // Definimos las dimensiones del canvas en proporción al tamaño de la celda. | |
| var anchoCanvas = mapa[0].length * Game.anchoCelda; | |
| var largoCanvas = mapa.length * Game.altoCelda; | |
| Crafty.init(anchoCanvas, largoCanvas); | |
| Crafty.background('rgb(249, 223, 125)'); | |
| Crafty.scene('Loading'); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Escena Loading: Muestra un texto por si el juego tarda mucho en cargar | |
| // después inicia la escena principal 'Game' | |
| Crafty.scene('Loading', function(){ | |
| Crafty.e('2D, DOM, Text') | |
| .text('Cargando...') | |
| .attr({ x: 110, y: 140 }) | |
| .textFont({size:'13px'}) | |
| Crafty.scene('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); | |
| }); | |
| // Pantalla de 'Victoria'. Crea un texto y espera la pulsación de una tecla | |
| // para volver a llamar a la escena principal. | |
| Crafty.scene('Victory', function() { | |
| 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() { | |
| Crafty.scene('Game'); | |
| }); | |
| }, function() { | |
| this.unbind('KeyDown'); | |
| }); | |
Ah se me olvidaba... si queréis ver como queda.... PINCHAD AQUÍ!!!!
No hay comentarios:
Publicar un comentario