我非常接近完成一个记忆游戏项目。我的计时器功能有两个主要问题。计时器会在页面加载时加注星标,而不是在玩家单击卡片时加注。
这是计时器代码。
var sec = 0;
function startTime(val) { return val > 9 ? val : "0" + val; }
var timer = setInterval(function() {
$("#seconds").html(startTime(++sec % 60));
$("#minutes").html(startTime(parseInt(sec / 60, 10)));
}, 1000);
当我以此方式编写并将其放入函数startTimer()以在单击卡后启动时,它会在每次单击卡后创建一个新计时器。
function startTimer() {
var timer = setInterval(function() {
$("#seconds").html(startTime(++sec % 60));
$("#minutes").html(startTime(parseInt(sec / 60, 10)));
}, 1000);
}
$(card).on('click', function() {
$(card).addClass('open show disabled');
startTimer();
if ($(card).hasClass('open show disabled'));
openedCards.push(card);
此外,我正在寻找一种在新页面加载时重置此计时器的方法。 我尝试了以下代码:
function resetTime(val) {
$("#seconds").html = 0;
$("#minutes").html = 0;
startTimer();
对于这些问题的任何帮助将不胜感激。 这是我的密码笔的链接。 https://codepen.io/tb0217/pen/wYzMBe
答案 0 :(得分:0)
您可以检查if condition
是否设置了计时器
var timer; // declare it globally here
function startTimer() {
timer = setInterval(function() {
$("#seconds").html(startTime(++sec % 60));
$("#minutes").html(startTime(parseInt(sec / 60, 10)));
}, 1000);
}
$(card).on('click', function() {
if(!timer) startTimer(); // checks if the timer is set or not
// code
}
答案 1 :(得分:0)
我喜欢您的小游戏,我为您准备了这个计时器对象,以便更好地使用:
我在您的timer.start();
函数中添加了startGame()
,并在播放器timer.stop()
时添加了won
const timer = {
elapsedTime: 0,
status: '',
timeObj: '',
formatTime: function(val) {
return val > 9 ? val : "0" + val;
},
counter: function(sec) {
$this = this;
if (typeof sec !== 'number') sec = 0;
this.elapsedTime = sec;
if ($this.timeObj !== '') {
clearTimeout($this.timeObj);
}
$this.timeObj = setTimeout(function() {
clearTimeout($this.timeObj);
if (['start', 'resumed'].indexOf($this.status) !== -1) {
if ($this.status === 'resumed') {
$this.status = 'start';
}
$("#seconds").html($this.formatTime(sec % 60));
$("#minutes").html($this.formatTime(parseInt(sec / 60, 10)));
return $this.counter(++sec);
}
}, 1000)
},
start: function(startFrom) {
if (typeof startFrom !== 'number') {
startFrom = 0;
};
$this = this;
if (this.status !== 'resumed') {
this.status = 'start';
}
this.counter(startFrom);
},
pause: function() {
this.status = 'paused';
},
resume: function() {
$this = this;
this.status = 'resumed';
this.start($this.elapsedTime);
},
restart: function() {
this.stop();
this.start();
},
stop: function() {
this.status = 'stopped';
}
}
const icons = ["fa fa-facebook-official", "fa fa-instagram", "fa fa-linkedin-square",
"fa fa-skype", "fa fa-snapchat", "fa fa-twitch", "fa fa-twitter", "fa fa-youtube",
"fa fa-facebook-official", "fa fa-instagram", "fa fa-linkedin-square", "fa fa-skype",
"fa fa-snapchat", "fa fa-twitch", "fa fa-twitter", "fa fa-youtube"
]
shuffle(icons);
// Shuffle function from http://stackoverflow.com/a/2450976
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
while (currentIndex !== 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
let openedCards = [];
let matchedCards = [];
let moves = 0;
let starsHtml = "";
let finalTime = "";
minutes
seconds
const deck = document.querySelector('.deck');
function startGame() {
for (let i = 0; i < icons.length; i++) {
const card = document.createElement('li');
card.classList.add('card');
card.innerHTML = "<i class ='" + icons[i] + "'</i>";
deck.appendChild(card);
$(card).on('click', function() {
$(card).addClass('open show freeze');
if ($(card).hasClass('open show freeze'));
openedCards.push(card);
var firstPick = openedCards[0];
var secondPick = openedCards[1];
if (firstPick.innerHTML === secondPick.innerHTML) {
$(firstPick).addClass('match');
$(secondPick).addClass('match');
matchedCards.push(firstPick);
matchedCards.push(secondPick);
openedCards.length = 0;
won();
rating();
} else {
setTimeout(function() {
$(firstPick).removeClass('open show freeze');
$(secondPick).removeClass('open show freeze');
}, 800);
}
addMove();
openedCards.length = 0;
})
}
timer.start();
function rating() {
if (moves > 12 && moves <= 19) {
stars.innerHTML = star + star;
} else if (moves >= 19) {
stars.innerHTML = star;
} else {
stars.innerHTML = star + star + star;
}
}
const totalMoves = document.querySelector('.moves');
function addMove() {
moves++;
totalMoves.innerHTML = moves;
rating();
}
}
/*
* STARS
*/
const stars = document.querySelector('.stars');
const star = `<i class="fa fa-star"></i>`;
stars.innerHTML = star + star + star;
/*
* TIMER
*/
var sec = 0;
//function startTime(val) { return val > 9 ? val : "0" + val; }
//var timer = setInterval(function() {
// $("#seconds").html(startTime(++sec % 60));
// $("#minutes").html(startTime(parseInt(sec / 60, 10)));
//}, 1000);
// helper code https://stackoverflow.com/questions/5517597/plain-count-up-timer-in-javascript
function won() {
if (matchedCards.length === 16) {
timer.stop();
//clearInterval(timer);
$("#minutes").html = minutes;
$("#seconds").html - seconds;
showModal();
}
}
var modal = document.getElementById('modal');
function writeStats() {
const total_moves = document.querySelector('#totalMoves');
total_moves.innerHTML = moves;
const finalTime = document.querySelector('#totalTime');
const minutesText = document.querySelector('#minutes').innerText;
const secondsText = document.querySelector('#seconds').innerText;
finalTime.innerHTML = `${minutesText}:${secondsText}`;
const starsHtml = document.querySelector('#finalStars');
starsHtml.innerHTML = stars.innerHTML;
}
function showModal() {
modal.style.display = "block";
writeStats();
}
/* Event listeners */
restartBtn.addEventListener('click', function() {
deck.innerHTML = '';
startGame();
matchedCards = [];
moves = 0;
updateMoves.innerHTML = moves;
pad();
stars.innerHTML = starIcon + starIcon + starIcon;
shuffle(icons);
});
yesBtn.addEventListener('click', function() {
modal.style.display = "none";
deck.innerHTML = '';
startGame();
matchedCards = [];
moves = 0;
updateMoves.innerHTML = moves;
pad();
stars.innerHTML = starIcon + starIcon + starIcon;
shuffle(icons);
});
noBtn.addEventListener('click', function() {
modal.style.display = "none";
});
///
startGame();
rating();
//startTime();
gameOver();
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #ffffff url('../img/geometry2.png');
/* Background pattern from Subtle Patterns */
font-family: 'Coda', cursive;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
/*
* Styles for the deck of cards
*/
.deck {
width: 660px;
min-height: 680px;
background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);
padding: 32px;
border-radius: 10px;
box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0 0 3em;
}
.deck .card {
height: 125px;
width: 125px;
background: #2e3d49;
font-size: 0;
color: #ffffff;
border-radius: 8px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}
.deck .card.open {
transform: rotateY(0);
background: #02b3e4;
cursor: default;
}
.deck .card.show {
font-size: 33px;
}
.deck .card.match {
cursor: default;
background: #02ccba;
font-size: 33px;
}
.deck .card.freeze {
pointer-events: none;
}
/*
* Styles for the Score Panel
*/
.score-panel {
text-align: left;
width: 345px;
margin-bottom: 10px;
}
.score-panel .stars {
margin: 0;
padding: 0;
display: inline-block;
margin: 0 5px 0 0;
}
.score-panel .stars li {
list-style: none;
display: inline-block;
}
.score-panel .restart {
float: right;
cursor: pointer;
}
.modal {
background-color: rgba(0, 0, 0, 0.4);
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
}
.modal-content {
background-color: #fefefe;
text-align: center;
margin: auto;
padding: 25px;
border: 2px solid #888;
border-radius: 10px;
width: 50%;
height: 50%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Matching Game</title>
<meta name="description" content="">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="container">
<header>
<h1>Matching Game</h1>
</header>
<section class="score-panel">
<ul class="stars" id="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span class="moves">0</span> Moves
<span id="minutes"></span>:<span id="seconds"></span>
<div class="modal" id="modal">
<div class="modal-content">
<p>Congratulations!</p>
<p>You won with</p>
<p><span id=totalMoves></span> moves and <span id=finalStars></span> stars</p>
<p>You finished in:<span id=totalTime></span></p>
<p>Play Again?</p>
<button id="yesBtn">Yes</button>
<button id="noBtn">No! </button>
</div>
<div class="restart"></div>
<i class="fa fa-repeat" id="restartBtn"></i>
</div>
</section>
<ul class="deck">
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</body>
</html>