duhaime/game.js

## game.js
// game state
var hitPlatform,
    score = 0,
    scoreText;

/** args:
* [0] canvas width in px
* [1] canvas height in px
* [2] render context {Phaser.CANVAS, Phaser.WEBGL, or Phaser.AUTO}
**/

var game = new Phaser.Game(640, 380, Phaser.AUTO, '', {
  preload: preload,
  create: create,
  update: update
});

function preload() {
  game.load.image('sky', 'moon.png');
  game.load.image('ground', 'platform.png');
  game.load.image('star', 'star.png');
  game.load.spritesheet('player', 'player.png', 140, 240);
}

function create() {
  // specify physics
  game.physics.startSystem(Phaser.Physics.ARCADE);

  // add a background image starting in the origin (upper-left corner)
  game.add.sprite(0, 0, 'sky');

  // add all platforms
  createPlatforms();

  // add all stars
  createStars();

  // add the player
  createPlayer();

  // add the score
  createScore();

  // add a ground
  var ground = platforms.create(0, game.world.height - 64, 'ground');
}

function createPlatforms() {
  // create a group to hold platforms
  platforms = game.add.group();

  // enable body phsics on the entire group
  platforms.enableBody = true;

  // add a ground platform
  var ground = platforms.create(0, game.world.height - 64, 'ground');

  // scale the ground raster data (platform.png is 640 x 32)
  ground.scale.setTo(1, 2);

  // keep the platform immobile when user jumps on it
  ground.body.immovable = true;
}

function createPlayer() {
  // add a player sprite to the game
  player = game.add.sprite(32, game.world.height - 400, 'player');

  // enable physics on the player
  game.physics.arcade.enable(player);

  // specify physics properties for player
  player.body.bounce.y = 0.2;
  player.body.gravity.y = 300;
  player.body.collideWorldBounds = true;

  // specify walking keyframes
  var left = [], right = [];
  for (var i=0; i<6; i++) left.push(43 + i);
  player.animations.add('left', left, 10, true);
  player.animations.add('right', left, 10, true);

  player.scale.setTo(0.5, 0.5);
  player.scale.x = -(Math.abs(player.scale.x));
}

function createStars() {
  stars = game.add.group();
  stars.enableBody = true;

  // create 12 stars
  for (var i = 0; i < 9; i++) {

    // add a star to the group
    var star = stars.create(i * 60, 0, 'star');

    // add gravity to the star
    star.body.gravity.y = 6;

    // give each star a bounce value
    star.body.bounce.y = 0.7 + Math.random() * 0.2;
  }
}

function createScore() {
  scoreText = game.add.text(16, 16, 'score: 0', {
    fontSize: '32px',
    fill: '#fff'
  });
}

/**
* Update
**/

function update() {
  // test for player-platform collisions
  hitPlatform = game.physics.arcade.collide(player, platforms);

  // test for star platform collisions
  game.physics.arcade.collide(stars, platforms);

  // on collide of star and player call callback function
  game.physics.arcade.overlap(player, stars, collectStar, null, this);

  // update the player position given pressed keys
  updatePlayer()
}

function updatePlayer() {
  cursors = game.input.keyboard.createCursorKeys();

  // reset the player's velocity
  player.body.velocity.x = 0;

   //  move left
  if (cursors.left.isDown) {
    player.body.velocity.x = -150;
    player.animations.play('left');
  }
  // move right
  else if (cursors.right.isDown) {
    player.body.velocity.x = 150;
    player.animations.play('right');
  // stop motion
  } else {
    player.animations.stop();
    player.frame = 43;
  }
  // let the player jump if they're on the ground
  if (cursors.up.isDown && player.body.touching.down && hitPlatform) {
    player.body.velocity.y = -350;
  }
}

function collectStar(player, star) {
  star.kill();
  score += 10;
  scoreText.text = 'Score: ' + score;
}

## index.html
<!doctype html>
<html lang='en'>
<head>
	<meta charset='UTF-8' />
	<title>Moonwalk</title>
  <script src='//cdn.jsdelivr.net/phaser/2.6.2/phaser.min.js'></script>
  <style type='text/css'>
    body {
      margin: 0;
      background: #000;
    }
    canvas {
      margin: 15% auto;
    }
  </style>
</head>
<body>
  <script type='text/javascript' src='game.js'></script>
</body>
</html>

## moon.png

      
    Raw
  

              moon.png
            
          
## platform.png

      
    Raw
  

              platform.png
            
          
