FadeIn random Javascript Game

Question

I am trying to solve this problem with my mini game using javascript. The Game is suppose to randomly show divs using the randomFadeIn with jquery.random-fade-in.min.js. It works but the problem is that I could not stop it from running. This is just a basic javascript game but it is hard to implement using jquery

Here is my full code

const result = document.getElementById(".box-container>div");
console.log(result);
const button = document.getElementsByTagName("div");
let sec = 0;

function gameStart(num) {
  let num1 = 800;
  if ($(".box-container>div>p").css('opacity') != 0) {
    console.log("not yet done");
    $(function() {
      $('.box-container').randomFadeIn(800);
    });
  } else {
    console.log("win");
  };
}

function clickBox() {
  $(".box-container>div>p").click(function() {
    $(this).animate({
      opacity: 0
    }, 800);
  })
}

function gameWins() {}

function gameStops() {
  setTimeout(function() {
    alert("Game Ends");
  }, 60000);
}

clickBox();
//gameStops();
gameWins();

.box-container {
  width: 232px;
  float: left;
  width: 45%;
}

.box-container div {
  float: left;
  height: 100px;
  margin-bottom: 8px;
  margin-right: 8px;
  overflow: hidden;
  width: 100px;
}

.box-container div p {
  background: #097;
  box-sizing: border-box;
  color: #fff;
  display: none;
  font-size: 20px;
  height: 100%;
  margin: 0;
  padding-top: 14px;
  text-align: center;
  width: 100%;
}

.clearfix:after {
  clear: both;
  content: '';
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://sutara79.github.io/jquery.random-fade-in/dist/jquery.random-fade-in.js"></script>

<h1> Click Dem Boxes</h1>
<button onclick="gameStart()"> Start game </button>
<p>Mechanics: You need to click all the boxes before the time ends</p>

> just a bunch of divs that fades in and does not stop
<div class="box-container clearfix">
  <div>
    <p></p>
  </div>
  <div>
    <p></p>
  </div>
  <div>
    <p></p>
  </div>
  <div>
    <p></p>
  </div>
  <div>
    <p></p>
  </div>

Answer 1

By using the .stop() function, you could stop the animation. See snippet below.

let maxSeconds = 30000;
let numOfCards = $('.box').length;

function gameStart() {
  console.log("Game started");
  let numOfClicked = 0;

  $(".box-container>div>p").click(function() {
    // Increase the counter
    numOfClicked++;
  
    // Fade out
    $(this).fadeOut(800);
    
    if(numOfClicked == numOfCards){
      gameWon();
    }
  })

  $('.box-container').randomFadeIn(800);
  
  setTimeout(
    function() {
      if(numOfClicked != numOfCards){
        gameLost();
      }
    }, maxSeconds);
}

function gameWon(){
  gameStop();
  console.log("You won the game!");
}

function gameLost(){
  gameStop();
  console.log("You lost the game!");
}

function gameStop(){
   $(".box-container>div>p").stop(false, false);
}

.box-container {
  width: 232px;
  float: left;
  width: 45%;
}

.box-container div {
  float: left;
  height: 100px;
  margin-bottom: 8px;
  margin-right: 8px;
  overflow: hidden;
  width: 100px;
}

.box-container div p {
  background: #097;
  box-sizing: border-box;
  color: #fff;
  display: none;
  font-size: 20px;
  height: 100%;
  margin: 0;
  padding-top: 14px;
  text-align: center;
  width: 100%;
}

.clearfix:after {
  clear: both;
  content: '';
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://sutara79.github.io/jquery.random-fade-in/dist/jquery.random-fade-in.js"></script>

<h1> Click Dem Boxes</h1>
<button onclick="gameStart()"> Start game </button>
<p>Mechanics: You need to click all the boxes before the time ends</p>

> just a bunch of divs that fades in and does not stop
<div class="box-container clearfix">
  <div class="box">
    <p></p>
  </div>
  <div class="box">
    <p></p>
  </div>
  <div class="box">
    <p></p>
  </div>
  <div class="box">
    <p></p>
  </div>
  <div class="box">
    <p></p>
  </div>
</div>