Search code examples
javascriptanimationgame-physicsphaser-framework

Labyrinth game like box with hole on one end in phaser Js


I need to build a box with maze inside and has a hole on one side. The box will contain some particles also. We need to rotate the box and drop out the particles, through the hole. I tried creating a rectangle by joining sides, and thought of adding it as a group, but its not working. Below is the image of what I am trying to generate. Please help.

enter image description here

var side1 = new Phaser.Physics.Box2D.Body(this.game, null, game.world.centerX - 80, 150, 0); 
side1.setRectangle(350, 15, 0, 0,Math.PI /1.3);
.
.
etc...

Sides are built like this and tried to group them.

It must not be in Box2D, you can use P2JS also.

 


Solution

  • Got the result with Box2d. Now I need only to add particles inside it which I am able to.

    var game = new Phaser.Game(1400, 800, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });       
    var gameTable;
    var polyFrame=[3,0,340,1,341,230,326,234,325,21,183,20,182,47,166,48,164,20,20,21,19,340,165,339,163,195,67,196,68,179,165,177,164,96,182,96,181,178,276,178,277,195,183,196,183,340,326,339,324,281,342,280,341,356,2,357];
    
    function preload(){
        game.load.image('frame', 'assets/frame.png');
    }
    function create() {    
        game.physics.startSystem(Phaser.Physics.BOX2D);
        gameTable = game.add.sprite(100,100, 'frame');    
        game.physics.box2d.enable(gameTable);
        gameTable.body.setPolygon(polyFrame);    
        gameTable.anchor.setTo(0,0);    
    }
    
    function update() {
         gameTable.body.rotateRight(50); 
    }
    
    function render() {    
       game.debug.body(gameTable);
    
    }