JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.8.3/phaser.js"></script>
<script src="http://betoap.000webhostapp.com/phaser-ce/build/phaser.js"></script>
<div id="game"></div>
CSS
#game{
width: 320px;
height: 320px;
margin: 0 auto;
padding: 0;
}
JavaScript
var map;
var layer;
var cursors;
var hero;
var ladder;
var solid;
var details;
var tiles;
var game = new Phaser.Game(320, 320, Phaser.AUTO, 'game', { preload: preload, create: create, update: update, render: render });
function preload()
{
game.load.baseURL = 'https://betoap.000webhostapp.com/';
game.load.crossOrigin = 'anonymous';
game.load.tilemap('map', 'map.json', null, Phaser.Tilemap.TILED_JSON);
game.load.image('tiles', 'tiles.png');
game.load.spritesheet('hero', 'dude.png', 32, 48);
}
function create()
{
game.stage.backgroundColor = "#4488AA";
game.physics.startSystem(Phaser.Physics.ARCADE);
createMap();
createHero();
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
game.physics.arcade.collide(hero, solid);
game.physics.arcade.overlap(hero, ladder, collisionLadder);
hero.body.velocity.x = 0;
if ( cursors.left.isDown ) {
hero.body.velocity.x = -200;
hero.animations.play('left');
} else if ( cursors.right.isDown ) {
hero.body.velocity.x = 200;
hero.animations.play('right');
} else {
hero.animations.stop();
hero.frame = 4;
}
}
function render()
{
//game.debug.body(hero);
}
function collisionLadder(hero, tile)
{
if( tile.index > -1 ) {
if(
Math.abs( hero.x - (tile.worldX + (tile.width/2)) ) < (tile.width/4)
){
if ( cursors.up.isDown ) {
hero.x = tile.worldX + tile.width/2;
hero.body.allowGravity = false;
hero.body.velocity.y = -200;
} else if ( cursors.down.isDown ) {
hero.x = tile.worldX + tile.width/2;
hero.body.allowGravity = false;
hero.body.velocity.y = 200;
} else {
hero.body.allowGravity = true;
}
}
}
}
function createMap()
{
tilemap = game.add.tilemap('map');
tilemap.addTilesetImage('tiles',...