Run Bob Run - Scoring

Use these instructions to add scoring to your game.

Create our scoring variables
In the load.js file, add the following code to the end of the PRELOAD function.

The code will store our current score and highscore.

    // add two properties to our games to store the score and highscore
    game.score = 0;
    game.highScore = 0;

        

Keep Track of High Score
In the menu.js file, add the code below to the begining of the UPDATE function.

This code will keep track of our high score and reset the score everytime the users goes to the main menu.

    // keep track of our high score
    if (game.score > game.highScore) {
        // players current score is larger than high score
        game.highScore = game.score;
    } 

    // reset our score
    game.score = 0;

        

Display High Score on Main Menu
In the menu.js file, add the code below to the CREATE function. Put the code after the instructions on how to use the keyboard keys to play.

    // display high score
    txtPlay = game.add.text(game.world.centerX, game.world.centerY - game.world.centerY / 6, '', { font: "12pt Courier", fill: "#f4eb42", stroke: "#119f4e", strokeThickness: 2 });
    txtPlay.anchor.set(0.5);
    txtPlay.text = 'High Score: ' + game.highScore;

        

Run Game and Check for Errors
Press F12 to check console for any problems. You should see the high score in the main menu now.

Now let's put some objects in our map to get points!

Load a Heart Image into our game
In the load.js file's PRELOAD function, add the code below.

    var heartData = [
    	'............',
    	'............',
    	'..000..000..',
    	'.0333003330.',
    	'033233332330',
    	'033203302330',
    	'033333333330',
    	'.0333223330.',
    	'..03222230..',
    	'...033330...',
    	'....0330....',
    	'.....00.....'
    ];
    game.bmpHeart = game.create.texture('heart', heartData, 4, 4, 0,false);

    
        

Create a group to store all our hearts
First, in the PRELOAD function of the playlevel1.js file, add some "H"s to your map.

Second, in the CREATE function of the playlevel1.js file, add the code below to create a new "hearts" group. Add the code next to the other groups in our game.

        this.hearts = game.add.group();
    
        

Create heart objects and add them to our game
In the playlevel1.js file's add the following code to the CREATE function inside our MAP loop.

                 
            // if we see the letter H, create a heart
            if (game.map[i][j] == 'H') {
              
                // create heart
                var heart = game.add.sprite(j * this.tileSize, i * this.tileSize, game.bmpHeart);
                game.physics.enable(heart, Phaser.Physics.ARCADE);
                heart.body.immovable = true; 
                heart.anchor.setTo(0.5, 0.5);

                // add heart to the group of flags
                this.hearts.add(heart);
                
            }
    
        

Check if Bob Touches heart
In the playlevel1.js file's add the following code to the UPDATE function next to other lines of code that deal with collision/overlaps.

                 
    // check if player touches a heart.  give them points
    game.physics.arcade.overlap(this.bob, this.hearts, this.heartTouched);
    
        

add Heart Touched function
In the playlevel1.js file's add the following new function after the UPDATE function.

                 
   heartTouched: function(bob, heart) { 
   
    // remove this heart from game
    heart.kill();
    
    // give user points for touching heart
    game.score = game.score + 1000; 
    
  },
    
        

Show Score while playing game
In the playlevel1.js file, add the following code to the end of the CREATE function.

                 
    // show score on screen and fix it to the camera so it moves with player
    this.TextForScoreOnScreen = game.add.text(200, 500, "Score: ", { font: "32px Arial", fill: "#ffffff", align: "center" });
    this.TextForScoreOnScreen.fixedToCamera = true;
    this.TextForScoreOnScreen.cameraOffset.setTo(1, 1);
    
        

In the playlevel1.js file, add the following code to the very begining of the UPDATE function.

                 
    // show score on screen
    this.TextForScoreOnScreen.setText("Score:" + game.score);

        

Run Game and Check for Errors
Press F12 to check console for any problems. Play It! Check if your highscore sticks

code on plnkr