Get Timer startet von 0 nach Klick in Memory-Spiel

Question

Es ist meine erste Frage hier. Ich suchte nach einem ähnlichen Thema, aber ich fand nicht die Antwort, die ich verwenden könnte. Ich möchte einen Timer in meinem Memory-Spiel bekommen, der die aktuelle Zeit anzeigt (Ich möchte Date-Objekt verwenden). Ich benutzte eine Funktion von hier How to create an accurate timer in javascript?, aber nach dem ersten Klick auf die Karte, beginnt die Zeit nicht von 0. Es zeigt die Zeit, die seit dem Laden der Seite vergangen ist.

//variable for timer 
var gameScore = $(".score-game"); 
var timer = $("#timer"); 
gameScore.html("0 seconds"); 
var hasGameStarted = false; 
var score = Date.now(); 

    //timer function 
    function countdownTimer() { 
     if (hasGameStarted !== true) { 
      scoreTimeout = setInterval(function() { 
       var delta = Date.now() - score; 
       gameScore.html(Math.floor(delta/1000) + " seconds"); 
      }, 1000); 
      hasGameStarted = true; 
     } 
    } 
cards.on('click', function() { 
countdownTimer(); 
}); 

Wenn Sie sehen wollen, wie mein Spiel funktioniert, überprüfen Sie diese Seite (Timer gut arbeitet nun aber die Zeit ab dem Datum Objekt nicht angezeigt):

https://borkson.github.io/Cars-Memory-Game/

Sorry für mein Englisch: (

Answer 1

ich Ihren Code zu verstehen, meinen Sie, dass Sie einen Timer von Delta Variable berechnet starten und aktualisiert alle 1000 Millisekunden

//variable for timer 
 
var gameScore = $(".score-game"); 
 
var timer = $("#timer"); 
 
gameScore.html("0 seconds"); 
 
var hasGameStarted = false; 
 
var score = Date.now(); 
 

 
//timer function 
 
function countdownTimer() { 
 
    if (hasGameStarted !== true) { 
 
    scoreTimeout = setInterval(function() { 
 
     var delta = Date.now() - score; 
 
     gameScore.html(Math.floor(delta/1000) + " seconds"); 
 
    }, 1000); 
 
    hasGameStarted = true; 
 
    } 
 
} 
 

 
$("#cards").on('click', function() { 
 
    countdownTimer(); 
 
});

#cards { 
 
    border-radius: 25px; 
 
    background: #73AD21; 
 
    padding: 20px; 
 
    width: 200px; 
 
    height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<img id="cards"></img> 
 
<div class="score-game">score</div> 
 
<div id="timer">timer</div>

Answer 2

Vielleicht gibt es eine mehr clevere Art und Weise, aber man konnte ...

var starttime = Date.now();

... dann unten, in Ihrer Funktion ...

var delta = starttime - Partitur;

Hilft das?