Таймер JavaScript Как настроить

Question

Я новичок в javascript, и я делаю проект "Создание игры памяти".

Я застрял, когда пытался настроить таймер, который начинает работать при нажатии на карту, и сбрасывать время при перезапуске игры. Кроме того, я хочу, чтобы он экономил лучшее время и каждый раз сравнивал раз и показать его на странице как ЛУЧШЕЕ ВРЕМЯ. Вот как это построено до сих пор Спасибо помощникам :) Высоко ценится

// Those are global variables, they stay alive and reflect the state of the game


var elPreviousCard = null;
var flippedCouplesCount = 0;
var userName;
var currentlyFlipped = 0;
// This is a constant that we dont change during the game (we mark those with CAPITAL letters)
var TOTAL_COUPLES_COUNT = 8;

// Load an audio file
var audioWin = new Audio('sound/win.mp3');
var audiowrong = new Audio('sound/wrong.mp3') ;
var audioright = new Audio ('sound/right.mp3') ;




toggle_visibility("restartBtn");
getUsername();

function getUsername(){
    var savedUserName = localStorage.getItem("savedUserName");
    if(!savedUserName){
        var userName = prompt("What is your username?"); 
        localStorage.setItem("savedUserName", userName );
        alert("Welcome "+ userName);
    }
    else{
        alert("Welcome "+ savedUserName);
    }
    setNameOnPage(savedUserName);
}

function getNewUsername(){
    var newUserName = prompt("What is your username?"); 
        localStorage.setItem("savedUserName", newUserName);
        setNameOnPage(savedUserName);
        alert("Welcome "+ newUserName);
}

function setNameOnPage(uName){
    document.querySelector("h4.user").innerHTML = "Good Luck " + uName;
}

// This function is called whenever the user click a card
function cardClicked(elCard) {
    // If the user clicked an already flipped card - do nothing and return from the function
    if (elCard.classList.contains('flipped')) {
        return;
    }
    if (currentlyFlipped>=2) {
        return;
    }
    // Flip it
    elCard.classList.add('flipped');
    currentlyFlipped++;
    // This is a first card, only keep it in the global variable
    if (elPreviousCard === null) {
        elPreviousCard = elCard;
    } else {
        // get the data-card attribute's value from both cards
        var card1 = elPreviousCard.getAttribute('data-card');
        var card2 = elCard.getAttribute('data-card');

        // No match, schedule to flip them back in 1 second
        if (card1 !== card2){
           setTimeout(function () {
                elCard.classList.remove('flipped');
                elPreviousCard.classList.remove('flipped');
                elPreviousCard = null;
                currentlyFlipped=0;
                audiowrong.play();
            }, 1000)  
        } else {
            setTimeout(function () {
                // Yes! a match!
                flippedCouplesCount++;
                elPreviousCard = null;
                currentlyFlipped=0;
                audioright.play();
            }, 500) 

            // All cards flipped!
            if (TOTAL_COUPLES_COUNT === flippedCouplesCount) {
                toggle_visibility("restartBtn");
                audioWin.play();
            }
        }
    }
}

function restartGame(){
    //  get  all  divs  in  the  document
    var  cards = document.querySelectorAll('div.card');
    for  (var i = 0; i < cards.length; i++)
    {
        cards[i].classList.remove('flipped');
    }
}
        
function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(!e.style.display || e.style.display == 'block'){
        e.style.display = 'none';
    }
    else
       e.style.display = null;
 }

.header {
    background-color: lightblue;
    padding: 20px;
    border-bottom: 10px solid darkcyan;
    color:darkcyan;
    font-size: 1.5em;
    text-align: center;
      
}

.header img {
    float:right;
   

}

.card {
    background-color: pink;
    height: 165px;
    width: 165px;    
    float: left;
    margin: 5px;
    

}
.card:hover {
    background-color: yellow; 
    transform: scale(1.08); 
}



.card img {
    position: absolute;
}

