JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.js"></script>
<div id ="phaser"></div>
JavaScript
var game = new Phaser.Game(800, 500, Phaser.WEBGL, 'phaser', { preload: preload, create: create, update: update});
var ufo;
var Keys = Phaser.Keyboard;
var speed = 256;
var style = 'default';
function preload() {
game.load.crossOrigin = 'anonymous';
game.load.spritesheet('test1', 'http://i.imgur.com/e12N0ul.png', 72, 144);
game.load.tilemap('desert', 'https://examples.phaser.io/assets/tilemaps/maps/desert.json', null, Phaser.Tilemap.TILED_JSON);
game.load.image('tiles', 'https://examples.phaser.io/assets/tilemaps/tiles/tmw_desert_spacing.png');
}
function create() {
// Make the world larger than the actual canvas
game.add.tileSprite(0, 0, 1920, 1920, 'background');
game.world.setBounds(0, 0, 14000, 14000);
game.add.image(0, 0, 'test');
ufo = game.add.sprite(0, 0, 'test1');
game.physics.startSystem(Phaser.Physics.ARCADE);
game.physics.enable(ufo, Phaser.Physics.ARCADE);
//registration point
ufo.anchor.setTo(0.5, 0.5);
ufo.angle = 31
game.camera.follow(ufo);
game.camera.roundPx = false;
}
function update() {
ufo.body.velocity.x = 0;
ufo.body.velocity.y = 0;
ufo.rotation = game.physics.arcade.angleToPointer(ufo) + 1.57;
if (game.input.keyboard.isDown(Phaser.Keyboard.A))
{
ufo.body.velocity.x = -speed;
}
if (game.input.keyboard.isDown(Phaser.Keyboard.D))
{
ufo.body.velocity.x = speed;
}
if (game.input.keyboard.isDown(Phaser.Keyboard.W))
{
ufo.body.velocity.y = -speed;
}
if (game.input.keyboard.isDown(Phaser.Keyboard.S))
{
ufo.body.velocity.y = speed;
}
}