Untitled

<!DOCTYPE html>
<html>
   <head>
      <title>Basic Platformer game</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width">
      <script src="js/phaser.min.js"></script>
   </head>
   <body>
      <div id="phaser-game"></div>
      <script type="text/javascript">
         (function() {
           var game = new Phaser.Game(
                   1400, 700, // The width and height of the game in pixels
                   Phaser.AUTO, // The type of graphic rendering to use
                   // (AUTO tells Phaser to detect if WebGL is supported.
                   //  If not, it will default to Canvas.)
                   'phaser-game', // The parent element of the game
                   {preload: preload, // The preloading function
                     create: create, // The creation function
                     update: update}); // The update (game-loop) function

           function preload() {
             // Load the 'map.json' file using the TILDED_JSON special flag
             game.load.tilemap('map', 'assets/map.json', null, Phaser.Tilemap.TILED_JSON);

             // Load the image 'level.png' and associate it in the cache as 'level'
             game.load.image('map', 'assets/map.png');

             // Load the spritesheet 'character.png', telling Phaser each frame is 30x48
             game.load.spritesheet('character', 'assets/character.png', 30, 48);
           }

           var map; // The tilemap
           var landLayer; // A landLayer within a tileset
           var seaLayer; // A seaLayer within a tileset
           var player; // The player-controller sprite
           var facing = "left"; // Which direction the character is facing (default is 'left')
           var cursors; // A reference to the keys to use for input detection
           var jumpButton; // A reference to the button used for jumping
           var hozMove = 160; // The amount to move horizontally
           var vertMove = -120; // The amount to move vertically (when 'jumping')
           var jumpTimer = 0; // The initial value of the timer

           function create() {

             // Make the background color of the game's stage be white (#FFFFFF)
             game.stage.backgroundColor = '#FFFFFF';

             // Start the physics system ARCADE
             game.physics.startSystem(Phaser.Physics.ARCADE);

             // Add the tilemap 'map' to the game
             map = game.add.tilemap('map');

             // Add the tileset image 'map' to the map
             // (The name must match both an image in Phaser's cache
             //  and the name of an image withi the 'map.json'
             //  list of tilesets too.)
             map.addTilesetImage('map');

             // Create a landLayer from the 'map.json' file
             // based on 'Land' from the available tiles.
             landLayer = map.createLayer('Land');

             // Create a seaLayer from the 'map.json' file
             // based on 'Sea' from the available tiles.
             seaLayer = map.createLayer('Sea');

             // Set the collision range
             //  Here, the range is from 0 (the first tile) to the fifth (last tile).
             map.setCollisionBetween(1, 153);

             // Tell the landLayer to resize the game 'world' to match its size
             landLayer.resizeWorld();

             // Create and add a sprite to the game at the position (2*48 x 6 *48)
             // and using, in this case, the spritesheet 'character'
             player = game.add.sprite(2 * 48, 6 * 48, 'character');

             // By default, sprites do not have a physics 'body'
             // Before we can adjust its physics properties,
             // we need to add a 'body' by enabling
             // (As a second argument, we can specify the
             //  physics system to use too. However, since we
             //  started the Arcade system already, it will
             //  default to that.)
             game.physics.enable(player);

             // Set the amount of bounce on the physics body of the 'player' sprite
             player.body.bounce.y = 0.1;

             // Set the amount of gravity to apply to the physics body of the 'player' sprite
             player.body.gravity.y = 96;

             // Tell the game's camera to follow the 'player' sprite
             game.camera.follow(player);

             // Have the game create cursor keys (usually arrow keys)
             //  and save the reference to 'cursors'
             cursors = game.input.keyboard.createCursorKeys();

             // Add a specifically named key to the input checked for.
             //  In this case, it is the Keyboard.SPACEBAR
             jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

           }

           function update() {

             // Using the physics.arcade system, check if 'player' is colliding
             //  with any tiles within 'landLayer'. If so, seperate them.
             game.physics.arcade.collide(player, landLayer);

             // Reset the x (horizontal) velocity
             player.body.velocity.x = 0;

             // Check if the left arrow key is being pressed
             if (cursors.left.isDown)
             {
               // Set the 'player' sprite's x velocity to a negative number:
               //  have it move left on the screen.
               player.body.velocity.x = -hozMove;

               // Check if 'facing' is not "left"
               if (facing !== "left")
               {
                 // Set 'facing' to "left"
                 facing = "left";
               }
             }
             // Check if the right arrow key is being pressed
             else if (cursors.right.isDown)
             {
               // Set the 'player' sprite's x velocity to a positive number:
               //  have it move right on the screen.
               player.body.velocity.x = hozMove;

               // Check if 'facing' is not "right"
               if (facing !== "right")
               {
                 // Set 'facing' to "right"
                 facing = "right";
               }
             }

             // Check if the jumpButton (SPACEBAR) is down AND
             //  if the 'player' physics body is onFloor (touching a tile) AND
             //  if the current game.time is greater than the value of 'jumpTimer'
             //  (Here, we need to make sure the player cannot jump while alreay in the air
             //   AND that jumping takes place while the sprite is colliding with
             //   a tile in order to jump off it.)
             if (jumpButton.isDown && player.body.onFloor() && game.time.now > jumpTimer)
             {
               // Set the 'player' sprite's y velocity to a negative number
               //  (vertMove is -90) and thus have it move up on the screen.
               player.body.velocity.y = vertMove;
               // Add 650 and the current time together and set that value to 'jumpTimer'
               // (The 'jumpTimer' is how long in milliseconds between jumps.
               //   Here, that is 650 ms.)
               jumpTimer = game.time.now + 650;
             }

             // Check if 'facing' is "left"
             if (facing === "left") {
               // Set the 'player' to the second (1) frame
               //  ('facing' is "left")
               player.frame = 1;
             } else {
               // Set the 'player' to the first (0) frame
               //  ('facing' is "right").
               player.frame = 0;
             }

           }
         }());
      </script>
   </body>
</html>