JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/phaser/2.4.6/phaser.min.js"></script>
Use WASD to move.
<div id="game">
</div>

JavaScript

var game = new Phaser.Game(400, 400, Phaser.AUTO, 'phaser-example', {create: create, update: update});
var guy;
var controls;
function create() {
  var board = game.add.graphics();
  board.lineStyle(1,0xFFFFFF,1);
  for(var i = 0; i < 10; i++){
    board.moveTo(i*46,0);
    board.lineTo(i*46,400);
    board.moveTo(0,i*46);
    board.lineTo(400,i*46);
  }
	guy = game.add.graphics();
  guy.beginFill(0xFF0000,1);
  guy.drawRect(0,0,46,46);
  guy.x = 0; guy.y = 0;
  guy.isMoving = false;
  controls = {
    right: game.input.keyboard.addKey(Phaser.Keyboard.D),
    left: game.input.keyboard.addKey(Phaser.Keyboard.A),
    up: game.input.keyboard.addKey(Phaser.Keyboard.W),
    down: game.input.keyboard.addKey(Phaser.Keyboard.S)
  }
}

function update() {
  if(controls.left.isDown && !guy.isMoving){
    guy.isMoving = true;
    var tween = game.add.tween(guy).to({x: '-46'}, 200, Phaser.Easing.Linear.None, true);
    tween.onComplete.add(function () {guy.isMoving = false;});
  }
  else if(controls.right.isDown && !guy.isMoving){
    guy.isMoving = true;
    var tween = game.add.tween(guy).to({x: '+46'}, 200, Phaser.Easing.Linear.None, true);
    tween.onComplete.add(function () {guy.isMoving = false;});
  }
  else if(controls.up.isDown && !guy.isMoving){
    guy.isMoving = true;
    var tween = game.add.tween(guy).to({y: '-46'}, 200, Phaser.Easing.Linear.None, true);
    tween.onComplete.add(function () {guy.isMoving = false;});
  }
  else if(controls.down.isDown && !guy.isMoving){
    guy.isMoving = true;
    var tween = game.add.tween(guy).to({y: '+46'}, 200, Phaser.Easing.Linear.None, true);
    tween.onComplete.add(function () {guy.isMoving = false;});
  }
}