JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://irok84.kei.pl/share/for_fiddle/phaser/build/phaser.min.js"></script>
<div id="game-container"></div>
CSS
#game-container {
width: 500px;
height: 300px;
background-color: black;
color: #ffffff;
}
JavaScript
var player;
var cursors;
var jumpTimer = 0;
var facing = 'idle';
var physicsEngine = Phaser.Physics.ARCADE;
var elevatorMoveTime = 1500;
function preload() {
game.load.spritesheet('dude', 'http://irok84.kei.pl/share/for_fiddle/assets/dude.png', 32, 48);
game.load.image('elevator', 'http://irok84.kei.pl/share/for_fiddle/assets/elevator.png', 78, 30);
}
function create() {
game.physics.startSystem(physicsEngine);
game.world.setBounds(0, 0, 500, 300);
player = game.add.sprite(100, 100, 'dude');
game.physics.enable(player, physicsEngine);
player.body.collideWorldBounds = true;
player.body.gravity.y = 1800;
player.body.maxVelocity.y = 500;
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('turn', [4], 20, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
elevator1 = game.add.sprite(100, 250, 'elevator');
game.physics.enable(elevator1, physicsEngine);
elevator1.body.immovable = true;
cursors = game.input.keyboard.createCursorKeys();
jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
game.add.tween(elevator1.body)
.to({y: 250}, elevatorMoveTime, Phaser.Easing.Quadratic.InOut)
.to({y: 150}, elevatorMoveTime, Phaser.Easing.Quadratic.InOut)
.loop()
.start();
}
function update() {
game.physics.arcade.collide(player, elevator1);
player.body.velocity.x = 0;
if (cursors.left.isDown)
{
player.body.velocity.x = -150;
if (facing != 'left')
{
player.animations.play('left');
facing = 'left';
}
}
else if (cursors.right.isDown)
{
player.body.velocity.x = 150;
if (facing != 'right')
{
player.animations.play('right');
facing = 'right';
}
}
else
{
if (facing != 'idle')
{
player.animations.stop();
if (facing == 'left')
{
player.frame = 0;
...