Image unable to re-appear in SetTimeout

Question

Functionality:

Users will tap on an image(group of spots) for it to be removed. When user click on the image, the image will fadeOut. However, the image will re-appear after 10s later, if the user does not click on the image, the new image will not be displayed after 10s.

what has been done:

At each click, the image will fadeOut. Secondly, I do understand for the image to reappear after 10 seconds, should the user tap on the initial image and it disappears, I need to have the following process features:

1.) Do a conditional check, if tap image disappears, new identical image will re-appear after 10s from a setInterval function. Else, return false and do nothing until user clicks on the image.

Issue:

At this point, I am stuck at how to create the function call that performs the conditional check and also enable the new image to re-appear after 10s when the initial image fadesOut.

I need help. Thanks.

COde:

function A() {

  var CounterInterval, counter = 0,
    timer = 30;
  var GameScore = 0,
    tap_Spots = false;

  $('#GamePage').fadeIn({
    duration: slideDuration,
    queue: false
  });
  $('#GamePage').animate({
    'left': '0px'
  }, {
    duration: slideDuration,
    easing: 'easeInOutQuart',
    queue: false,
    complete: function() {

      $('#GameTimer').show();
      CounterInterval = setInterval(function() {
        counter = counter + 1;
        timer = timer - 1;
        $("#GameTimer").attr("src", "img/TimeLeft/Timer_" + timer + ".png");
        console.log("Time left is:" + timer);

        //End Of Game Condition
        if (timer == 0) {
          clearInterval(CounterInterval);
          $('#GamePage').fadeOut({
            duration: slideDuration,
            queue: false
          });
          $('#GamePage').animate({
            'left': '1081px'
          }, {
            duration: slideDuration,
            easing: 'easeInOutQuart',
            queue: false
          });

          $('#ResultPage').fadeIn({
            duration: slideDuration,
            queue: false
          });
          $('#ResultPage').animate({
            'left': '0px'
          }, {
            duration: slideDuration,
            easing: 'easeInOutQuart',
            queue: false
          });
        } else if (timer < 30 && timer > 0) {
          //Game Method
          $("#Spot_1").click(function() {

            //Remove the spots
            $("#Spot_1").fadeOut();
            console.log("blackspot is removed");
            //Increment score by 10
            GameScore = GameScore + 10;
            $("#GameScore").attr("src", "img/ScorePoint/Score_" + GameScore + ".png");

            //create Interval for spots to reappear after user clicks on spots
            if (tap_Spots == true) {
              setTimeout(function() {
                $("#Spot_1").fadeIn();
                console.log("blackspot re-appears");
              }, 3000);
            } else return false;

          });
          $("#Spot_2").click(function() {
            //create Interval for spots to reappear after user clicks on spots
            $("#Spot_2").fadeOut();
            console.log("blackspot #2 is removed");
            GameScore = GameScore + Score;
            $("#GameScore").attr("src", "lib/SKII/img/Page09/ScorePoint/Score_" + GameScore + ".png");
          });
          $("#Spot_3").click(function() {
            //create Interval for spots to reappear after user clicks on spots
          });
          $("#Spot_4").click(function() {
            //create Interval for spots to reappear after user clicks on spots
          });
          $("#Spot_5").click(function() {
            //create Interval for spots to reappear after user clicks on spots
          });
          $("#Spot_6").click(function() {
            //create Interval for spots to reappear after user clicks on spots
          });
        }
      }, 1000)
    }
  });
}

#PlayTime {
  position: absolute;
  top: 180px;
  width: 200px;
  height: 200px;
  left: 150px;
  z-index: 100;
}
#Score {
  position: absolute;
  top: 180px;
  width: 200px;
  height: 200px;
  left: 830px;
  z-index: 100;
}
#Spot_1 {
  position: absolute;
  top: 940px;
  width: 100px;
  height: 100px;
  left: 450px;
  z-index: 100;
}
#Spot_2 {
  position: absolute;
  top: 1000px;
  width: 100px;
  height: 100px;
  left: 550px;
  z-index: 100;
}
#Spot_3 {
  position: absolute;
  top: 1050px;
  width: 100px;
  height: 100px;
  left: 350px;
  z-index: 100;
}
#Spot_4 {
  position: absolute;
  top: 1200px;
  width: 100px;
  height: 100px;
  left: 500px;
  z-index: 100;
}
#Spot_5 {
  position: absolute;
  top: 1160px;
  width: 100px;
  height: 100px;
  left: 630px;
  z-index: 100;
}
#Spot_6 {
  position: absolute;
  top: 1380px;
  width: 100px;
  height: 100px;
  left: 480px;
  z-index: 100;
}

<div id="GamePage" style="position:absolute; z-index:11; top:0; width: 1080px; height: 1920px; margin:auto;">

  <span id="Score"><img id = "GameScore" src="img/ScorePoint/Score_0.png"></span>
  <span id="PlayTime"><img id = "GameTimer" src="img/TimeLeft/Timer_30.png"></span>

  <img id="Spot_1" src="img/Spot_01.png" />
  <img id="Spot_2" src="img/Spot_02.png" />
  <img id="Spot_3" src="img/Spot_03.png" />
  <img id="Spot_4" src="img/Spot_04.png" />
  <img id="Spot_5" src="img/Spot_05.png" />
  <img id="Spot_6" src="img/Spot_06.png" />
</div>

Answer 1

You're making this a lot more complicated than it needs to be. No need for separate functions for each spot, and no need for your tap_Spots boolean:

$('img').click(function() {
  var self = this; // hold onto the clicked DOM node for later reference
  $(self).fadeOut(); // fade it out
  // do your game score stuff here
  window.setTimeout(function() { 
    $(self).fadeIn(); // setTimeout has elapsed, can fade back in
  },3000); // 3 seconds here, not 10, just for easier demo
});

.positioner {
  width: 50px; height: 50px; border: 1px solid; display: block; float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- changed images to different urls, see comments below -->
<div class="positioner"><img src="//placehold.it/50x50"></div>
<div class="positioner"><img src="//placehold.it/51x51"></div>
<div class="positioner"><img src="//placehold.it/49x49"></div>
<div class="positioner"><img src="//placehold.it/35x35"></div>
<div class="positioner"><img src="//placehold.it/55x55"></div>
<div class="positioner"><img src="//placehold.it/50x45"></div>
<div class="positioner"><img src="//placehold.it/52x51"></div>
<div class="positioner"><img src="//placehold.it/50x50"></div>

Answer 2

Managed to solve my own issue, and that is to set the condition tap_Spots = true when each spot is cicked. Hence the correct code syntax that will work:

$("#Spot_1").click(function() {
  //create Interval for spots to reappear after user clicks on spots

  //Set check condition to true when spots have been clicked
  tap_Spots = true;
  
  //Remove the spots 
  $("#Spot_1").fadeOut();
  
  console.log("Spot_1 is removed");
  
  //Increment score by 10ss
  GameScore = GameScore + Score;
  $("#GameScore").attr("src", "lib/SKII/img/Page09/ScorePoint/Score_" + GameScore + ".png");

  console.log(tap_Spots);
  
  //create Interval for spots to reappear after user clicks on spots
  
  if (tap_Spots == true) {
    //reset the check condition to default
    tap_Spots = false;
    console.log("tap_Spots=true");
    setTimeout(function() {
      $("#Spot_1").fadeIn();
      console.log("Spot_1 re-appears");
    }, 3000);
  } else return false;
});