javascript - 内存游戏 javascript 重置功能仅适用于最后两次点击

Question

我正在玩内存游戏，但我似乎无法找出重置卡的解决方案。现在我已经写了一个小代码，它只会转动在游戏中点击的最后两张牌，但我希望在点击重置 按钮 时转动所有的牌。

下面是代码:

const resetbtn = document.querySelectorAll('.restart');

function resetcard(){

  if(cards[firstclick] == cards[secondclick]){
    firstclick.classList.remove('open','show','match');
    secondclick.classList.remove('open','show','match');
  }

}

resetbtn.forEach(resetbt => resetbt.addEventListener('click',resetcard));

元素链接是 here .

Answer 1

以下代码修复了所有已声明和未声明的问题，包括

• 洗牌
• 不能在两次尝试中选择相同的第一张牌

希望对你有帮助

/*
 * Create a list that holds all of your cards
 */
const cards = [...document.querySelectorAll('.card')];
const carddeck = document.querySelector('.deck');

let hasturnedcard = false;
let firstclick, secondclick;
//letting the board pause a little long until the cards and turned fully
let pauseboard = false;

function turncard() {
    if (pauseboard)
        return; //pause the board from turning tiles more than two tiles

    // if the card contains show it's either already selected as the first selection, or is a match - either way ignore clicks
    if (this.classList.contains('show')) {
        return;
    }

    this.classList.add('open', 'show');

    if (!hasturnedcard) {
        hasturnedcard = true;
        firstclick = this;

    } else {
        hasturnedcard = false;
        secondclick = this;
        matchingtiles();
    }
}
// the created to see whether the tiles are matching
function matchingtiles() {
    if (firstclick.dataset.name === secondclick.dataset.name) {
        //its a match
        firstclick.classList.add('match');
        secondclick.classList.add('match');
        // no need to remove click handler, since we handle logic in the click handler, and on reset we'd just add the click handler again anyway!
    } else {
        //not a match
        tilesturning();
    }
}

// if the tiles are not a match after the click function a timeout is added to slow the process of tiles turning back again
function tilesturning() {
    pauseboard = true;
    setTimeout(() => {
        //delaying the turning process
        firstclick.classList.remove('open', 'show');
        secondclick.classList.remove('open', 'show');
        firstclick = secondclick = null;
        pauseboard = false;
    }, 1000);
}
cards.forEach(card => card.addEventListener('click', turncard));
// reset the card of tiles after clicking on the reset button
document.querySelector('.restart').addEventListener('click', () => {
    shuffle(cards);
    cards.forEach(card => {
        card.classList.remove('open', 'show', 'match');
        carddeck.appendChild(card);
    });
});

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;
}