Implementing game restart

We should click on the restart icon on the game over screen. It is the first button in the row below GAME OVER!, we will implement the restart function with the following steps:

  1. Let's add the restart function as an event listener for the click event:
    document.getElementById('restart').addEventListener("click", restart);

    The restart function looks like this:

    function restart() {
    gameOverText.visible = false;
    document.getElementById('game-over').style.display = "none";
    killBubbleRange(0, 0, BOARD_COLS - 1, BOARD_ROWS - 1);
    removeKilledBubbles();
    score = 0;
    scoreText.text = 'score: ' + score;
    refillBoard();
    return false;
}
  2. In the function, we hide the Game Over! text as well as the following three icons:
    • Restart
    • Share
    • Share with Instagram
  3. After that, we kill all the bubbles on the board and remove them from the stage using the killBubbleRange and removeKilledBubbles functions, which are already defined. Also, we reset the score value and score text on the screen.
  4. Finally, we call the function to refill the board.

When you click on the restart button, you will see a clean board and bubbles will start dropping down from the top. For example, here is a single frame from the restart process:

Implementing game restart
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.143.3.208