Warning: The magic method EDD_Blocks::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php on line 101

Warning: The magic method EDD_Blocks::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks/edd-blocks.php on line 101

Warning: The magic method GAINWP_Manager::__wakeup() must have public visibility in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/gainwp.php on line 78

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 555

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 585

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 617

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 651

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 686

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 745

Deprecated: Optional parameter $filter declared before required parameter $metric is implicitly treated as a required parameter in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/ga-in/tools/gapi.php on line 785

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Deprecated: Automatic conversion of false to array is deprecated in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/publitio-offloading/includes/class-publitio-offloading.php on line 577

Deprecated: Automatic conversion of false to array is deprecated in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/publitio-offloading/includes/class-publitio-offloading.php on line 577

Deprecated: Automatic conversion of false to array is deprecated in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/publitio-offloading/includes/class-publitio-offloading.php on line 577

Deprecated: Automatic conversion of false to array is deprecated in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/publitio-offloading/includes/class-publitio-offloading.php on line 577

Deprecated: Automatic conversion of false to array is deprecated in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/publitio-offloading/includes/class-publitio-offloading.php on line 577

Deprecated: Automatic conversion of false to array is deprecated in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/publitio-offloading/includes/class-publitio-offloading.php on line 577

Deprecated: Automatic conversion of false to array is deprecated in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/publitio-offloading/includes/class-publitio-offloading.php on line 577

Deprecated: Automatic conversion of false to array is deprecated in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/publitio-offloading/includes/class-publitio-offloading.php on line 577

Deprecated: Automatic conversion of false to array is deprecated in /home/wcc1969/public_html/phasergames.com/wp-content/plugins/publitio-offloading/includes/class-publitio-offloading.php on line 577

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831

