Guest User

Phaser/HTML5 - Trying to add five instances to a group and d

a guest
Jul 2nd, 2014
68
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>My Second Phaser Game</title>
  6.     <script type="text/javascript" src="js/phaser.min.js"></script>
  7.     <style type="text/css">
  8.         body {
  9.             font-family: Century Gothic, Arial;
  10.             background-color: #CCCCCC;
  11.             margin: 0px auto;
  12.             text-align: center;
  13.         }
  14.  
  15.         .container {
  16.             background-color: #999999;
  17.             margin: auto;
  18.             width: 1000px;
  19.             height: 1000px;
  20.         }
  21.  
  22.         .header {
  23.             font-size: 22px;
  24.             background-color: #999999;
  25.             border: 1px dashed #666666;
  26.             color: #444444;
  27.             width: 800px;
  28.             font-size: 14px;
  29.             text-align: center;
  30.             margin: 10px auto 0px auto;
  31.         }
  32.  
  33.         canvas {
  34.             padding: 0px;
  35.             margin: auto;
  36.         }
  37.  
  38.         #footer {
  39.             clear:both;
  40.             margin-top: 10px;
  41.             border-top: 5px solid #6D7AB2;
  42.             padding: 20px 0px;
  43.             font-size: 80%;
  44.             text-align:center;
  45.         }
  46.  
  47.         a {
  48.             color: blue;
  49.             text-decoration: none;
  50.         }
  51.     </style>
  52. </head>
  53. <body>
  54.     <div id="header">
  55.         <p>The OrcChaser Remix</p>
  56.     </div>
  57.     <div id="main">
  58.         <div id="game"></div>
  59.         <p>OrcChaser on the Phaser framework. It's fun and awesome, you should <a href="http://http://www.photonstorm.com/phaser/">check it out!</a></p>
  60.     </div>
  61.     <div id="footer">
  62.         <p>Copyrighted whenever I make my own graphics.</p>
  63.     </div>
  64.  
  65. <script type="text/javascript">
  66.  
  67. var game = new Phaser.Game(512, 480, Phaser.AUTO, 'game', { preload: preload, create: create, update: update });
  68.  
  69. function preload() {
  70.  
  71.     game.load.image('background', 'assets/pics/background.png');
  72.     game.load.image('hero', 'assets/pics/hero.png');
  73.     game.load.image('orc', 'assets/pics/monster.png');
  74.  
  75. }
  76.  
  77. var player;
  78. var band;
  79.  
  80. var score = 0;
  81. var scoreText;
  82.  
  83. function create() {
  84.  
  85.     // Enable the Arcade Physics system
  86.     game.physics.startSystem(Phaser.Physics.ARCADE);
  87.  
  88.     // Add the background
  89.     game.add.sprite(0, 0, 'background');
  90.  
  91.     // Add 'orc band' group
  92.     band = game.add.group();
  93.     band.enableBody = true;
  94.  
  95.     // The player and its settings
  96.     player = game.add.sprite(game.world.width / 2, game.world.height / 2, 'hero');
  97.     game.physics.arcade.enable(player);
  98.  
  99.     // Add 5 orcs
  100.     for (var i = 0; i < 5; i++)
  101.     {
  102.         // Create a orc inside the 'band' group
  103.         var orc = band.create(Math.random() * game.world.width - 32, Math.random() * game.world.height - 32, 'orc');
  104.     }
  105.  
  106.     // Score text
  107.     scoreText = game.add.text(32, 32, 'Score: 0', {font: '16px Helvetica', fill: '#000' });
  108.  
  109.     // Controls
  110.     cursors = game.input.keyboard.createCursorKeys();
  111.  
  112. }
  113.  
  114. function update() {
  115.  
  116.     // Collide the player and the orcs
  117.     game.physics.arcade.collide(player, band);
  118.  
  119.     // Checks overlap between player and orcs, if it exists call the catchOrc function
  120.     game.physics.arcade.overlap(player, band, catchOrc, null, this);
  121.  
  122.     // Reset the player's velocity (movement)
  123.     player.body.velocity.x = 0;
  124.     player.body.velocity.y = 0;
  125.  
  126.     if (cursors.left.isDown)
  127.     {
  128.         // Move to the left
  129.         player.body.velocity.x = -150;
  130.     }
  131.     if (cursors.right.isDown)
  132.     {
  133.         // Move to the right
  134.         player.body.velocity.x = 150;
  135.     }
  136.     if (cursors.up.isDown)
  137.     {
  138.         // Move up
  139.         player.body.velocity.y = -150;
  140.     }
  141.     if (cursors.down.isDown)
  142.     {
  143.         // Move down
  144.         player.body.velocity.y = 150;
  145.     }
  146.     if (cursors.left.isDown && cursors.right.isDown)
  147.     {
  148.         // Stops horizontal movement if both left and right are pressed
  149.         player.body.velocity.x = 0;
  150.     }
  151.     if (cursors.up.isDown && cursors.down.isDown)
  152.     {
  153.         // Stops vertical movement if both up and down are pressed
  154.         player.body.velocity.y = 0;
  155.     }
  156.  
  157.     // Checks if entities are inside boundaries
  158.     if (player.x > game.world.width - 64 || player.x < 64 || player.y > game.world.height - 64 || player.y < 64)
  159.     {
  160.         player.x = game.world.width / 2;
  161.         player.y = game.world.height / 2;
  162.     }
  163.     if (band.x > game.world.width - 64 || band.x < 64 || band.y > game.world.height - 64 || band.y < 64)
  164.     {
  165.         band.x = game.world.width / 2;
  166.         band.y = game.world.height / 2;
  167.     }
  168. }
  169.  
  170. function catchOrc (player, band) {
  171.  
  172.     // Removes the orc from the screen
  173.     band.kill();
  174.  
  175.     // Add and update the score
  176.     score += 10;
  177.     scoreText.text = 'Score: ' + score;
  178. }
  179.  
  180. </script>
  181.  
  182. </body>
  183. </html>
RAW Paste Data