JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.1/phaser.min.js"></script>
<div id="game-area">
</div>
JavaScript
var CANVAS_WIDTH = 600;
var CANVAS_HEIGHT = 400;
var game = new Phaser.Game(CANVAS_WIDTH, CANVAS_HEIGHT, Phaser.AUTO, 'game-area', { create: create, update: update});
var _platform;
var _player;
var _wall;
var _wall_bounce;
var _cursor;
function create(){
//add cursor
_cursor = game.input.keyboard.createCursorKeys();
// set stage physics
game.stage.backgroundColor = 0x808080;
game.physics.startSystem(Phaser.Physics.ARCADE);
_platform = fakeSprite(0, 300, 100, 20, '#0000dd');
_player = fakeSprite(50, 200, 20, 20, '#0000dd');
_wall = fakeSprite(200, 240, 50, 50, '#0000dd');
_wall_bounce = fakeSprite(280, 280, 50, 50, '#00dd00');
game.physics.arcade.enable([_player, _platform, _wall, _wall_bounce]);
_player.body.gravity.y = 500;
_wall.body.immovable = true;
_wall_bounce.body.immovable = true;
_platform.body.immovable = true;
_platform.body.velocity.x = 50;
}
function update(){
game.physics.arcade.collide(_player, _platform, CH_platform, null, this);
game.physics.arcade.collide(_player, _wall, CH_wall, null, this);
game.physics.arcade.collide(_platform, _wall_bounce, CH_wall_bounce, null, this);
// Move the player when an arrow key is pressed
if (_cursor.left.isDown) {
_player.body.velocity.x = -200;
}else if (_cursor.right.isDown){
_player.body.velocity.x = 200;
}else {
_player.body.velocity.x = 0;
}
// Make the player jump if he is touching the ground
if (_cursor.up.isDown && _player.body.touching.down){
_player.body.velocity.y = -250;
}
}
function CH_platform(obj1, obj2){
obj1.body.velocity.x = obj2.body.velocity.x;
}
function CH_wall(obj1, obj2){
null;
}
function CH_wall_bounce(obj1, obj2){
obj1.body.velocity.x = -50;
}
function fakeSprite(x, y, w, h, c) {
// create a new bitmap data object
var bmd = game.add.bitmapData(w, h);
// draw to the canvas context like...