JSFiddle - React, Tailwind, and code Playground

by OceanInter

HTML

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

CSS

body {
  margin: 0;
  padding: 0;
}

JavaScript

var Const = {
    WIDTH: 800,
    HEIGHT: 600,
    COLS: 1,
    ROWS: 8,
    BOX_SIZE: 60
};

var game = new Phaser.Game(Const.WIDTH, Const.HEIGHT, Phaser.CANVAS, 'phaser-example', {
    create: create
});

function create() {
    game.physics.startSystem(Phaser.Physics.P2JS);
    game.physics.p2.gravity.y = 300;
    var contactMaterial = this.game.physics.p2.contactMaterial;
    //contactMaterial.friction = 0.8;

    for (var row = 0; row < Const.ROWS; ++row) {
        for (var col = 0; col < Const.COLS; ++col) {
            var view = game.add.sprite();
            view.width = Const.BOX_SIZE;
            view.height = Const.BOX_SIZE;
            view.x = Const.WIDTH / 2 + Const.BOX_SIZE * (-Const.COLS / 2 + col);
            view.y = Const.HEIGHT - Const.BOX_SIZE / 2 - Const.BOX_SIZE * row;
            game.physics.p2.enable(view, true);
        }
    }
}