How do you wait for a button to get pressed a certain amount of times before running another function?

I am trying to build a gambling simulator that lets you gamble with fake money to see if you’d win more often times than not. The game I am sort of trying to replicate is Mines from Roobet. In my game, there are 9 squares laid out in a grid like format. One of the squares is the bomb square, which means if you click it, you lose. The player does not know which square is the bomb square though. You have to click 4 squares, and if all of the ones you have clicked are non-bomb squares, then you win $50. If you click the bomb square, then you lose $50.

What I have been trying to figure out for like a week now is how do you make the game wait until either 4 non-bomb squares have been clicked, or 1 bomb square to have been clicked in order to do certain functions(subtract 50 from gambling amount, restart the game). I have tried while loops, but that crashes the browser. I have also tried if-else statements, but the code doesn’t wait until either 4 non-bomb squares or 1 bomb square has been clicked. It just checks it instantly. So it results in it not working right. I also have tried for the function to call itself, and then check for either case, but it just results in an error saying “Maximum call stack size exceeded.”

function bombClicked () {
  for (let i = 0; i < array.length; i++) {          //each square is put into an array named array
    array[i].addEventListener("click", () => {
      if (array[i].value == "bomb") {
        array[i].style.background = "red";
        redCounter++;
        didLose = true
      }
      else{
        array[i].style.background = "green";
        greenCounter++;
        didLose = false;
      }
    })
  }
  if (greenCounter >= 4 || redCounter >= 1) {
    if (didLose == true) {
      gamblingAmount.value = parseInt(gamblingAmount.value) - 50;
    }
    else {
      gamblingAmount.value = parseInt(gamblingAmount.value) + 50;
    }
    reset();
  }
}

Answer

What a fun little exercise! Here’s my quick and dirty jquery solution.

const NO_OF_TRIES_ALLOWED = 4;
const SCORE_WON_LOST = 50;
var score = 0;
var tries = 0;
var bombId;

function restart() {  
  tries = 0;
  $("button").removeClass("ok");
  $("button").removeClass("bang");
  bombId = Math.floor( Math.random() * 9);
  $("#bombLabel").text(bombId);
}

function win() {
  window.alert('you win!');
  score += SCORE_WON_LOST;
  $("#scoreLabel").text(score);
  restart();
}

function lose(){
  window.alert('you lose!');
  score -= SCORE_WON_LOST;
  $("#scoreLabel").text(score);
  restart();
}

$(document).on("click", "button", function() {
  if( !$(this).is(".bang") && !$(this).is(".ok") ) {
    let buttonId = $(this).data("id");
    if(buttonId === bombId) {
      $(this).addClass('bang');
      setTimeout(lose, 100); // bit of a delay before the alert
    }
    else {
      $(this).addClass('ok');
      tries++;
      if(tries === NO_OF_TRIES_ALLOWED) {
        setTimeout(win, 100); // bit of a delay before the alert
      }
    }
    
    
  }
});

restart();

button{
  width: 50px;
  height: 50px;
  padding: 0;
}

.ok{
  background-color: green;
}

.bang{
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-id="0"></button>
<button data-id="1"></button>
<button data-id="2"></button><br>
<button data-id="3"></button>
<button data-id="4"></button>
<button data-id="5"></button><br>
<button data-id="6"></button>
<button data-id="7"></button>
<button data-id="8"></button><br>
Score: <span id="scoreLabel"></span>