CraftyJS: Colisiones

Tratar las colisiones en Crafty es muy sencillo, básicamente tenemos que reconocer contra qué nos las pegamos y cómo reaccionamos.

Para ello recuperaremos el laberinto apto para políticos.

Contra qué nos la pegamos

Recordemos que teníamos dos tipos de muro. Definiremos que son de tipo 'Pared'.

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'); }, });

Como veis, no hemos definido anteriormente 'Pared' en ningún lado. Podemos poner el palabro que queramos. Lo que haremos con posterioridad es preguntar si hemos colisionado con algo de tipo 'Pared'. De eso se deduce que si quisiéramos que el personaje de nuestro videojuego reaccionara de manera distinta en cada tipo de muro, deberíamos definir un palabro para cada tipo de muro.

Como detectamos la colisión

Realmente en nuestro laberinto no habíamos creado todavía al protagonista del videojuego: nuestro político. Es por ello que crearemos el componente Político dotándole de movilidad cómo hemos visto aquí. También le incorporaremos la lógica de 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);
  },

  detenerMov: function() {
    if (this._movement) {
      this.x -= this._movement.x;
      this.y -= this._movement.y;
    }
  }
});

 Como vemos importamos el comportamiento Collision. Sin embargo lo más interesante es la llamada al método .onHit. Este método tiene tres parámetros:

El primer parámetro es el tipo de objecto contra el que preguntamos si chocamos. Vamos, lo que en la primera parte de este artículo llamábamos el palabro.

La segunda parte es el nombre de la función a la que llamaremos en el caso de colisión.

La tercera parte, que no está definida en el ejemplo, llamaría a una función que se ejecutaría en caso de que la colisión NO se produjera.

 Dotando de vida a nuestro político

No tiene más, lo tenemos perfectamente definido en nuestro fichero de componentes, por lo tanto lo llamamos:

Crafty.e('Politico').en(1, 8);

El código

¿Pero funciona?

No se, probadlo aquí