pablobarria/index.html

## index.html
<!DOCTYPE html>
<html lang='en-US'>
  <head>
    <meta charset='utf-8'>
    <title>Game</title>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.8/phaser.min.js"></script>
    <script src='index.js'></script>
  </body>
</html>

## index.js
var game = new Phaser.Game(500,500);

var mainState = {
  create: function(){
    game.stage.backgroundColor = '#bdc2c5';
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.world.enableBody = true;
    this.player = game.add.sprite(32,32,box({
      length: 32,
      width: 32,
      color: "#07b53f"
    }));
    this.cursor = game.input.keyboard.createCursorKeys();
    this.player.body.collideWorldBounds = true;

    this.walls = game.add.group();
    this.walls.enableBody = true;
    var top = this.walls.create(0,0, box({
      length: game.world.width,
      width: 16,
      color: "#ed3cd1"
    }));
    top.body.immovable = true;
    var otherWall = this.walls.create(100,150, box({
      length: 300,
      width: 16,
      color: "#ed3cd1"
    }));
    otherWall.body.immovable = true;


  },
  update: function(){
    var speed = 250;
    this.player.body.velocity.y = 0;
    this.player.body.velocity.x = 0;
    if(this.cursor.up.isDown){
      this.player.body.velocity.y -= speed;
    } else if(this.cursor.down.isDown) {
      this.player.body.velocity.y += speed;
    } else if(this.cursor.left.isDown) {
      this.player.body.velocity.x -= speed;
    } else if(this.cursor.right.isDown) {
      this.player.body.velocity.x += speed;
    }
  }
}

game.state.add('main', mainState);
game.state.start('main');

function box(options){
  var bmd = game.add.bitmapData(options.length, options.width);
  bmd.ctx.beginPath();
  bmd.ctx.rect(0,0, options.length, options.width);
  bmd.ctx.fillStyle = options.color;
  bmd.ctx.fill();
  return bmd;
}
	<!DOCTYPE html>
	<html lang='en-US'>
	<head>
	<meta charset='utf-8'>
	<title>Game</title>
	</head>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.8/phaser.min.js"></script>
	<script src='index.js'></script>
	</body>
	</html>
	var game = new Phaser.Game(500,500);

	var mainState = {
	create: function(){
	game.stage.backgroundColor = '#bdc2c5';
	game.physics.startSystem(Phaser.Physics.ARCADE);
	game.world.enableBody = true;
	this.player = game.add.sprite(32,32,box({
	length: 32,
	width: 32,
	color: "#07b53f"
	}));
	this.cursor = game.input.keyboard.createCursorKeys();
	this.player.body.collideWorldBounds = true;

	this.walls = game.add.group();
	this.walls.enableBody = true;
	var top = this.walls.create(0,0, box({
	length: game.world.width,
	width: 16,
	color: "#ed3cd1"
	}));
	top.body.immovable = true;
	var otherWall = this.walls.create(100,150, box({
	length: 300,
	width: 16,
	color: "#ed3cd1"
	}));
	otherWall.body.immovable = true;


	},
	update: function(){
	var speed = 250;
	this.player.body.velocity.y = 0;
	this.player.body.velocity.x = 0;
	if(this.cursor.up.isDown){
	this.player.body.velocity.y -= speed;
	} else if(this.cursor.down.isDown) {
	this.player.body.velocity.y += speed;
	} else if(this.cursor.left.isDown) {
	this.player.body.velocity.x -= speed;
	} else if(this.cursor.right.isDown) {
	this.player.body.velocity.x += speed;
	}
	}
	}

	game.state.add('main', mainState);
	game.state.start('main');

	function box(options){
	var bmd = game.add.bitmapData(options.length, options.width);
	bmd.ctx.beginPath();
	bmd.ctx.rect(0,0, options.length, options.width);
	bmd.ctx.fillStyle = options.color;
	bmd.ctx.fill();
	return bmd;
	}