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.

Respecto a si funciona, pues podemos verlo aquí