fonction appelée après 30 secondes minuterie

Question

Je crée un jeu avec jquery, presque terminé mais j'ai besoin d'aide pour une dernière chose. Je veux faire une minuterie de 30 secondes, qui appelle une fonction quand son fait (Voulez-vous pour appeler Comment puis-je créer cette Merci d'avance pour toute l'aide

Voici mon code:.?!

$(document).ready(function(){ 
 

 

 
    var score=0; 
 
    var fails=0; 
 

 
    //Bucket movement 
 
    $(document).keydown(function(e){ 
 
    //console.log(e.which); 
 

 
    // if left or right keyboard arrow 
 
    if (e.keyCode ==39 && $("#spelare").css("left") < '880px') 
 
     $("#spelare").animate({left: '+=20px'}, 0); 
 
    else if (e.keyCode ==37 && $("#spelare").css("left") > '0px') 
 
     $("#spelare").animate({left: '-=20px'}, 0); 
 
    }); 
 

 

 
    // Game init 
 
    var spanfoodInterval = setInterval(spawnFood,2000); 
 
    var fallInterval = setInterval(fall, 0); 
 

 

 
    // Water append 
 
    function spawnFood(){ 
 
    var spelplanWidth = $('#spelplan').width(); 
 
    var randPosX = Math.floor((Math.random()*spelplanWidth)); 
 
    var element = $("<div class='food'></div>").css('left',randPosX).css('bottom', '446px'); 
 
    $("#spelplan").append(element); 
 
    } 
 

 
    // dropping object animation 
 
    function fall(){ 
 
    var elementFall = $(".food").animate({top: '+=20px'}, 500); 
 
    //$("#spelplan").append(elementFall); 
 

 
    $(".food").each(function(){ 
 

 
     if(typeof($(this)) !="undefined" && typeof($("#spelare"))!="undefined"){ 
 

 
     // item position 
 
     var thisPosition = $(this).position(); 
 
     var thisWidth = $(this).width(); 
 

 
     // Bucket position and width 
 
     var bucketPosition = $("#spelare").position(); 
 
     var bucketWidth = $("#spelare").width(); 
 
     var bucketHeight = $("#spelare").height(); 
 

 

 
     // If object and bucket at same position 
 
     if(thisPosition.top >= bucketPosition.top 
 
      && thisPosition.left >= bucketPosition.left 
 
      && thisPosition.left <= bucketPosition.left + bucketWidth){ 
 

 
      $(this).remove(); 
 
      score++; 
 
      //console.log(score); 
 

 
      // Update the score display 
 
      $("#poäng").html("Poäng: " + score); 
 
      $("#failMsg").html("Game Over!" <br/ + "Totala Poäng: " + score); 
 
     } 
 

 
     // Food not catched... 
 
     if(thisPosition.top >= bucketPosition.top + bucketHeight){ 
 
      $(this).remove(); 
 
      fails++; 
 
      //console.log("FAILS: "+fails); 
 
     } 
 

 
     // if more than 3 miss => Game over. 
 
     if(fails >= 3){ 
 

 
      $("#failMsg").show(); 
 
      $("#spelare").remove(); 
 
      $(".food").remove(); 
 
      clearInterval(spanfoodInterval); 
 
      clearInterval(fallInterval); 
 
     } 
 
     } 
 
    }); 
 
    } 
 

 

 
});

body{ 
 
      text-align: center; 
 
      background-color:black; 
 
     } 
 

 
     #spelplan{ 
 
      width: 1000px; 
 
      height:610px; 
 
      position:absolute; 
 
      margin-left:460px; 
 
      box-shadow: inset 0px 0px 50px; 
 
      background-color: green; 
 
     } 
 
     #spelare{ 
 
      width:110px; 
 
      height: 12vh; 
 
      position: relative; 
 
      top:53.4vh; 
 
      background-color:blue; 
 

 
     } 
 

 

 
     .food{ 
 
      width:50px; 
 
      height:50px; 
 
      position:absolute; 
 
      background-color:yellow; 
 
      display:block; 
 
     } 
 

 
     p{ 
 
      position:relative; 
 
      font-family: 'Electrolize', sans-serif; 
 
     } 
 

 
     #poäng{ 
 
      color:white; 
 
      bottom:14vh; 
 
      right:45%; 
 
     } 
 

 
     #liv{ 
 
      color:white; 
 
      bottom:15vh; 
 
      right:46.5%; 
 
     } 
 

 
     .fa-heart{ 
 
      color:red; 
 
      bottom:18.5vh; 
 
      right:43.5%; 
 
      position:relative; 
 
     } 
 

 
     #info{ 
 
      color:white; 
 
      font-family: 'Electrolize', sans-serif; 
 
      margin-top:68vh; 
 

 
     } 
 

 
     #failMsg{ 
 
    position:fixed; 
 
    top:50%; 
 
    left:50%; 
 
    transform:translate(50% 50%); 
 
    color:white; 
 
    font-size:4em; 
 
    display:none; 
 
} 
 

 
     #successMsg{ 
 
    position:fixed; 
 
    top:50%; 
 
    left:50%; 
 
    transform:translate(50% 50%); 
 
    color:white; 
 
    font-size:4em; 
 
    display:none; 
 
}

<h2 style="color:white">JQUERY SPEL</h2> 
 
<div id="spelplan"> 
 
<div id="spelare"> </div> 
 
<div class="food"> </div> 
 
<p id="poäng"> Poäng: </p> 
 
<p id="liv"> Liv: </p> 
 
<i class="fa fa-heart" aria-hidden="true"></i> 
 
</div> 
 

 
<div id="info"> 
 
<h1> Instruktioner: </h1> 
 
<p> Spelet går ut på att du med hjälp av hinken och piltangenterna ska fånga alla vattendroppar! <br/> Du måste hålla ut i 40 sekunder, missa tre vattendroppar så förlorar du! </p> 
 
</div> 
 
<div id="failMsg">Game over!</div> 
 
<div id="successMsg"> You won! </div>

Answer 1

function foo(){ 
//Your function that you want to call 
} 

//30000ms = 30s 
setTimeout(foo, 30000); 

---

sur une autre note, s'il vous plaît ne pas mélanger le suédois et l'anglais dans votre code. Essayez de coller à l'anglais et à éviter « ÅÄÖ » dans votre css règles d'une d noms de variables :)

Answer 2

Soit utiliser un délai d'attente que @rymdmaskin a suggéré, ou setInterval:

function doSomething() {} 

var timer = setInterval(doSomething, 3 * 1000); 
// some time later you may want to then: 
clearInterval(timer); 

Ou, vous l'avez mentionné est un jeu. Vous pouvez être intéressé par requestAnimationFrame: https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame

window.requestAnimationFrame(callback);