JSFiddle - React, Tailwind, and code Playground

by Gaurav D

HTML

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

JavaScript

var zoomValue = 1.35;

function create(game) {

  game.world.setBounds(0, 0, 2000, 2000);
  game.camera.scale.set(zoomValue); // You could use game.world.scale.set(zoomValue); - which does the same thing essentially.

  //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));
    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);// You can use this too! The lerp in the next line gives you a smooth follow.
  game.camera.follow(player, Phaser.Camera.FOLLOW_LOCKON, 0.1, 0.1);
}


function update(game) {
  player.rotation = game.physics.arcade.angleToPointer(player, game.input.activePointer, game.world);
  // 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 / zoomValue) 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 / zoomValue) player.x += 5;
}

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