如何为记忆卡牌游戏添加卡牌全匹配时的JavaScript提示弹窗？

实现逻辑 #

每次成功匹配一对卡牌后，检查所有卡牌是否都处于已翻面（flip类）状态——因为你的代码中，匹配成功的卡牌会保留flip类并移除点击事件，所以当所有卡牌都带有flip类时，就代表全部匹配完成，此时触发胜利提示。

修改步骤 #

1. 添加胜利检查函数

在你的JavaScript代码中新增一个checkWin函数：

function checkWin() {
    // 检查每一张卡牌是否都带有flip类
    const allCardsMatched = Array.from(cards).every(card => card.classList.contains('flip'));
    if (allCardsMatched) {
        // 基础弹窗提示
        alert('🎉 恭喜！所有卡牌匹配完成，你赢了！');
    }
}

2. 在匹配成功后调用检查函数

找到disableCards函数，在移除点击事件后调用checkWin()：

function disableCards() {
    firstCard.removeEventListener('click', flipCard);
    secondCard.removeEventListener('click', flipCard);
    
    // 调用胜利检查
    checkWin();

    resetBoard();
}

这样每次匹配成功一对卡牌后，程序都会自动检查是否所有卡牌都匹配完成，一旦满足条件就会弹出胜利提示。

可选：自定义美化弹窗（进阶） #

如果觉得系统alert太单调，可以替换为自定义弹窗：

1. 在HTML的<body>末尾添加弹窗结构：

<!-- 自定义胜利弹窗 -->
<div class="win-modal" id="winModal">
    <div class="modal-content">
        <h2>🎉 你赢了！</h2>
        <p>所有卡牌都匹配成功啦！</p>
        <button onclick="closeWinModal()">关闭</button>
    </div>
</div>

2. 在CSS中添加弹窗样式：

/* 弹窗背景 */
.win-modal {
    display: none; /* 默认隐藏 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* 弹窗内容 */
.modal-content {
    background-color: white;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    font-family: Arial, sans-serif;
}

.modal-content h2 {
    color: #14A8DE;
    margin-bottom: 15px;
}

.modal-content button {
    background-color: #14A8DE;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.modal-content button:hover {
    background-color: #0f8fc4;
}

3. 修改JavaScript中的checkWin并新增关闭函数：

function checkWin() {
    const allCardsMatched = Array.from(cards).every(card => card.classList.contains('flip'));
    if (allCardsMatched) {
        // 显示自定义弹窗
        document.getElementById('winModal').style.display = 'flex';
    }
}

function closeWinModal() {
    document.getElementById('winModal').style.display = 'none';
    // 可选：关闭后重置游戏
    // shuffle();
    // cards.forEach(card => {
    //     card.classList.remove('flip');
    //     card.addEventListener('click', flipCard);
    // });
}

完整修改后的JavaScript代码 #

const cards = document.querySelectorAll('.memory-card');

let hasFlippedCard = false;
let lockBoard = false;

let firstCard, secondCard;

function flipCard() {
    if (lockBoard) return;
    if (this === firstCard) return;

    this.classList.add('flip');

    if (!hasFlippedCard) {
        hasFlippedCard = true;
        firstCard = this;
        return;
    }

    secondCard = this;
    checkForMatch();
}

function checkForMatch() {
    let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
    isMatch ? disableCards() : unflipCards();
}

function disableCards() {
    firstCard.removeEventListener('click', flipCard);
    secondCard.removeEventListener('click', flipCard);
    
    // 检查胜利状态
    checkWin();

    resetBoard();
}

function unflipCards() {
    lockBoard = true;

    setTimeout(() => {
        firstCard.classList.remove('flip');
        secondCard.classList.remove('flip');
        resetBoard();
    }, 1500);
}

function resetBoard() {
    [hasFlippedCard, lockBoard] = [false, false];
    [firstCard, secondCard] = [null, null];
}

// 胜利检查函数
function checkWin() {
    const allCardsMatched = Array.from(cards).every(card => card.classList.contains('flip'));
    if (allCardsMatched) {
        alert('🎉 恭喜！所有卡牌匹配完成，你赢了！');
        // 若使用自定义弹窗则替换为：
        // document.getElementById('winModal').style.display = 'flex';
    }
}

// 关闭自定义弹窗函数（使用时取消注释）
// function closeWinModal() {
//     document.getElementById('winModal').style.display = 'none';
// }

(function shuffle() {
    cards.forEach(card => {
        let randomPos = Math.floor(Math.random() * 12);
        card.style.order = randomPos;
    });
})();
            
cards.forEach(card => card.addEventListener('click', flipCard));

内容的提问来源于stack exchange，提问作者Tyler