Warning: Cannot modify header information - headers already sent by (output started at /home/wcc1969/public_html/phasergames.com/wp-content/plugins/edd-blocks-master/edd-blocks.php:101) in /home/wcc1969/public_html/phasergames.com/wp-includes/rest-api/class-wp-rest-server.php on line 1831
{"id":1646,"date":"2017-08-19T19:00:07","date_gmt":"2017-08-19T19:00:07","guid":{"rendered":"https:\/\/phasergames.com\/?p=1646"},"modified":"2017-08-19T19:01:08","modified_gmt":"2017-08-19T19:01:08","slug":"creating-endless-runner-game-phaser-part-5-game","status":"publish","type":"post","link":"https:\/\/phasergames.com\/creating-endless-runner-game-phaser-part-5-game\/","title":{"rendered":"Creating an Endless Runner Game in Phaser Part 5 Game Over"},"content":{"rendered":"

Adding A Bird<\/h2>\n

You may have noticed that it is quite easy to jump over the blocks if you just hold down the mouse long enough to jump all the way to the top of the game! So to make it more of a challenge the first thing I thought was to add a bird in the sky. Sometimes you’ll have to jump over the bird and sometimes jump between the bird and the blocks.<\/p>\n

For now, we will just use a blue block to represent the bird.<\/p>\n

\"\"<\/p>\n

You can download that image or download the zip file at the end of this post.<\/p>\n

Let’s start by preloading the bird graphic. Place this in the stateMain.js preload function<\/p>\n

game.load.image(\"bird\", \"images\/bird.png\");<\/pre>\n
Next, we will use a function to create the bird, and we will only have one bird on the screen at a time.<\/p>\n
makeBird: function() {\r\n        \/\/if the bird already exists \r\n        \/\/destroy it\r\n        if (this.bird) {\r\n            this.bird.destroy();\r\n        }\r\n        \/\/pick a number at the top of the screen\r\n        \/\/between 10 percent and 40 percent of the height of the screen\r\n        var birdY = game.rnd.integerInRange(game.height * .1, game.height * .4);\r\n        \/\/add the bird sprite to the game\r\n        this.bird = game.add.sprite(game.width + 100, birdY, \"bird\");\r\n        \/\/enable the sprite for physics\r\n        game.physics.enable(this.bird, Phaser.Physics.ARCADE);\r\n        \/\/set the x velocity at -200 which is a little faster than the blocks\r\n        this.bird.body.velocity.x = -200;\r\n        \/\/set the bounce for the bird\r\n        this.bird.body.bounce.set(2, 2);\r\n    }<\/pre>\n
In the update function, we need to check to see if the bird has flown off the screen<\/p>\n
\/\/if the bird has flown off screen\r\n\/\/reset it\r\nif (this.bird.x < 0) {\r\n     this.makeBird();\r\n}<\/pre>\n
Adding the game over state<\/h2>\n
When the hero crashes into the bird or the block we need the game to be over, and give the player a chance to play again. For that, we need to add a new state to the game. If you are new to using states, please see this post here<\/a>.<\/p>\n
Create a new .js file in your js folder called stateOver.js<\/p>\n
Next, <\/span>let us load a button for play again. You can do this in either the stateMain or the stateOver, but personally, I like to keep all my preloads in one place.<\/p>\n
game.load.image(\"playAgain\", \"images\/playAgain.png\");<\/pre>\n
Download this image or find it in the zip file at the end of this post<\/p>\n
\"\"<\/p>\n
Here is my stateOver.js file<\/p>\n
var StateOver={    \r\n    \r\n    \r\n    create:function()\r\n    {\r\n    \t\/\/add a sprite to be used as a play again button\r\n        this.playAgain=game.add.sprite(game.width\/2,game.height\/2,\"playAgain\");\r\n        \/\/center the button image\r\n        this.playAgain.anchor.set(0.5,0.5);\r\n        \/\/enable for input\r\n        this.playAgain.inputEnabled=true;\r\n        \/\/add an event listener\r\n        this.playAgain.events.onInputDown.add(this.restartGame,this);\r\n    },\r\n    restartGame:function()\r\n    {\r\n    \t\/\/restart the game by starting stateMain\r\n    \tgame.state.start(\"StateMain\");\r\n    }\r\n}<\/pre>\n
Before we can use the state we need to do two things<\/p>\n
    \n
  1. Add the gameOver.js to the index.html file<\/li>\n
  2. Tell Phaser the StateOver variable is a state<\/li>\n<\/ol>\n
    Add this line to your index.html file in the head section<\/p>\n
    <script src=\"js\/stateOver.js\"><\/script><\/pre>\n
    Next, in the main.js file add this line just before the line that starts stateMain<\/p>\n
    game.state.add(\"StateOver\",StateOver);<\/pre>\n
    Wait a second…<\/h2>\n
    We don’t want to immediately show the game over screen because we want the player to see what they hit, and notice the blocks flying about. So we will use a timer to delay starting the gameOver state.<\/p>\n
    In the stateMain.js file we will create 2 functions delayOver and gameOver<\/p>\n
    delayOver: function() {\r\n        this.clickLock = true;\r\n        game.time.events.add(Phaser.Timer.SECOND, this.gameOver, this);\r\n    },\r\n    gameOver: function() {\r\n        game.state.start(\"StateOver\");\r\n    }<\/pre>\n
    The clickLock\u00a0variable is set to lock out any further clicks after the hero has been hit.<\/p>\n
    When the game starts we will set it to false. Add this line to the top of the create statement.<\/p>\n
    this.clickLock = false;<\/pre>\n
    To deny the click add this in the mouseDown function of the game.<\/p>\n
    if (this.clickLock == true) {\r\n            return;\r\n        }<\/pre>\n
    Hooking up to the game over function<\/h3>\n
    So far we have detected collisions in the update function, that allowed objects to react to each other. What we will do now is add a function to that collision detection to be called when the hero hit something.<\/p>\n
    The collide statement can take two functions a collide and a process. I won’t go into the difference here, but we will only be using the collide callback and use null in place of the process callback to ignore it.<\/p>\n
    collide(object1, object2,\u00a0collideCallback<\/span>,\u00a0processCallback<\/span>,\u00a0callbackContext<\/span>)<\/span>\u00a0<\/span><\/h4>\n
    In the update function change<\/p>\n
    game.physics.arcade.collide(this.hero, this.blocks);<\/pre>\n
    TO:<\/p>\n
    game.physics.arcade.collide(this.hero, this.blocks, this.delayOver, null, this);<\/pre>\n
    and add this for the detection of the collision between the bird and the<\/p>\n
    game.physics.arcade.collide(this.hero, this.bird, this.delayOver, null, this);<\/pre>\n
    <\/h2>\n
    Clouds!<\/h2>\n
    After a while, although the game was more challenging, it was still too easy to just jump all the way to the top, so I decided to add some clouds, that the hero should not touch. Why? Acid rain, angry clouds, magic maybe? It is your game, you’ll have to decide why.<\/p>\n
    I used a gray image to represent the clouds since white just made it seem like part of the game was missing on a white background.<\/p>\n
    \"\"<\/p>\n
    First preload the cloud image<\/p>\n
    game.load.image(\"clouds\", \"images\/clouds.png\");<\/pre>\n
    Next, in the create statement, we will load the clouds and stretch it the width of the game. I place it towards the end of the create statement so that the hero will go under the clouds if he jumps that far.<\/p>\n
    \/\/add the clouds\r\nthis.clouds = game.add.sprite(0, 0, \"clouds\");\r\nthis.clouds.width = game.width;<\/pre>\n
    Instead of using physics on the clouds we simply need to check if the hero is up at the top of the screen.<\/p>\n
    In the update function add:<\/p>\n
    if (this.hero.y < this.hero.height) {\r\n    this.hero.body.velocity.y=200;\r\n    this.delayOver();\r\n }<\/pre>\n
    Your stateMain.js file should now look like this:<\/p>\n
    var StateMain = {\r\n    preload: function() {\r\n        game.load.image(\"ground\", \"images\/ground.png\");\r\n        game.load.image(\"hero\", \"images\/hero.png\");\r\n        game.load.image(\"bar\", \"images\/powerbar.png\");\r\n        game.load.image(\"block\", \"images\/block.png\");\r\n        game.load.image(\"bird\", \"images\/bird.png\");\r\n        game.load.image(\"playAgain\", \"images\/playAgain.png\");\r\n        game.load.image(\"clouds\", \"images\/clouds.png\");\r\n    },\r\n    create: function() {\r\n        this.clickLock = false;\r\n        this.power = 0;\r\n        \/\/turn the background sky blue\r\n        game.stage.backgroundColor = \"#00ffff\";\r\n        \/\/add the ground\r\n        this.ground = game.add.sprite(0, game.height * .9, \"ground\");\r\n        \/\/add the hero in \r\n        this.hero = game.add.sprite(game.width * .2, this.ground.y - 25, \"hero\");\r\n        \/\/add the power bar just above the head of the hero\r\n        this.powerBar = game.add.sprite(this.hero.x + 25, this.hero.y - 25, \"bar\");\r\n        this.powerBar.width = 0;\r\n        \/\/add the clouds\r\n        this.clouds = game.add.sprite(0, 0, \"clouds\");\r\n        this.clouds.width = game.width;\r\n        \/\/start the physics engine\r\n        game.physics.startSystem(Phaser.Physics.ARCADE);\r\n        \/\/enable the hero for physics\r\n        game.physics.enable(this.hero, Phaser.Physics.ARCADE);\r\n        game.physics.enable(this.ground, Phaser.Physics.ARCADE);\r\n        \/\/game.physics.arcade.gravity.y = 100;\r\n        this.hero.body.gravity.y = 200;\r\n        this.hero.body.collideWorldBounds = true;\r\n        \/\/this.hero.body.bounce.set(0, .2);\r\n        this.ground.body.immovable = true;\r\n        \/\/record the initial position\r\n        this.startY = this.hero.y;\r\n        \/\/set listeners\r\n        game.input.onDown.add(this.mouseDown, this);\r\n        this.blocks = game.add.group();\r\n        this.makeBlocks();\r\n        this.makeBird();\r\n    },\r\n    mouseDown: function() {\r\n        if (this.clickLock == true) {\r\n            return;\r\n        }\r\n        if (this.hero.y != this.startY) {\r\n            return;\r\n        }\r\n        game.input.onDown.remove(this.mouseDown, this);\r\n        this.timer = game.time.events.loop(Phaser.Timer.SECOND \/ 1000, this.increasePower, this);\r\n        game.input.onUp.add(this.mouseUp, this);\r\n    },\r\n    mouseUp: function() {\r\n        game.input.onUp.remove(this.mouseUp, this);\r\n        this.doJump();\r\n        game.time.events.remove(this.timer);\r\n        this.power = 0;\r\n        this.powerBar.width = 0;\r\n        game.input.onDown.add(this.mouseDown, this);\r\n    },\r\n    increasePower: function() {\r\n        this.power++;\r\n        this.powerBar.width = this.power;\r\n        if (this.power > 50) {\r\n            this.power = 50;\r\n        }\r\n    },\r\n    doJump: function() {\r\n        this.hero.body.velocity.y = -this.power * 12;\r\n    },\r\n    makeBlocks: function() {\r\n        this.blocks.removeAll();\r\n        var wallHeight = game.rnd.integerInRange(1, 4);\r\n        for (var i = 0; i < wallHeight; i++) {\r\n            var block = game.add.sprite(0, -i * 50, \"block\");\r\n            this.blocks.add(block);\r\n        }\r\n        this.blocks.x = game.width - this.blocks.width\r\n        this.blocks.y = this.ground.y - 50;\r\n        \/\/\r\n        \/\/Loop through each block\r\n        \/\/and apply physics\r\n        this.blocks.forEach(function(block) {\r\n            \/\/enable physics\r\n            game.physics.enable(block, Phaser.Physics.ARCADE);\r\n            \/\/set the x velocity to -160\r\n            block.body.velocity.x = -150;\r\n            \/\/apply some gravity to the block\r\n            \/\/not too much or the blocks will bounce\r\n            \/\/against each other\r\n            block.body.gravity.y = 4;\r\n            \/\/set the bounce so the blocks\r\n            \/\/will react to the runner\r\n            block.body.bounce.set(1, 1);\r\n        });\r\n    },\r\n    makeBird: function() {\r\n        \/\/if the bird already exists \r\n        \/\/destory it\r\n        if (this.bird) {\r\n            this.bird.destroy();\r\n        }\r\n        \/\/pick a number at the top of the screen\r\n        \/\/between 10 percent and 40 percent of the height of the screen\r\n        var birdY = game.rnd.integerInRange(game.height * .1, game.height * .4);\r\n        \/\/add the bird sprite to the game\r\n        this.bird = game.add.sprite(game.width + 100, birdY, \"bird\");\r\n        \/\/enable the sprite for physics\r\n        game.physics.enable(this.bird, Phaser.Physics.ARCADE);\r\n        \/\/set the x velocity at -200 which is a little faster than the blocks\r\n        this.bird.body.velocity.x = -200;\r\n        \/\/set the bounce for the bird\r\n        this.bird.body.bounce.set(2, 2);\r\n    },\r\n    update: function() {\r\n        game.physics.arcade.collide(this.hero, this.ground);\r\n        \/\/\r\n        \/\/collide the hero with the blocks\r\n        \/\/\r\n        game.physics.arcade.collide(this.hero, this.blocks, this.delayOver, null, this);\r\n        \/\/\r\n        \/\/collide the blocks with the ground\r\n        \/\/\r\n        game.physics.arcade.collide(this.ground, this.blocks);\r\n        \/\/\r\n        \/\/when only specifying one group, all children in that\r\n        \/\/group will collide with each other\r\n        \/\/\r\n        game.physics.arcade.collide(this.blocks);\r\n        \/\/colide the hero with the bird\r\n        \/\/\r\n        game.physics.arcade.collide(this.hero, this.bird, this.delayOver, null, this);\r\n        \/\/\r\n        \/\/get the first child\r\n        var fchild = this.blocks.getChildAt(0);\r\n        \/\/if off the screen reset the blocks\r\n        if (fchild.x < -game.width) {\r\n            this.makeBlocks();\r\n        }\r\n        \/\/if the bird has flown off screen\r\n        \/\/reset it\r\n        if (this.bird.x < 0) {\r\n            this.makeBird();\r\n        }\r\n        if (this.hero.y < this.hero.height) {\r\n            this.hero.body.velocity.y=200;\r\n            this.delayOver();\r\n        }\r\n    },\r\n    delayOver: function() {\r\n        this.clickLock = true;\r\n        game.time.events.add(Phaser.Timer.SECOND, this.gameOver, this);\r\n    },\r\n    gameOver: function() {\r\n        game.state.start(\"StateOver\");\r\n    }\r\n}<\/pre>\n
     <\/p>\n
     <\/p>\n
    \"\"<\/p>\n
    Click here<\/a> to see the result<\/p>\n
     <\/p>\n\t
    \n\n\t\t\n\t\t
    \n\t\t\t