JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/photonstorm/phaser/releases/download/v2.4.8/phaser.js"></script>
<div id="testEnvironmentContainer">
</div>
JavaScript
testEnvironment = function() { };
testEnvironment.prototype = {
start: function() {
this.game = new Phaser.Game({
width: 400,
height: 300,
renderer: Phaser.CANVAS,
parent: 'testEnvironmentContainer'
});
this.game.state.add('play', {
preload: this.preloadGame.bind(this),
create: this.createGame.bind(this),
update: this.updateGame.bind(this)
});
this.game.state.start('play');
},
stop: function() {
this.game.state.destroy();
},
preloadGame: function() {
this.game.stage.backgroundColor = '#9ad3de';
this.game.stage.disableVisibilityChange = true;
this.game.load.physics(
'physicsData',
null,
{
"ball": [
{
"density": 20,
"friction": 0,
"bounce": 0,
"filter": { "categoryBits": 1, "maskBits": 65535 },
"shape": [ 24, 8 , 24, 16 , 16, 24 , 8, 24 , 0, 16 , 0, 8 , 8, 0 , 16, 0 ]
}
]
}
);
},
createGame: function() {
this.game.physics.startSystem(Phaser.Physics.P2JS);
this.game.physics.p2.setImpactEvents(true);
this.game.physics.p2.gravity.y = 770;
this.ballCollisionGroup = this.game.physics.p2.createCollisionGroup();
this.wallCollisionGroup = this.game.physics.p2.createCollisionGroup();
this.groundCollisionGroup = this.game.physics.p2.createCollisionGroup();
this.game.physics.p2.updateBoundsCollisionGroup();
this.worldMaterial = this.game.physics.p2.createMaterial('world');
this.ballMaterial = this.game.physics.p2.createMaterial('ball');
this.netBallDelimiterMaterial = this.game.physics.p2.createMaterial('netBallDelimiter');
this.game.physics.p2.setWorldMaterial(this.worldMaterial);
/**
* Ball
*/
this.createBall();
/**
*...