Build games as easily as you play them — join the Phaser Beam waitlist for Early Access.
                
            
            var config = { type: Phaser.AUTO, width: 800, height: 600, parent: 'phaser-example', physics: { default: 'arcade', arcade: { debug: false, x: 200, y: 50, width: 400, height: 500 } }, scene: { preload: preload, create: create, update: update } }; var game = new Phaser.Game(config); var block1; var block2; var block3; var flower; var gfx; var text; function preload() { this.load.setBaseURL('https://cdn.phaserfiles.com/v355'); this.load.image('block', 'assets/sprites/block.png'); this.load.image('flower', 'assets/sprites/flower-exo.png'); this.load.image('atari', 'assets/sprites/atari800.png'); } function create() { block1 = this.physics.add.image(400, 150, 'block'); block2 = this.physics.add.image(400, 300, 'block'); block3 = this.physics.add.staticImage(400, 450, 'block'); flower = this.physics.add.image(400, 100, 'flower'); block1.body.setImmovable(true); block2.body.setImmovable(true); // Will cause `blocked` (last). flower.setCollideWorldBounds(true); gfx = this.add.graphics(); text = this.add.text(0, 0, '-'); this.physics.add.collider(flower, [ block1, // Will cause `embedded` block2, // Will cause `touching` block3 // Will cause `blocked` and `touching` ]); this.time.delayedCall(2000, function () { block1.disableBody(true, true); flower.setGravity(0, 600); }); this.time.delayedCall(4000, function () { block2.disableBody(true, true); }); this.time.delayedCall(6000, function () { block3.disableBody(true, true); }); } function update() { gfx.clear(); gfx.lineStyle(1, 0x666666); gfx.strokeRectShape(this.physics.world.bounds); draw(block1); draw(block2); draw(block3); draw(flower); text.setText([ 'Flower:', '', JSON.stringify( Phaser.Utils.Objects.Pick( flower.body, ['blocked', 'touching', 'embedded'] ), null, 2 ) ]); } function draw(obj) { if (!obj.active) return; var body = obj.body; gfx.lineStyle(11, 0xffff00, 0.5); drawFaces(body, body.touching); gfx.lineStyle(11, 0xff0000, 0.5); drawFaces(body, body.blocked); if (body.embedded) { gfx.lineStyle(5, 0x00ccff, 0.5); gfx.lineBetween(body.left, body.top, body.right, body.bottom); gfx.lineBetween(body.left, body.bottom, body.right, body.top); } } function drawFaces(body, faces) { if (faces.left) { gfx.lineBetween(body.left, body.top, body.left, body.bottom); } if (faces.up) { gfx.lineBetween(body.left, body.top, body.right, body.top); } if (faces.right) { gfx.lineBetween(body.right, body.top, body.right, body.bottom); } if (faces.down) { gfx.lineBetween(body.left, body.bottom, body.right, body.bottom); } }
var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    physics: {
        default: 'arcade',
        arcade: {
            debug: false,
            x: 200, y: 50, width: 400, height: 500
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};
var game = new Phaser.Game(config);
var block1;
var block2;
var block3;
var flower;
var gfx;
var text;
function preload() 
{
        this.load.setBaseURL('https://cdn.phaserfiles.com/v355');
    this.load.image('block', 'assets/sprites/block.png');
    this.load.image('flower', 'assets/sprites/flower-exo.png');
    this.load.image('atari', 'assets/sprites/atari800.png');
}
function create() 
{
    block1 = this.physics.add.image(400, 150, 'block');
    block2 = this.physics.add.image(400, 300, 'block');
    block3 = this.physics.add.staticImage(400, 450, 'block');
    flower = this.physics.add.image(400, 100, 'flower');
    block1.body.setImmovable(true);
    block2.body.setImmovable(true);
    // Will cause `blocked` (last).
    flower.setCollideWorldBounds(true);
    gfx = this.add.graphics();
    text = this.add.text(0, 0, '-');
    this.physics.add.collider(flower, [
        block1, // Will cause `embedded`
        block2, // Will cause `touching`
        block3  // Will cause `blocked` and `touching`
    ]);
    this.time.delayedCall(2000, function () 
    {
        block1.disableBody(true, true);
        flower.setGravity(0, 600);
    });
    this.time.delayedCall(4000, function () 
    {
        block2.disableBody(true, true);
    });
    this.time.delayedCall(6000, function () 
    {
        block3.disableBody(true, true);
    });
}
function update() 
{
    gfx.clear();
    gfx.lineStyle(1, 0x666666);
    gfx.strokeRectShape(this.physics.world.bounds);
    draw(block1);
    draw(block2);
    draw(block3);
    draw(flower);
    text.setText([
        'Flower:',
        '',
        JSON.stringify(
            Phaser.Utils.Objects.Pick(
                flower.body,
                ['blocked', 'touching', 'embedded']
            ),
            null,
            2
        )
    ]);
}
function draw(obj) 
{
    if (!obj.active) return;
    var body = obj.body;
    gfx.lineStyle(11, 0xffff00, 0.5);
    drawFaces(body, body.touching);
    gfx.lineStyle(11, 0xff0000, 0.5);
    drawFaces(body, body.blocked);
    if (body.embedded) 
    {
        gfx.lineStyle(5, 0x00ccff, 0.5);
        gfx.lineBetween(body.left, body.top, body.right, body.bottom);
        gfx.lineBetween(body.left, body.bottom, body.right, body.top);
    }
}
function drawFaces(body, faces) 
{
    if (faces.left) 
    {
        gfx.lineBetween(body.left, body.top, body.left, body.bottom);
    }
    if (faces.up) 
    {
        gfx.lineBetween(body.left, body.top, body.right, body.top);
    }
    if (faces.right) 
    {
        gfx.lineBetween(body.right, body.top, body.right, body.bottom);
    }
    if (faces.down) 
    {
        gfx.lineBetween(body.left, body.bottom, body.right, body.bottom);
    }
}