CraftyJS: Eventos

Hasta ahora hemos ido desarrollando un sencillo juego de laberintos apto para políticos cuya última versión se encuentra aquí.

Quizá sea el momento de dotar de sentido al juego poniendo un objetivo. Y en fin, creo que nuestro político podría hacer lo que mejor sabe hacer que es financiar su partido.

Para ello crearemos un nuevo componente llamado Tesoro que no difiere en nada de los muros que hemos creado hasta ahora salvo en dos aspectos:

1. No nos interesa que nuestro político se detenga al colisionar con el tesoro, con lo que eliminaremos el componente 'Pared' que usábamos para detectar la colisión y,
2. Le dotaremos de un comportamiento especial al que llamaremos 'recogido' y que lo que hará es destruir el tesoro. Este comportamiento (evento) lo dispararemos cuando detectemos que nuestro político colisiona con el tesoro.

Veamos el código:

Crafty.c('Tesoro', {
  init: function() {
    this.requires('Actor, Color')
      .color('yellow');
  },

  recogido: function() {
    this.destroy();
  }
});

Para colocarlos usaremos nuestra tabla de mapa y pondremos un nuevo objeto tipo 3.

  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]];

Y dibujaremos los tesoros en la misma parte que creábamos los muros y de la misma manera:

      if (mapa[y][x]==3) {
         Crafty.e('Tesoro').en(x,y);
      }

Eventos

 Nos faltaría ver que hacemos con el político:

Lo que haremos es preguntar si colisiona con un Tesoro y lanzar un procedimiento que llame al evento 'recogido' que habíamos definido en el tesoro:

// 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() {
            ...
    },
 
  recogerTesoro: function(datos) {

    datos[0].obj.recogido();      // Disparamos el evento recogido en el tesoro
  }
});

Y con esto ya está.   Os pongo el código completo.   Recordad que para que funcione debéis tener en cuenta todo esto.

	// 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(); // Disparamos el evento recogido del tesoro
	}
	});

view raw componentes.js hosted with ❤ by GitHub

	Game = {
	// Definimos tamaño que va a tener cada celda
	anchoCelda : 32,
	altoCelda : 32,
	start:function(){
	// 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]];
	// 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)');
	// 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);
	}
	}

view raw game.js hosted with ❤ by GitHub

Respecto a si funciona, pues podemos verlo aquí