JSFiddle - React, Tailwind, and code Playground

by Tom LeGrand

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.0.4/phaser.min.js"></script>
<div id="test"></div>

JavaScript

var bgGroup, zoomValue = 1.35;

function create (game) {

    game.world.setBounds(0, 0, 2000, 2000);
		//ad a world'scaling
		game.world.scale.set(zoomValue);
    //apply the scaling on the input
    game.input.scale.set(1 / zoomValue);
    
    //some rectangles to understand what's going on
    for (var i = 0; i < 300; i++) {
        size = game.rnd.integerInRange(5, 20);
        sqr = game.add.graphics(game.rnd.integerInRange(0, 2000/zoomValue), game.rnd.integerInRange(0, 2000/zoomValue), bgGroup);
        sqr.beginFill(0x666666);
        sqr.drawRect(size * -0.5, size * -0.5, size, size); // center the square on its position
        sqr.endFill();
    }
    
    // add a player sprite to give context to the movement
    player = game.add.graphics(250, 200);
    player.beginFill(0x00ff00);
    player.drawCircle(0, 0, 30);
    player.lineStyle(2, 0xFFFFFF, 1);
    player.drawRect(0, 0, 29, 2);
    
  	//a basic camera
    //game.camera.follow(player);
}

function update (game) {    
    player.rotation = game.physics.arcade.angleToPointer(player);
    
    // movement
    if (game.input.keyboard.isDown(Phaser.Keyboard.UP) && (player.y - 30) >= 0) {
      player.y -= 5;
    }
    else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN) && player.y + 30 <= 2000/1.35) {
      player.y += 5;
    }
    if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT) && player.x - 30 >= 0) {
      player.x -= 5;
    }
    else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT) && player.x +30 <= 2000/1.35) {
      player.x += 5;
    }
    game.camera.setPosition(player.x*zoomValue-250, player.y*zoomValue-200);
}

game = new Phaser.Game(500, 400, Phaser.AUTO, 'test', { create: create, update: update});