It is necessary that when he poked on the circle it disappeared, and if it reaches 350px the game over was written. But the problem is that if I clicked and all the circles have disappeared, then the game over climbs anyway. How to fix?

$(document).on('click', '.round', function() { this.remove() }); $(document).ready(function() { $('.round').animate({ width: '350px', height: '350px' }, 6000, function() { $('#gameOver').show(); }); }); 
 .round { height: 1px; width: 1px; border-radius: 50%; background: red; float: left; } .green { background-color: green; } .blue { background-color: blue; } .yellow { background-color: yellow; } h1 { text-align: center; font-size: 80px; color: red; margin: 30px 0; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <h1 style="display: none;" id="gameOver">Game over!</h1> <div class="round"></div> <div class="round green"></div> <div class="round blue"></div> <div class="round yellow"></div> <div class="round yellow"></div> <div class="round blue"></div>

    2 answers 2

    It is enough to check whether such elements still exist, and if their number is greater than 0, then Game Over

     $(document).on('click', '.round', function() { this.remove() }); $(document).ready(function() { $('.round').animate({ width: '350px', height: '350px' }, 6000, function() { if ($('.round').length > 0) $('#gameOver').show(); }); }); 
     .round { height: 1px; width: 1px; border-radius: 50%; background: red; float: left; } .green { background-color: green; } .blue { background-color: blue; } .yellow { background-color: yellow; } h1 { text-align: center; font-size: 80px; color: red; margin: 30px 0; } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <h1 style="display: none;" id="gameOver">Game over!</h1> <div class="round"></div> <div class="round green"></div> <div class="round blue"></div> <div class="round yellow"></div> <div class="round yellow"></div> <div class="round blue"></div>

    • Thanks you!!!! - Poctuk

    The destruction of circles does not affect the fact that at the end of the animation a function will be executed with the display of the caption.

    As a solution, check the presence of circles at the end of the animation. There is - it means we display the inscription.

     $(document).on('click', '.round', function() { this.remove() }); $(document).ready(function() { $('.round').animate({ width: '350px', height: '350px' },6000, function () { if($('.round').length) $('#gameOver').show(); }); }); 
      .round { height: 1px; width: 1px; border-radius: 50%; background: red; float: left; } .green { background-color: green; } .blue { background-color: blue; } .yellow { background-color: yellow; } h1 { text-align: center; font-size: 80px; color: red; margin: 30px 0; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1 style="display: none;" id="gameOver">Game over!</h1> <div class="round"></div> <div class="round green"></div> <div class="round blue"></div> <div class="round yellow"></div> <div class="round yellow"></div> <div class="round blue"></div>

    • hyy) 12 seconds earlier - Alexey Shimansky
    • Thanks you!!!! - Poctuk