[SOLVED] How to call game start method only after fade-in countdown counter?

How to call game start method only after fade-in countdown counter?

Functionality:

Before game starts, there will be a notification period to notify users that game will start in xSecs. During this notification period, users will not be able to use any features:

Countdown counter will not start
Game "Tap Me" image button will not be able to be clicked when user tries to click the button

Hence, after the notification period, then the counter will start the countdown sequence while the user will tap the "Tap Me" image button to move the image from the top of the page to the bottom of the page.

What I have done:

I have created the notification timer as well as the countdown counter and the game tap. Hence, at this moment, the countdown timer will only start counting when the notification timer is completed.

Issue:

Users are still able to use the "Tap Me" image button to move the image down the page even during the notification period. Hence, I need to ensure that the users are not able to use the "Tap Me" image button during the notification countdown but only after the notification countdown.

Therefore, how am I able to set the "Tap Me" method to be able to be used only after the notification countdown?

var count = 5,
  interval, CounterInterval, x;
//Method to enable star to decrease when 'tap' button is tapped
var step = 20,
  counter = 0,
  timer = 20;
//To set bottom limit variable
var bottomStarLimit = 2308;

function GameStartTimer() {
    if (count > 0) {
      $("#CountdownFadeInTimer").fadeOut('slow', function() {
        $("#CountdownFadeInTimer").text(count);
        $("#CountdownFadeInTimer").fadeIn();
        count--;
      });
    } else if (count == 0) {
      $("#CountdownFadeInTimer").fadeOut('slow', function() {
        $("#CountdownFadeInTimer").text("Start!!");
        $("#CountdownFadeInTimer").fadeIn();
        count--;
        //method call to Game function & Timer    
        initiateGameTimer();
        GameStart();
      });
    } else {
      //fade out countdown text
      $("#CountdownFadeInTimer").fadeOut();
      clearInterval(interval);
    }
  }
  //Trigger to set GameStartTimer function: fade in notification counter
interval = setInterval(function() {
  GameStartTimer()
}, 2000);

//Tap the star down function
function GameStart() {
  console.log("GameStart");
  x = document.getElementById('GameStar').offsetTop;
  console.log("x:" + x);
  //check condition if star reach bottom page limit, else continue to move down
  if (x < bottomStarLimit)
    x = x + step;
  document.getElementById('GameStar').style.top = x + "px";
}

function initiateGameTimer() {
  CounterInterval = setInterval(function() {
    counter = counter + 1;
    timer = timer - 1;
    $('#GameTime').html(timer);
    console.log(timer);
    // Gamce condition check when timer =0: position of the star < or > 2308(bottom page limit)
    if (timer == 0) {
      clearInterval(CounterInterval);
      if (x >= 2308) {
        $("#GamePage").hide();
        $("#Congratulations").show();
      } else if (x < 2308) {
        console.log("fail");
        $("#GamePage").hide();
        $("#GameOver").show();
      }
    }
  }, 1000)
}

<div id="GamePage" style="width:100%; height:100%;z-index=1;">

  <div id="CountdownFadeInTimer"></div>

  <p id="GameTime">20</p>
  <img id="GameStar" type="image" src="lib/Elements/The%20Star.png">
  <button id="Tap" type="image" src="lib/Elements/Tap%20here%20button.png" onclick="GameStart()" />

</div>

Solution

Set the disabled attribute of the button to disabled. Then remove that attribute when the notification countdown has finished, using the following JavaScript:

document.getElementById("Tap").removeAttribute("disabled");