JSFiddle - React, Tailwind, and code Playground

by Batzi

HTML

<script src="https://github.com/photonstorm/phaser/releases/download/v2.4.4/phaser.js"></script>

JavaScript

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'roam-example', {preload:preload,create: create,update:update});

var player,flag,count;

function preload(){

game.load.crossOrigin = 'anonymous';    game.load.spritesheet('player','http://i.imgur.com/ctRh8np.png',70,125);
}

function create(){
    player = game.add.sprite(200,300,'player',24);
    game.physics.arcade.enable(player);
    player.body.setSize(50, 50, 20, 80);

	player.animations.add('down', [24, 25, 34, 35], 20, true);
    player.animations.add('up', [22, 23, 32, 33], 20, true);
    player.animations.add('left', [8, 9, 18, 19], 20, true);
    player.animations.add('right', [6, 7, 16, 17], 20, true);
    player.animations.add('upLeft', [20, 21, 30, 31], 20, true);
    player.animations.add('upRight', [4, 5, 14, 15], 20, true);
    player.animations.add('downLeft', [2, 3, 12, 13], 20, true);
    player.animations.add('downRight', [0, 1, 10, 11], 20, true);
    
    flag = false;
    count=0;
	
    var path = [[150,300],[250,300],[0,0],[200,300]];
    game.time.events.loop(5000, callMe, this);
    
    
    
    
    
    function callMe(x,y){
        console.log(player.x+'\n'+player.y);
        
        if(count<path.length)
        {
            flag=false;
            var x = path[count][0];
        	var y = path[count][1];
            
            game.physics.arcade.moveToXY(player,x,y,60);
            count++;
        }else count=0;
        
    }
    
    
}

function update(){
    
    if(flag)
        player.body.velocity.set(0);
    
    if(player.x==250)
        flag = true;
    
    if(player.y==0 && player.x==0)
        flag = true;
	if(player.x==150)
        flag=true;
    
    
    moved = false;
    
    if (player.body.velocity.y.toFixed(2) == 0) {
    if (player.body.velocity.x.toFixed(2) < 0) {
        moved = true;
        player.play('left');
    } else if (player.body.velocity.x.toFixed(2) > 0) {
        moved = true;
        player.play('right');
    }
}

if...