Displaying sprite

Let's make the content of the create() function look like this:

spawnBoard();
scoreText = game.add.text(20, game.world.height - 40, 'score: 0', { font: "20px Arial", fill: "#ffffff", align: "left" });
window.allowInput = true;

Where:

• spawnBoard(): This fills the screen with as many bubbles as possible.

• game.add.text: This adds score: 0 text with Arial font and white color to the bottom-left corner. We will use it later to display the incremented score.

The spawnBoard() method is exactly the function we will use to take out sprite and display it. Let's add the necessary content into this function:

BOARD_COLS = Phaser.Math.floor(game.world.width / BUBBLE_SIZE_SPACED);
BOARD_ROWS = Phaser.Math.floor(game.world.height / BUBBLE_SIZE_SPACED);
bubbles = game.add.group();
for (var i = 0; i < BOARD_COLS; i++)
{
    for (var j = 0; j < BOARD_ROWS; j++)
    {
        var bubble = bubbles.create(i * BUBBLE_SIZE_SPACED, j * BUBBLE_SIZE_SPACED, "BUBBLES");
        bubble.name = 'bubble...