Haciendo juegos con Html5

Como hacer colisiones y rebotes con Phaser 

Despues de una temporada muy enfermo vamos a ver un poco mas el uso de la fisica en Phaser en el tutorial fisica hize una explicacion sobre como funciona el sistema de fisicas de este framework, ahora veamos cosas divertidas y utiles.

 Lo que vamos a hacer es accelerar una pelota en todas las direcciones y que esta colisione con todos los bordes y con cualquier otro objeto asi de simple. 


 

Comenzemos: 

Declaramos las variables e creamos la nueva instancia de Phaser.Game:

 
var juego,balon,muñeco, teclas;

var game = new Phaser.Game(500, 500, Phaser.CANVAS, 'caja',
 { preload: preload, create: create, update: update });

Creamos nuestra funcion create:

 
function create() {
    game.physics.startSystem(Phaser.Physics.ARCADE);
  teclas = game.input.keyboard.createCursorKeys();
    balon = game.add.sprite(400, 200, 'ball');
    muñeco = game.add.sprite(400, 200, 'dude');
    game.physics.enable([balon,muñeco], Phaser.Physics.ARCADE);
    muñeco.body.immovable = true;
    balon.body.velocity.setTo(200, 200);
    balon.body.collideWorldBounds = true;
    balon.body.bounce.setTo(1, 1);
}

Bueno inicializamos el sistema de fisica, creamos nuestras teclas, agregamos los sprites, activamos la fisica a ambos objetos.

 No queremos que cuando la bola y el muñeco choquen, el muñeco salga disparado tambien entonces le decimos que no se mueva esto es que immovable sea verdadero, al balon le agregamos velocidad en sus ambos ejes, le permitimos colisionar con el mundo nuestro canvas y con la propidad bounce lo hacemos rebotar cada que colisione.

 Esta propiedad no es mas que un punto(x,y) que es multiplicado a la velocidad, facil un ejemplo seria: velocidadBalon.x *= -fuerzarebote; Con colocarle 1 le estamos colocando el maximo valor seria como el 100% de fuerza al rebotar esto quiere decir que 0.5 seria 50%.

 En la funcion update tenemos:

 
function update () {
    game.physics.arcade.collide(muñeco, balon);
    if (teclas.up.isDown)
    {
        muñeco.body.velocity.y = -300;
    }
    else if (teclas.down.isDown)
    {
       muñeco.body.velocity.y =  300;
    }
} 

Aqui hacemos posible que los dos objetos (muñeco, balon) colisionen y que este muñeco se pueda mover en en su eje Y. Asi de manera simple tenemos algo llamativo, con el cual podemos usar para hacer el clasico pin-pong o otros juegos divertidos. 
 

Hasta la proxima !!!.