Cómo crear colisiones y rebotes en 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.

↻

Artículo original de 2014 · revisado en 2026

Esta entrada forma parte del archivo histórico del blog. Se ha limpiado su HTML y conservado el contenido original; cuando utiliza APIs antiguas, se indica el contexto para no confundirlas con las versiones modernas.

Phaser clásico · código histórico

como hacer colisiones con html5

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:

JavaScriptCódigo histórico

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:

JavaScriptCódigo histórico

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:

JavaScriptCódigo histórico

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.

!

Demo histórico no disponible

El ejemplo original estaba alojado en Google Drive Web Hosting, un servicio retirado. Conservamos esta referencia para documentar el tutorial: https://12c4452b5cb31a16182543570478b168fcdade85.googledrive.com/host/0B9AohO0VxFJLeEp2R2xrLTVQZVk/rebote.html .

Hasta la proxima !!!.

Contexto actual

El código de esta entrada pertenece a una versión antigua de Phaser. El concepto de colisiones y física, sprites y recursos sigue siendo útil, pero para un proyecto nuevo conviene consultar la API de la versión de Phaser que estés utilizando en lugar de copiar literalmente estas llamadas.

ADVERTISEMENT

ADVERTISEMENT