Appendix 5: Gameloop Chapter Code

Below is the code for the game.js file as created on the Gameloop Chapter.

  1 /**
  2  * This is the Game game state. 
  3  * Its our game loop responsible for the game itself.
  4  *
  5  * In the create() function we setup the display.
  6  * In the update() function we do the gameloop.
  7  *
  8  * To learn more about states refer to:
  9  * Refer to: http://docs.phaser.io/Phaser.State.html
 10  */
 11 
 12 GameStates.Game = {
 13     resetBall: function() {
 14         this.ball.reset(160, 240);
 15         this.ball.body.velocity.x = this.ballSpeed;
 16         this.ball.body.velocity.y = this.ballSpeed;
 17     },
 18 
 19     initWorld: function() {
 20         // Some constants
 21         this.playerSpeed = 250;
 22         this.ballSpeed = 220;
 23         this.blocksPerRow = 5;
 24         this.blockRows = 4;
 25         this.playerLives = 13;
 26 
 27         // Add the background
 28         this.add.sprite(0, 0, 'background');
 29     },
 30 
 31 
 32     addPlayer: function () {
 33         // Add the player
 34         this.player = this.add.sprite(160, 440, 'player');
 35         this.physics.arcade.enable(this.player);
 36         this.player.anchor.setTo(0.5, 0);
 37         this.player.enableBody = true;
 38         this.player.body.immovable = true;
 39         this.player.body.collideWorldBounds = true;
 40 
 41 
 42         // Add the display of player lives
 43         this.livesDisplay = this.add.text(10, 8, "Lives: " + 
 44             this.playerLives, {
 45                 fill: "white",
 46                 fontSize: 12
 47             });
 48     },
 49 
 50     addBall: function () {
 51         // Add ball
 52         this.ball = this.add.sprite(160, 240, 'ball');
 53         this.physics.arcade.enable(this.ball);
 54         this.ball.anchor.setTo(0.5, null);
 55         this.ball.enableBody = true;
 56         this.ball.body.bounce.setTo(1, 1);
 57         this.ball.body.velocity.x = this.ballSpeed;
 58         this.ball.body.velocity.y = this.ballSpeed;
 59         this.ball.body.collideWorldBounds = true;
 60     },
 61 
 62     addBlocks: function () {
 63         // Blocks
 64         this.blocks = this.game.add.group();
 65         for (var line = 0; line <= this.blockRows - 1; line++) {
 66             for (var row = 0; row <= this.blocksPerRow - 1; row++) {
 67                 var posY = (line * 30) + 40;
 68                 var posX = (row * 50) + 40;
 69                 console.log("Adding block at: " + posX + "," + posY)
 70                 var temp = this.add.sprite(posX, posY, 'block');
 71                 this.physics.arcade.enable(temp);
 72                 temp.enableBody = true;
 73                 temp.body.immovable = true;
 74 
 75                 this.blocks.add(temp);
 76             }
 77         }
 78     },
 79 
 80     create: function() {
 81         this.initWorld();
 82         this.addPlayer();
 83         this.addBall();
 84         this.addBlocks();
 85     },
 86 
 87     checkHitWithBlocks: function () {
 88         this.game.physics.arcade.collide(this.ball, this.blocks, this.ballCollidesWi\
 89 thBlock);
 90     },
 91 
 92     checkHitWithPlayer: function () {
 93         this.game.physics.arcade.collide(this.ball, this.player);
 94     },
 95 
 96     update: function() {
 97         this.checkHitWithBlocks();
 98         this.checkHitWithPlayer();
 99         this.ballCollidesWithGround();
100     },
101 
102     ballCollidesWithBlock: function(sprite, block) {
103         console.log("Collided with block!");
104         block.kill();
105     },
106 
107     ballCollidesWithGround: function() {
108         if (this.ball.y >= 470) {
109             this.playerLives -= 1;
110             this.resetBall();
111         }
112 
113         /*
114          Update lives display
115          */
116 
117         this.livesDisplay.setText("Lives: " + this.playerLives);
118 
119         if (this.playerLives === 0) {
120             // Soon there will be a game over state switch here
121         }
122 
123     }
124 
125 };