我是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>
答案 0 :(得分：0)
如果您的目标是获得游戏开始和游戏成功完成之间的时间差，对吗？
然后只需初始化一个全局变量
var start = new Date();
用户成功完成操作
var end = new Date();
时差是
var seconds = (start.getTime() - end.getTime()) / 1000;
如果游戏重新启动，只需重新开始即可！
start = new Date();
我想您不需要“是！一场比赛！”超时。
要节省最佳时间，您需要每个用户在服务器端进行存储，JavaScript不能为您做到这一点。