JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.10.2/phaser.js"></script>
JavaScript
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update ,render: render});
var player;
var platforms;
var cursors;
var jumpButton;
function preload() {
game.stage.backgroundColor = '#131314';
game.load.baseURL = 'http://examples.phaser.io/assets/';
game.load.crossOrigin = 'anonymous';
/*game.load.image('player', 'sprites/phaser-dude.png');*/
game.load.image('platform', 'sprites/platform.png');
game.load.image('platform2', 'sprites/platform.png');
game.load.tilemap('tilemap', 'https://hexus.github.io/phaser-arcade-slopes/assets/maps/demo.json', null, Phaser.Tilemap.TILED_JSON);
}
var player;
var platforms;
var cursors;
var jumpButton;
function create() {
player = game.add.sprite(100, 100);
game.physics.arcade.enable(player);
player.body.collideWorldBounds = true;
player.body.gravity.y = 500;
platforms = game.add.physicsGroup();
platforms.create(500, 150, 'platform');
platforms.create(-200, 300, 'platform');
platforms.create(400, 450, 'platform');
platforms.setAll('body.immovable', true);
cursors = game.input.keyboard.createCursorKeys();
jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
}
function update () {
game.physics.arcade.collide(player, platforms);
player.body.velocity.x = 0;
if (cursors.left.isDown)
{
player.body.velocity.x = -250;
}
else if (cursors.right.isDown)
{
player.body.velocity.x = 250;
}
if (jumpButton.isDown && (player.body.onFloor() || player.body.touching.down))
{
player.body.velocity.y = -400;
}
if (cursors.down.isDown) {
player.body.setSize(60, 89, 0, 0);
} else{
player.body.setSize(60, 130, 0, 0);
}
}
function render () {
game.debug.body(player);
}