JSFiddle - React, Tailwind, and code Playground

by Carlos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>
<div id="canvas"></div>

CSS

#canvas{
  height: 500px;
  width: 350px;
}

JavaScript

var game = new Phaser.Game(350, 400, Phaser.CANVAS, 'canvas');

var game_state = {};
game_state.demo = function(){ };

game_state.demo.prototype = {
    init: function(){
        game.stage.backgroundColor = "#4488AA";
        game.physics.startSystem(Phaser.Physics.ARCADE);
        
        this.SPEED = 300;
    },
    preload: function(){
        game.load.image('bomb', 'http://vignette3.wikia.nocookie.net/angrybirdsfanon/images/2/26/Bomb_angry_3.png/revision/latest?cb=20150103221017&path-prefix=es');
        game.load.image('wall_chunk', 'http://images.vectorhq.com/images/premium/thumbs/103/a-fragment-of-a-brick-wall-seamless-vector-texture-wallpaper-in-a-cartoon-style_103578509.jpg')
    },
    create: function(){
        // Sprite
        this.bomb = game.add.sprite(150, 75, 'bomb');                           this.bomb.anchor.set(0.5);
        this.bomb.scale.set(0.5);
        game.physics.arcade.enable(this.bomb);
        this.bomb.body.velocity.setTo(200,200);
        this.bomb.body.collideWorldBounds = true;
        this.bomb.body.bounce.set(1);
        
        // Vertical limits
        var wall_data = [
            // Left side
            {x: -100, y: 0},
            {x: -100, y: 108},
            {x: -100, y: 216},
            {x: -100, y: 324},
            // Right side
            {x: 310, y: 0},
            {x: 310, y: 108},
            {x: 310, y: 216},
            {x: 310, y: 324}
        ]
        this.wall = game.add.group();
        this.wall.enableBody = true;
        
        wall_data.forEach(function(item){
            var wall_chunk = this.wall.create(item.x, item.y, 'wall_chunk');
        }, this);        
        this.wall.setAll('body.immovable', true);
        this.wall.setAll('body.allowGravity', false);
    },
    update: function(){
        game.physics.arcade.collide(this.bomb, this.wall);
    }
};

game.state.add('demo', game_state.demo);
game.state.start('demo');