.flipped .back {
    display: none;
}
body {
    background-color: aqua;
}
button {
    background: rgb(223, 117, 20);
    width: 170px;
    height: 95px;
}

 button:hover {
background-color: purple;
}
 
.timer {
    margin-left:10px;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>My App</title>
  <link rel="stylesheet" href="css/game.css" />
  <button onclick="getNewUsername()">Change User</button>
  <button id="restartBtn" onclick="restartGame()">Restart</button>
  <p>Completion time: <span class="timer" id="timer">0:00</span></p>

</head>


<body>

  <div class="header">
    <img src="img/layout/logo.png">
    <h1>Memory Monsters</h1>
    <h4 class="user"></h4>
  </div>
  <div class="card"   data-card="1" onclick="cardClicked(this)">
    <img src="img/cards/1.png">
    <img class="back" src="img/cards/back.png">
  </div>
  <div class="card" data-card="7" onclick="cardClicked(this)">
    <img src="img/cards/7.png">
    <img class="back" src="img/cards/back.png">
  </div>
  <div class="card" data-card="1" onclick="cardClicked(this)">
    <img src="img/cards/1.png">
    <img class="back" src="img/cards/back.png">
  </div>
  <div class="card" data-card="7" onclick="cardClicked(this)">
    <img src="img/cards/7.png">
    <img class="back" src="img/cards/back.png">
  </div>
  <div class="card" data-card="5" onclick="cardClicked(this)">
    <img src="img/cards/5.png">
    <img class="back" src="img/cards/back.png">
  </div>
  <div class="card" data-card="5" onclick="cardClicked(this)">
    <img src="img/cards/5.png">
    <img class="back" src="img/cards/back.png">
  </div>
  <div class="card" data-card="2" onclick="cardClicked(this)">
    <img src="img/cards/2.png">
    <img class="back" src="img/cards/back.png">
  </div><div class="card" data-card="2" onclick="cardClicked(this)">
    <img src="img/cards/2.png">
    <img class="back" src="img/cards/back.png">
  </div><div class="card" data-card="3" onclick="cardClicked(this)">
    <img src="img/cards/3.png">
    <img class="back" src="img/cards/back.png">
  </div>
  <div class="card" data-card="3" onclick="cardClicked(this)">
    <img src="img/cards/3.png">
    <img class="back" src="img/cards/back.png">
  </div>
  <div class="card" data-card="4" onclick="cardClicked(this)">
    <img src="img/cards/4.png">
    <img class="back" src="img/cards/back.png">
  </div>
    <div class="card" data-card="4" onclick="cardClicked(this)">
      <img src="img/cards/4.png">
      <img class="back" src="img/cards/back.png">
  </div>
  <div class="card" data-card="6" onclick="cardClicked(this)">
    <img src="img/cards/6.png">
    <img class="back" src="img/cards/back.png">
  </div><div class="card" data-card="8" onclick="cardClicked(this)">
    <img src="img/cards/8.png">
    <img class="back" src="img/cards/back.png">
  </div><div class="card" data-card="6" onclick="cardClicked(this)">
    <img src="img/cards/6.png">
    <img class="back" src="img/cards/back.png">
  </div><div class="card" data-card="8" onclick="cardClicked(this)">
    <img src="img/cards/8.png">
    <img class="back" src="img/cards/back.png">

    
<script src="js/game.js"></script>
</body>
</html>

Answer 1

Прав ли я, если ваша цель состоит в том, чтобы получить разницу во времени между началом игры и окончанием игры успешно?

Тогда просто инициируйте глобальную переменную

var start = new Date();

Когда пользователь закончил успешно

var end = new Date();

И разница во времени

var seconds = (start.getTime() - end.getTime()) / 1000;

Если игра перезапускается, просто возобновите запуск!

start = new Date();

Полагаю, вам не нужен тайм-аут «Да!

Чтобы сэкономить время, когда вам требуется серверное хранилище для каждого пользователя, JavaScript не может сделать это за вас.