## player.png

      
    Raw
  

              player.png
            
          
## star.png

      
    Raw
  

              star.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	// game state
	var hitPlatform,
	score = 0,
	scoreText;

	/** args:
	* [0] canvas width in px
	* [1] canvas height in px
	* [2] render context {Phaser.CANVAS, Phaser.WEBGL, or Phaser.AUTO}
	**/

	var game = new Phaser.Game(640, 380, Phaser.AUTO, '', {
	preload: preload,
	create: create,
	update: update
	});

	function preload() {
	game.load.image('sky', 'moon.png');
	game.load.image('ground', 'platform.png');
	game.load.image('star', 'star.png');
	game.load.spritesheet('player', 'player.png', 140, 240);
	}

	function create() {
	// specify physics
	game.physics.startSystem(Phaser.Physics.ARCADE);

	// add a background image starting in the origin (upper-left corner)
	game.add.sprite(0, 0, 'sky');

	// add all platforms
	createPlatforms();

	// add all stars
	createStars();

	// add the player
	createPlayer();

	// add the score
	createScore();

	// add a ground
	var ground = platforms.create(0, game.world.height - 64, 'ground');
	}

	function createPlatforms() {
	// create a group to hold platforms
	platforms = game.add.group();

	// enable body phsics on the entire group
	platforms.enableBody = true;

	// add a ground platform
	var ground = platforms.create(0, game.world.height - 64, 'ground');

	// scale the ground raster data (platform.png is 640 x 32)
	ground.scale.setTo(1, 2);

	// keep the platform immobile when user jumps on it
	ground.body.immovable = true;
	}

	function createPlayer() {
	// add a player sprite to the game
	player = game.add.sprite(32, game.world.height - 400, 'player');

	// enable physics on the player
	game.physics.arcade.enable(player);

	// specify physics properties for player
	player.body.bounce.y = 0.2;
	player.body.gravity.y = 300;
	player.body.collideWorldBounds = true;

	// specify walking keyframes
	var left = [], right = [];
	for (var i=0; i<6; i++) left.push(43 + i);
	player.animations.add('left', left, 10, true);
	player.animations.add('right', left, 10, true);

	player.scale.setTo(0.5, 0.5);
	player.scale.x = -(Math.abs(player.scale.x));
	}

	function createStars() {
	stars = game.add.group();
	stars.enableBody = true;

	// create 12 stars
	for (var i = 0; i < 9; i++) {

	// add a star to the group
	var star = stars.create(i * 60, 0, 'star');

	// add gravity to the star
	star.body.gravity.y = 6;

	// give each star a bounce value
	star.body.bounce.y = 0.7 + Math.random() * 0.2;
	}
	}

	function createScore() {
	scoreText = game.add.text(16, 16, 'score: 0', {
	fontSize: '32px',
	fill: '#fff'
	});
	}

	/**
	* Update
	**/

	function update() {
	// test for player-platform collisions
	hitPlatform = game.physics.arcade.collide(player, platforms);

	// test for star platform collisions
	game.physics.arcade.collide(stars, platforms);

	// on collide of star and player call callback function
	game.physics.arcade.overlap(player, stars, collectStar, null, this);

	// update the player position given pressed keys
	updatePlayer()
	}

	function updatePlayer() {
	cursors = game.input.keyboard.createCursorKeys();

	// reset the player's velocity
	player.body.velocity.x = 0;

	// move left
	if (cursors.left.isDown) {
	player.body.velocity.x = -150;
	player.animations.play('left');
	}
	// move right
	else if (cursors.right.isDown) {
	player.body.velocity.x = 150;
	player.animations.play('right');
	// stop motion
	} else {
	player.animations.stop();
	player.frame = 43;
	}
	// let the player jump if they're on the ground
	if (cursors.up.isDown && player.body.touching.down && hitPlatform) {
	player.body.velocity.y = -350;
	}
	}

	function collectStar(player, star) {
	star.kill();
	score += 10;
	scoreText.text = 'Score: ' + score;
	}
	<!doctype html>
	<html lang='en'>
	<head>
	<meta charset='UTF-8' />
	<title>Moonwalk</title>
	<script src='//cdn.jsdelivr.net/phaser/2.6.2/phaser.min.js'></script>
	<style type='text/css'>
	body {
	margin: 0;
	background: #000;
	}
	canvas {
	margin: 15% auto;
	}
	</style>
	</head>
	<body>
	<script type='text/javascript' src='game.js'></script>
	</body>
	</html>