One thing we’re still missing from our game is a scoring system to motivate our players. We can store our score as property in the gameState object and increase it as the game progresses. To display the score we can call this.add.text(). We should also consider when we want to increase the score, e.g. increase the score every 10 seconds, or each time an enemy is generated, or how much the player sprite moves, etc…

For our game, we could increase the score each time the player sprite dodges a bug. When a player dodges a bug, it collides with the platform, so we can add our logic in that Collider object. Let’s do that now!

When a game starts we should set a new property with a key of score and value of 0 in the gameState object like so:

const gameState = { score: 0 };

We’ll also need gameState to display the score on screen. In create() we would add:

gameState.scoreText = this.add.text(16, 16, 'Score: 0', { fontSize: '15px', fill: '#000000' })

Now we can access gameState.scoreText and change the text to display the increased score. Since we want to increment gameState.score when a bug collides with the ground platform, we need to add that logic to our ColliderObject:

this.physics.add.collider(bugs, platforms, function (bug){
  bug.destroy();

  gameState.score += 10;
  gameState.scoreText.setText(`Score: ${gameState.score}`)
})

Let’s incorporate this into our game!