Advertisement
Guest User

Untitled

a guest
Jun 5th, 2014
164
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.43 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Basic Platformer game</title>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width">
  7.     <script src="js/phaser.min.js"></script>
  8.   </head>
  9.   <body>
  10.     <div id="phaser-game"></div>
  11.     <script type="text/javascript">
  12.       (function() {
  13.         var game = new Phaser.Game(
  14.                 1400, 700, // The width and height of the game in pixels
  15.                 Phaser.AUTO, // The type of graphic rendering to use
  16.                 // (AUTO tells Phaser to detect if WebGL is supported.
  17.                 //  If not, it will default to Canvas.)
  18.                 'phaser-game', // The parent element of the game
  19.                 {preload: preload, // The preloading function
  20.                   create: create, // The creation function
  21.                   update: update}); // The update (game-loop) function
  22.  
  23.         function preload() {
  24.           // Load the 'map.json' file using the TILDED_JSON special flag
  25.           game.load.tilemap('map', 'assets/map.json', null, Phaser.Tilemap.TILED_JSON);
  26.          
  27.           // Load the image 'map.png' and associate it in the cache as 'mapTileset'
  28.           game.load.image('map', 'assets/map.png');
  29.          
  30.           // Load the spritesheet 'character.png', telling Phaser each frame is 30x48
  31.           game.load.spritesheet('character', 'assets/character.png', 30, 48);
  32.         }
  33.  
  34.         var map; // The tilemap
  35.         var landLayer; // A landLayer within a tileset
  36.         var seaLayer; // A seaLayer within a tileset
  37.         var player; // The player-controller sprite
  38.         var facing = "left"; // Which direction the character is facing (default is 'left')
  39.         var cursors; // A reference to the keys to use for input detection
  40.         var jumpButton; // A reference to the button used for jumping
  41.         var hozMove = 160; // The amount to move horizontally
  42.         var vertMove = -120; // The amount to move vertically (when 'jumping')
  43.         var jumpTimer = 0; // The initial value of the timer
  44.  
  45.         function create() {
  46.          
  47.           // Make the background color of the game's stage be white (#FFFFFF)
  48.           game.stage.backgroundColor = '#FFFFFF';
  49.          
  50.           // Start the physics system ARCADE
  51.           game.physics.startSystem(Phaser.Physics.ARCADE);
  52.  
  53.           // Add the tilemap 'map' to the game
  54.           map = game.add.tilemap('map');
  55.          
  56.           // Add the tileset image 'level' to the map
  57.           // (The name must match both an image in Phaser's cache
  58.           //  and the name of an image withi the 'map.json'
  59.           //  list of tilesets too.)
  60.           map.addTilesetImage('map');
  61.          
  62.           // Create a landLayer from the 'map.json' file
  63.           // based on 'Tile Layer 1' from the available tiles.
  64.           landLayer = map.createLayer('Land');
  65.          
  66.           // Create a seaLayer from the 'map.json' file
  67.           // based on 'Tile Layer 1' from the available tiles.
  68.           //seaLayer = map.createLayer('Sea');
  69.          
  70.           // Set the collision range
  71.           //  Here, the range is from 0 (the first tile) to the fifth (last tile).
  72.           map.setCollisionBetween(1, 200, true, 'Land');
  73.          
  74.           // Tell the landLayer to resize the game 'world' to match its size
  75.           landLayer.resizeWorld();
  76.  
  77.           // Create and add a sprite to the game at the position (2*48 x 6 *48)
  78.           // and using, in this case, the spritesheet 'character'
  79.           player = game.add.sprite(2 * 48, 6 * 48, 'character');
  80.          
  81.           // By default, sprites do not have a physics 'body'
  82.           // Before we can adjust its physics properties,
  83.           // we need to add a 'body' by enabling
  84.           // (As a second argument, we can specify the
  85.           //  physics system to use too. However, since we
  86.           //  started the Arcade system already, it will
  87.           //  default to that.)
  88.           game.physics.enable(player);
  89.          
  90.           // Set the amount of bounce on the physics body of the 'player' sprite
  91.           player.body.bounce.y = 0.1;
  92.          
  93.           // Set the amount of gravity to apply to the physics body of the 'player' sprite
  94.           player.body.gravity.y = 96;
  95.  
  96.           // Tell the game's camera to follow the 'player' sprite
  97.           game.camera.follow(player);
  98.  
  99.           // Have the game create cursor keys (usually arrow keys)
  100.           //  and save the reference to 'cursors'
  101.           cursors = game.input.keyboard.createCursorKeys();
  102.          
  103.           // Add a specifically named key to the input checked for.
  104.           //  In this case, it is the Keyboard.SPACEBAR
  105.           jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
  106.  
  107.         }
  108.  
  109.         function update() {
  110.  
  111.           // Using the physics.arcade system, check if 'player' is colliding
  112.           //  with any tiles within 'landLayer'. If so, seperate them.
  113.           game.physics.arcade.collide(player, landLayer);
  114.  
  115.           // Reset the x (horizontal) velocity
  116.           player.body.velocity.x = 0;
  117.  
  118.           // Check if the left arrow key is being pressed
  119.           if (cursors.left.isDown)
  120.           {
  121.             // Set the 'player' sprite's x velocity to a negative number:
  122.             //  have it move left on the screen.
  123.             player.body.velocity.x = -hozMove;
  124.  
  125.             // Check if 'facing' is not "left"
  126.             if (facing !== "left")
  127.             {
  128.               // Set 'facing' to "left"
  129.               facing = "left";
  130.             }
  131.           }
  132.           // Check if the right arrow key is being pressed
  133.           else if (cursors.right.isDown)
  134.           {
  135.             // Set the 'player' sprite's x velocity to a positive number:
  136.             //  have it move right on the screen.
  137.             player.body.velocity.x = hozMove;
  138.            
  139.             // Check if 'facing' is not "right"
  140.             if (facing !== "right")
  141.             {
  142.               // Set 'facing' to "right"
  143.               facing = "right";
  144.             }
  145.           }
  146.          
  147.           // Check if the jumpButton (SPACEBAR) is down AND
  148.           //  if the 'player' physics body is onFloor (touching a tile) AND
  149.           //  if the current game.time is greater than the value of 'jumpTimer'
  150.           //  (Here, we need to make sure the player cannot jump while alreay in the air
  151.           //   AND that jumping takes place while the sprite is colliding with
  152.           //   a tile in order to jump off it.)
  153.           if (jumpButton.isDown && player.body.onFloor() && game.time.now > jumpTimer)
  154.          {
  155.            // Set the 'player' sprite's y velocity to a negative number
  156.            //  (vertMove is -90) and thus have it move up on the screen.
  157.            player.body.velocity.y = vertMove;
  158.             // Add 650 and the current time together and set that value to 'jumpTimer'
  159.             // (The 'jumpTimer' is how long in milliseconds between jumps.
  160.             //   Here, that is 650 ms.)
  161.             jumpTimer = game.time.now + 650;
  162.           }
  163.  
  164.           // Check if 'facing' is "left"
  165.           if (facing === "left") {
  166.             // Set the 'player' to the second (1) frame
  167.             //  ('facing' is "left")
  168.             player.frame = 1;
  169.           } else {
  170.             // Set the 'player' to the first (0) frame
  171.             //  ('facing' is "right").
  172.             player.frame = 0;
  173.           }
  174.  
  175.         }
  176.       }());
  177.     </script>
  178.   </body>
  179. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement