Javascript 单击快速时单击功能崩溃
我制作了一款卡片记忆游戏,一切都很好,只是当你点击卡片太快时,即使不匹配,也会让它们打开。我尝试的是让用户一次只点击两张卡片,或者防止用户点击太快导致卡片崩溃,同样因为我很少有IFs和ELSE(尝试了计数器,但)放置问题,如有任何建议,将不胜感激。 谢谢 完整代码在Javascript 单击快速时单击功能崩溃,javascript,click,event-listener,Javascript,Click,Event Listener,我制作了一款卡片记忆游戏,一切都很好,只是当你点击卡片太快时,即使不匹配,也会让它们打开。我尝试的是让用户一次只点击两张卡片,或者防止用户点击太快导致卡片崩溃,同样因为我很少有IFs和ELSE(尝试了计数器,但)放置问题,如有任何建议,将不胜感激。 谢谢 完整代码在 函数洗牌(数组){ 让currentIndex=array.length,temporaryValue,randomIndex; while(currentIndex!==0){ randomIndex=Math.floor(Mat
函数洗牌(数组){
让currentIndex=array.length,temporaryValue,randomIndex;
while(currentIndex!==0){
randomIndex=Math.floor(Math.random()*currentIndex);
currentIndex-=1;
临时值=数组[currentIndex];
数组[currentIndex]=数组[randomIndex];
数组[randomIndex]=临时值;
}
返回数组;
}
window.onload=函数(){
让openedCards=[];
匹配卡=[];
currentCard=[];
以前的卡片=0;
moveCount=0;
restart=document.getElementsByClassName('restart');
modal=document.getElementById('myModal');
span=document.getElementsByClassName('close')[0];
//console.log(restart);只是看看重新启动是否有效
重新启动[0]。addEventListener('click',函数(){
location.reload();
})
//log(“它已加载!”)来检查这是否有效
常量卡片=['fa-diamond','fa-diamond','fa-paper-plane-o','fa-paper-plane-o','fa-anchor','fa-anchor','fa-anchor','fa-bolt','fa-bolt','fa-cube','fa-cube','fa-leaf','fa-bicycle','fa-bicycle',
“fa炸弹”、“fa炸弹”];
让shuffleCards=洗牌(卡片);
//console.log(shuffleCards);检查此操作是否有效
让cardElements=document.getElementsByCassName('symbols');
//console.log(cardElements);检查此功能是否有效
对于(i=0;ifunction shuffle(array) {
let 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;
}
window.onload = function () {
let openedCards = [];
matchedCards = [];
currentCard = [];
previouseCard= 0 ;
moveCount = 0 ;
restart = document.getElementsByClassName ('restart');
modal = document.getElementById('myModal');
span = document.getElementsByClassName('close')[0];
// console.log (restart); just to see if restart works
restart[0].addEventListener ('click', function (){
location.reload();
})
// console.log("It's loaded!") to check if this works
const cards = ['fa-diamond','fa-diamond', 'fa-paper-plane-o','fa-paper-plane-o', 'fa-anchor', 'fa-anchor', 'fa-bolt', 'fa-bolt', 'fa-cube', 'fa-cube', 'fa-leaf', 'fa-leaf', 'fa-bicycle', 'fa-bicycle',
'fa-bomb','fa-bomb' ];
let shuffleCards = shuffle (cards);
// console.log (shuffleCards); to check if this works
let cardElements = document.getElementsByClassName('symbols');
// console.log (cardElements); to check if this works
for (i=0; i < cardElements.length; i++ ) {
cardElements[i].className = shuffleCards[i]+ ' fa symbols';
}
// initialising popup
function popup() {
modal.style.display = "flex";
document.getElementById('p1').innerHTML = 'You did it in '+ moveCount+ ' moves' + ' and ' + seconds+ ' seconds.';
}
// Closing popup by clicking x
span.onclick = function closeX () {
modal.style.display = "none";
}
// function close popup by clicking any where
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Stopwatch initialisation
let stopWatch = document.getElementById ('timer');
time = 0;
seconds=0
// start time
function startTime () {
time = setInterval ( function (){
seconds++;
stopWatch.innerHTML = seconds + ' s';
}, 1000);
}
// stop the time function
function stopTime () {
clearInterval (time);
}
let displayCards = document.getElementsByClassName ('card');
console.log (displayCards);
// Click Event
function cardClick () {
currentCard = this;
currentCard.removeEventListener ('click', cardClick);
console.log (currentCard);
// updating move counts
let countMoves = document.getElementById ('moves');
moveCount++ ;
countMoves.innerHTML= moveCount;
console.log(countMoves);
// star ranking;
if ( moveCount === 20) {
let removeStar = document.getElementById('star3');
removeStar.style.display = 'none';
} else if (moveCount ===30) {
let removeStarTwo = document.getElementById ('star2');
removeStarTwo.style.display = 'none';
}
// start stopwatch at the first click.
if ( moveCount ===1) {
startTime ();
}
currentCard.classList.add('open', 'show');
if (previouseCard) {
// matching cards
if (currentCard.innerHTML === previouseCard.innerHTML) {
currentCard.classList.add('match');
previouseCard.classList.add('match');
matchedCards.push(currentCard,previouseCard);
// console.log ('match'); this line here for just test purpose
previouseCard = null ;
// check if won
if (cards.length === matchedCards.length) {
// stopping stopwatch
stopTime();
// calling popup function
popup ();
}
} else {
// when cards are not matched
setTimeout (function(){
currentCard.classList.remove ('open', 'show');
previouseCard.classList.remove ('open', 'show');
currentCard.addEventListener ('click', cardClick);
previouseCard.addEventListener ('click', cardClick);
previouseCard = null ;
}, 500);
}
} else {
previouseCard = currentCard ;
openedCards.push(this);
}
}
// event listener function
for (i=0; i < displayCards.length; i++) {
displayCards[i].addEventListener('click', cardClick);
}
}
if(!clickFlag){
alert("Please wait");
return;
}