API tools faq
paste
Advertisement
Guest User

Phaser.io Tutorial: Infinite Stars

a guest
Oct 2nd, 2014
279
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.87 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>Phaser - Making your first game, part 9</title>
  6.     <script type="text/javascript" src="js/phaser.min.js"></script>
  7.     <style type="text/css">
  8.         body {
  9.             margin: 0;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.  
  15. <script type="text/javascript">
  16.  
  17. var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
  18.  
  19. function preload() {
  20.  
  21.     game.load.image('sky', 'assets/sky.png');
  22.     game.load.image('ground', 'assets/platform.png');
  23.     game.load.image('star', 'assets/star.png');
  24.     game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
  25.  
  26. }
  27.  
  28. var player;
  29. var platforms;
  30. var cursors;
  31.  
  32. var stars;
  33. var score = 0;
  34. var scoreText;
  35. var starsText;
  36. var fpsText;
  37.  
  38. function create() {
  39.  
  40.     game.time.advancedTiming = true;
  41.  
  42.     //  We're going to be using physics, so enable the Arcade Physics system
  43.     game.physics.startSystem(Phaser.Physics.ARCADE);
  44.  
  45.     //  A simple background for our game
  46.     game.add.sprite(0, 0, 'sky');
  47.  
  48.     //  The platforms group contains the ground and the 2 ledges we can jump on
  49.     platforms = game.add.group();
  50.  
  51.     //  We will enable physics for any object that is created in this group
  52.     platforms.enableBody = true;
  53.  
  54.     // Here we create the ground.
  55.     var ground = platforms.create(0, game.world.height - 64, 'ground');
  56.  
  57.     //  Scale it to fit the width of the game (the original sprite is 400x32 in size)
  58.     ground.scale.setTo(2, 2);
  59.  
  60.     //  This stops it from falling away when you jump on it
  61.     ground.body.immovable = true;
  62.  
  63.     //  Now let's create two ledges
  64.     var ledge = platforms.create(400, 400, 'ground');
  65.     ledge.body.immovable = true;
  66.  
  67.     ledge = platforms.create(-150, 250, 'ground');
  68.     ledge.body.immovable = true;
  69.  
  70.     // The player and its settings
  71.     player = game.add.sprite(32, game.world.height - 150, 'dude');
  72.  
  73.     //  We need to enable physics on the player
  74.     game.physics.arcade.enable(player);
  75.  
  76.     //  Player physics properties. Give the little guy a slight bounce.
  77.     player.body.bounce.y = 0.2;
  78.     player.body.gravity.y = 1000;
  79.     player.body.collideWorldBounds = true;
  80.  
  81.     //  Our two animations, walking left and right.
  82.     player.animations.add('left', [0, 1, 2, 3], 10, true);
  83.     player.animations.add('right', [5, 6, 7, 8], 10, true);
  84.  
  85.     //  Finally some stars to collect
  86.     stars = game.add.group();
  87.  
  88.     //  We will enable physics for any star that is created in this group
  89.     stars.enableBody = true;
  90.  
  91.     //  Here we'll create 12 of them evenly spaced apart
  92.     for (var i = 0; i < 12; i++)
  93.     {
  94.         createStar(i * 70);
  95.     }
  96.  
  97.     //  The score
  98.     scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
  99.     starsText = game.add.text(16, 48, 'stars: 12');
  100.     fpsText = game.add.text(16, 96, 'fps: x');
  101.     //  Our controls.
  102.     cursors = game.input.keyboard.createCursorKeys();    
  103. }
  104.  
  105. function update() {
  106.  
  107.     //  Collide the player and the stars with the platforms
  108.     game.physics.arcade.collide(player, platforms);
  109.     game.physics.arcade.collide(stars, platforms);
  110.  
  111.     //  Checks to see if the player overlaps with any of the stars, if he does call the collectStar function
  112.     game.physics.arcade.overlap(player, stars, collectStar, null, this);
  113.  
  114.     //  Reset the players velocity (movement)
  115.     player.body.velocity.x = 0;
  116.  
  117.     if (cursors.left.isDown)
  118.     {
  119.         //  Move to the left
  120.         player.body.velocity.x = -150;
  121.  
  122.         player.animations.play('left');
  123.     }
  124.     else if (cursors.right.isDown)
  125.     {
  126.         //  Move to the right
  127.         player.body.velocity.x = 150;
  128.  
  129.         player.animations.play('right');
  130.     }
  131.     else
  132.     {
  133.         //  Stand still
  134.         player.animations.stop();
  135.  
  136.         player.frame = 4;
  137.     }
  138.    
  139.     //  Allow the player to jump if they are touching the ground.
  140.     if (cursors.up.isDown && player.body.touching.down)
  141.     {
  142.         player.body.velocity.y = -700;
  143.     }
  144.  
  145.     fpsText.text = game.time.fps + 'fps';
  146. }
  147.  
  148. function collectStar (player, star) {
  149.    
  150.     // Removes the star from the screen
  151.     star.kill();
  152.     createStar(Math.random() * (800 - 96))
  153.     createStar(Math.random() * (800 - 96))
  154.  
  155.     //  Add and update the score
  156.     score += 10;
  157.     scoreText.text = 'Score: ' + score;
  158.  
  159. }
  160.  
  161. function createStar(x) {
  162.   //  Create a star inside of the 'stars' group
  163.   var star = stars.create(x + (Math.random() * 60) - 30, 0, 'star');
  164.  
  165.   //  Let gravity do its thing
  166.   star.body.gravity.y = 100;
  167.  
  168.   //  This just gives each star a slightly random bounce value
  169.   star.body.bounce.y = 0.4 + Math.random() * 0.2;
  170.  
  171.   if (starsText !== 'undefined'&& starsText != null && stars != 'undefined' && stars != null) {
  172.     starsText.text = 'Stars: ' + stars.total;
  173.   }
  174. }
  175.  
  176. </script>
  177.  
  178. </body>
  179. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!