{"id":290,"date":"2026-03-19T22:32:48","date_gmt":"2026-03-19T14:32:48","guid":{"rendered":"https:\/\/www.resilence.cn\/?p=290"},"modified":"2026-03-19T22:32:48","modified_gmt":"2026-03-19T14:32:48","slug":"day-23-%e9%a1%b9%e7%9b%ae5-%e8%ae%b0%e5%bf%86%e7%bf%bb%e7%89%8c%e6%b8%b8%e6%88%8f","status":"publish","type":"post","link":"https:\/\/www.resilence.cn\/?p=290","title":{"rendered":"Day-23-\u9879\u76ee5-\u8bb0\u5fc6\u7ffb\u724c\u6e38\u620f"},"content":{"rendered":"

Day 23: \u9879\u76ee5-\u8bb0\u5fc6\u7ffb\u724c\u6e38\u620f<\/h1>\n
\n

\ud83d\udcc5 \u65e5\u671f: 2026\u5e7403\u670818\u65e5
\n\ud83c\udfaf \u5b66\u4e60\u76ee\u6807: \u521b\u5efa\u4e00\u4e2a\u5b8c\u6574\u7684\u8bb0\u5fc6\u7ffb\u724c\u6e38\u620f
\n\u23f1\ufe0f \u9884\u8ba1\u7528\u65f6: 3-4 \u5c0f\u65f6
\n\ud83d\udcc2 \u5206\u7c7b: 09-\u9879\u76ee\u5b9e\u6218<\/p>\n<\/blockquote>\n

\n

\ud83c\udfaf \u5b66\u4e60\u76ee\u6807<\/h2>\n

\u901a\u8fc7\u4eca\u5929\u7684\u5b9e\u6218\u9879\u76ee\uff0c\u4f60\u5c06\uff1a<\/p>\n

    \n
  1. \u638c\u63e1\u6e38\u620f\u5f00\u53d1\u6d41\u7a0b<\/strong>\uff1a\u4ece\u8bbe\u8ba1\u5230\u5b9e\u73b0\u5b8c\u6574\u6e38\u620f<\/li>\n
  2. \u6df1\u5165\u7406\u89e3 DOM \u64cd\u4f5c<\/strong>\uff1a\u52a8\u6001\u521b\u5efa\u3001\u5220\u9664\u3001\u4fee\u6539\u5143\u7d20<\/li>\n
  3. \u5b66\u4f1a\u4e8b\u4ef6\u59d4\u6258<\/strong>\uff1a\u9ad8\u6548\u5904\u7406\u5927\u91cf\u5143\u7d20\u7684\u4e8b\u4ef6<\/li>\n
  4. \u5b9e\u73b0\u6e38\u620f\u72b6\u6001\u7ba1\u7406<\/strong>\uff1a\u5f00\u59cb\u3001\u8fdb\u884c\u4e2d\u3001\u80dc\u5229\u3001\u5931\u8d25<\/li>\n
  5. \u5e94\u7528\u52a8\u753b\u6548\u679c<\/strong>\uff1aCSS3 \u7ffb\u8f6c\u52a8\u753b\u3001\u8fc7\u6e21\u6548\u679c<\/li>\n<\/ol>\n
    \n

    \ud83d\udca1 \u6e38\u620f\u9700\u6c42<\/h2>\n

    \u6211\u4eec\u8981\u521b\u5efa\u4e00\u4e2a \u8bb0\u5fc6\u7ffb\u724c\u6e38\u620f<\/strong>\uff0c\u5177\u6709\u4ee5\u4e0b\u529f\u80fd\uff1a<\/p>\n

    \u6838\u5fc3\u529f\u80fd<\/h3>\n
      \n
    1. \u5361\u724c\u7cfb\u7edf<\/strong>\uff1a4×4 \u7f51\u683c\uff0c16 \u5f20\u5361\u724c\uff088 \u5bf9\u56fe\u6848\uff09<\/li>\n
    2. \u7ffb\u8f6c\u673a\u5236<\/strong>\uff1a\u70b9\u51fb\u5361\u724c\u7ffb\u8f6c\uff0c\u663e\u793a\u56fe\u6848<\/li>\n
    3. \u914d\u5bf9\u903b\u8f91<\/strong>\uff1a\u4e24\u5f20\u76f8\u540c\u914d\u5bf9\u6210\u529f\uff0c\u4e0d\u540c\u5219\u7ffb\u56de<\/li>\n
    4. \u8ba1\u5206\u7cfb\u7edf<\/strong>\uff1a\u8bb0\u5f55\u6b65\u6570\u548c\u65f6\u95f4<\/li>\n
    5. \u80dc\u5229\u6761\u4ef6<\/strong>\uff1a\u6240\u6709\u5361\u724c\u914d\u5bf9\u6210\u529f<\/li>\n<\/ol>\n

      \u754c\u9762\u8bbe\u8ba1<\/h3>\n
        \n
      • \u6e38\u620f\u533a<\/strong>\uff1a4×4 \u5361\u724c\u7f51\u683c<\/li>\n
      • \u4fe1\u606f\u680f<\/strong>\uff1a\u6b65\u6570\u3001\u65f6\u95f4\u3001\u91cd\u65b0\u5f00\u59cb\u6309\u94ae<\/li>\n
      • \u80dc\u5229\u5f39\u7a97<\/strong>\uff1a\u663e\u793a\u6700\u7ec8\u6210\u7ee9<\/li>\n<\/ul>\n
        \n

        \ud83d\udcdd \u6838\u5fc3\u6982\u5ff5<\/h2>\n

        1. \u6e38\u620f\u72b6\u6001\u7ba1\u7406<\/h3>\n
        const gameState = {\n    isFlipping: false,      \/\/ \u662f\u5426\u6b63\u5728\u7ffb\u8f6c\uff08\u9632\u6296\uff09\n    firstCard: null,        \/\/ \u7b2c\u4e00\u5f20\u7ffb\u5f00\u7684\u5361\n    secondCard: null,       \/\/ \u7b2c\u4e8c\u5f20\u7ffb\u5f00\u7684\u5361\n    matchedPairs: 0,        \/\/ \u5df2\u914d\u5bf9\u6570\u91cf\n    moves: 0,              \/\/ \u6b65\u6570\n    time: 0,               \/\/ \u65f6\u95f4\uff08\u79d2\uff09\n    timer: null,           \/\/ \u5b9a\u65f6\u5668ID\n    isPlaying: false       \/\/ \u662f\u5426\u5728\u6e38\u620f\u4e2d\n};\n<\/code><\/pre>\n
        2. \u5361\u724c\u6570\u636e\u7ed3\u6784<\/h3>\n
        \/\/ \u5361\u724c\u56fe\u6848\uff08\u4f7f\u7528 emoji\uff09\nconst cardIcons = ['\ud83c\udf4e', '\ud83c\udf4a', '\ud83c\udf4b', '\ud83c\udf47', '\ud83c\udf53', '\ud83c\udf52', '\ud83e\udd5d', '\ud83c\udf51'];\n\n\/\/ \u751f\u6210\u914d\u5bf9\u6570\u636e\nfunction generateCards() {\n    const pairs = [...cardIcons, ...cardIcons];  \/\/ \u590d\u5236\u4e00\u4efd\uff0c\u6210\u5bf9\n    return shuffleArray(pairs);  \/\/ \u968f\u673a\u6253\u4e71\n}\n<\/code><\/pre>\n
        3. \u4e8b\u4ef6\u59d4\u6258\u6a21\u5f0f<\/h3>\n
        \/\/ \u2705 \u4f7f\u7528\u4e8b\u4ef6\u59d4\u6258\uff1a\u4e00\u4e2a\u76d1\u542c\u5668\u5904\u7406\u6240\u6709\u5361\u724c\ngameBoard.addEventListener('click', handleCardClick);\n\nfunction handleCardClick(event) {\n    const card = event.target.closest('.card');\n    if (!card) return;  \/\/ \u53ea\u5904\u7406\u5361\u724c\u70b9\u51fb\n    \/\/ \u5904\u7406\u7ffb\u8f6c\u903b\u8f91...\n}\n<\/code><\/pre>\n
        \n
        \ud83d\udee0\ufe0f DOM \u64cd\u4f5c\u65b9\u6cd5<\/h2>\n
        1. \u52a8\u6001\u521b\u5efa\u5143\u7d20<\/h3>\n
        \/\/ \u521b\u5efa\u5355\u4e2a\u5361\u724c\u5143\u7d20\nfunction createCardElement(icon) {\n    const card = document.createElement('div');\n    card.className = 'card';\n    card.dataset.icon = icon;\n    \n    const front = document.createElement('div');\n    front.className = 'card-front';\n    \n    const back = document.createElement('div');\n    back.className = 'card-back';\n    back.textContent = icon;\n    \n    card.appendChild(front);\n    card.appendChild(back);\n    \n    return card;\n}\n\n\/\/ \u521b\u5efa\u6e38\u620f\u9762\u677f\nfunction createGameBoard(cards) {\n    const board = document.getElementById('game-board');\n    board.innerHTML = '';  \/\/ \u6e05\u7a7a\n    \n    cards.forEach(icon => {\n        const card = createCardElement(icon);\n        board.appendChild(card);\n    });\n}\n<\/code><\/pre>\n
        2. \u7c7b\u540d\u64cd\u4f5c<\/h3>\n
        \/\/ \u6dfb\u52a0\u7c7b\uff08\u7ffb\u8f6c\u5361\u724c\uff09\ncard.classList.add('flipped');\n\n\/\/ \u79fb\u9664\u7c7b\uff08\u7ffb\u56de\u5361\u724c\uff09\ncard.classList.remove('flipped');\n\n\/\/ \u5207\u6362\u7c7b\ncard.classList.toggle('selected');\n\n\/\/ \u68c0\u67e5\u7c7b\nif (card.classList.contains('matched')) {\n    \/\/ \u5df2\u914d\u5bf9\n}\n\n\/\/ \u66ff\u6362\u7c7b\ncard.classList.replace('flipped', 'matched');\n<\/code><\/pre>\n
        3. \u6570\u636e\u5c5e\u6027<\/h3>\n
        \/\/ \u8bbe\u7f6e\u6570\u636e\ncard.dataset.icon = '\ud83c\udf4e';\ncard.dataset.index = 0;\n\n\/\/ \u8bfb\u53d6\u6570\u636e\nconst icon = card.dataset.icon;\nconst index = parseInt(card.dataset.index);\n<\/code><\/pre>\n
        \n
        \ud83c\udfae \u5b8c\u6574\u9879\u76ee\u4ee3\u7801<\/h2>\n
        HTML \u7ed3\u6784<\/h3>\n
        <!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>\u8bb0\u5fc6\u7ffb\u724c\u6e38\u620f<\/title>\n    <link rel="stylesheet" href="style.css">\n<\/head>\n<body>\n    <div class="container">\n        <header>\n            <h1>\ud83c\udfb4 \u8bb0\u5fc6\u7ffb\u724c\u6e38\u620f<\/h1>\n            <div class="stats">\n                <div class="stat">\n                    <span class="stat-label">\u6b65\u6570:<\/span>\n                    <span id="moves">0<\/span>\n                <\/div>\n                <div class="stat">\n                    <span class="stat-label">\u65f6\u95f4:<\/span>\n                    <span id="time">00:00<\/span>\n                <\/div>\n            <\/div>\n            <button id="restart-btn" class="btn">\u91cd\u65b0\u5f00\u59cb<\/button>\n        <\/header>\n        \n        <main id="game-board" class="game-board"><\/main>\n    <\/div>\n    \n    <!-- \u80dc\u5229\u5f39\u7a97 -->\n    <div id="win-modal" class="modal hidden">\n        <div class="modal-content">\n            <h2>\ud83c\udf89 \u606d\u559c\u80dc\u5229\uff01<\/h2>\n            <div class="result">\n                <p>\u6b65\u6570: <span id="final-moves">0<\/span><\/p>\n                <p>\u7528\u65f6: <span id="final-time">00:00<\/span><\/p>\n            <\/div>\n            <button id="play-again-btn" class="btn">\u518d\u73a9\u4e00\u6b21<\/button>\n        <\/div>\n    <\/div>\n    \n    <script src="script.js"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n
        CSS \u6837\u5f0f<\/h3>\n
        * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nbody {\n    font-family: 'Arial', sans-serif;\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    min-height: 100vh;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 20px;\n}\n\n.container {\n    background: white;\n    border-radius: 20px;\n    padding: 30px;\n    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);\n    max-width: 600px;\n    width: 100%;\n}\n\nheader {\n    text-align: center;\n    margin-bottom: 30px;\n}\n\nh1 {\n    color: #667eea;\n    margin-bottom: 20px;\n    font-size: 2em;\n}\n\n.stats {\n    display: flex;\n    justify-content: center;\n    gap: 30px;\n    margin-bottom: 20px;\n}\n\n.stat {\n    font-size: 1.1em;\n    color: #555;\n}\n\n.stat-label {\n    font-weight: bold;\n    margin-right: 5px;\n}\n\n.btn {\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    color: white;\n    border: none;\n    padding: 10px 30px;\n    border-radius: 25px;\n    font-size: 1em;\n    cursor: pointer;\n    transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.btn:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);\n}\n\n.btn:active {\n    transform: translateY(0);\n}\n\n\/* \u6e38\u620f\u9762\u677f *\/\n.game-board {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 15px;\n    perspective: 1000px;  \/* 3D \u6548\u679c *\/\n}\n\n\/* \u5361\u724c\u6837\u5f0f *\/\n.card {\n    aspect-ratio: 1;\n    position: relative;\n    cursor: pointer;\n    transform-style: preserve-3d;\n    transition: transform 0.5s;\n}\n\n.card.flipped {\n    transform: rotateY(180deg);\n}\n\n.card.matched {\n    cursor: default;\n}\n\n.card-front,\n.card-back {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    backface-visibility: hidden;  \/* \u9690\u85cf\u80cc\u9762 *\/\n    border-radius: 10px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 2.5em;\n    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);\n}\n\n\/* \u5361\u724c\u6b63\u9762\uff08\u80cc\u9762\u56fe\u6848\uff09 *\/\n.card-front {\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    color: white;\n    font-size: 2em;\n}\n\n.card-front::after {\n    content: '?';\n}\n\n\/* \u5361\u724c\u80cc\u9762\uff08\u5b9e\u9645\u56fe\u6848\uff09 *\/\n.card-back {\n    background: white;\n    transform: rotateY(180deg);\n    border: 3px solid #667eea;\n}\n\n\/* \u80dc\u5229\u5f39\u7a97 *\/\n.modal {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0, 0, 0, 0.5);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    z-index: 1000;\n    transition: opacity 0.3s;\n}\n\n.modal.hidden {\n    display: none;\n}\n\n.modal-content {\n    background: white;\n    padding: 40px;\n    border-radius: 20px;\n    text-align: center;\n    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);\n    animation: popIn 0.3s ease-out;\n}\n\n@keyframes popIn {\n    from {\n        transform: scale(0.8);\n        opacity: 0;\n    }\n    to {\n        transform: scale(1);\n        opacity: 1;\n    }\n}\n\n.modal-content h2 {\n    color: #667eea;\n    margin-bottom: 20px;\n    font-size: 2em;\n}\n\n.result {\n    margin: 20px 0;\n    font-size: 1.2em;\n    color: #555;\n}\n\n.result p {\n    margin: 10px 0;\n}\n\n\/* \u54cd\u5e94\u5f0f\u8bbe\u8ba1 *\/\n@media (max-width: 500px) {\n    .game-board {\n        gap: 10px;\n    }\n    \n    .card-front,\n    .card-back {\n        font-size: 2em;\n    }\n    \n    h1 {\n        font-size: 1.5em;\n    }\n}\n<\/code><\/pre>\n
        JavaScript \u903b\u8f91<\/h3>\n
        \/\/ ==================== \u914d\u7f6e ====================\nconst cardIcons = ['\ud83c\udf4e', '\ud83c\udf4a', '\ud83c\udf4b', '\ud83c\udf47', '\ud83c\udf53', '\ud83c\udf52', '\ud83e\udd5d', '\ud83c\udf51'];\n\n\/\/ ==================== \u6e38\u620f\u72b6\u6001 ====================\nconst state = {\n    cards: [],\n    flippedCards: [],\n    matchedPairs: 0,\n    moves: 0,\n    time: 0,\n    timer: null,\n    isPlaying: false\n};\n\n\/\/ ==================== DOM \u5143\u7d20 ====================\nconst gameBoard = document.getElementById('game-board');\nconst movesDisplay = document.getElementById('moves');\nconst timeDisplay = document.getElementById('time');\nconst restartBtn = document.getElementById('restart-btn');\nconst winModal = document.getElementById('win-modal');\nconst finalMoves = document.getElementById('final-moves');\nconst finalTime = document.getElementById('final-time');\nconst playAgainBtn = document.getElementById('play-again-btn');\n\n\/\/ ==================== \u5de5\u5177\u51fd\u6570 ====================\n\n\/\/ Fisher-Yates \u6d17\u724c\u7b97\u6cd5\nfunction shuffleArray(array) {\n    const newArray = [...array];\n    for (let i = newArray.length - 1; i > 0; i--) {\n        const j = Math.floor(Math.random() * (i + 1));\n        [newArray[i], newArray[j]] = [newArray[j], newArray[i]];\n    }\n    return newArray;\n}\n\n\/\/ \u683c\u5f0f\u5316\u65f6\u95f4\nfunction formatTime(seconds) {\n    const mins = Math.floor(seconds \/ 60);\n    const secs = seconds % 60;\n    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\n}\n\n\/\/ ==================== \u6e38\u620f\u521d\u59cb\u5316 ====================\n\nfunction initGame() {\n    \/\/ \u91cd\u7f6e\u72b6\u6001\n    state.flippedCards = [];\n    state.matchedPairs = 0;\n    state.moves = 0;\n    state.time = 0;\n    state.isPlaying = true;\n    \n    \/\/ \u505c\u6b62\u65e7\u8ba1\u65f6\u5668\n    if (state.timer) {\n        clearInterval(state.timer);\n    }\n    \n    \/\/ \u66f4\u65b0\u663e\u793a\n    updateDisplay();\n    \n    \/\/ \u9690\u85cf\u5f39\u7a97\n    winModal.classList.add('hidden');\n    \n    \/\/ \u751f\u6210\u5e76\u6d17\u724c\n    const cards = generateCards();\n    \n    \/\/ \u521b\u5efa\u6e38\u620f\u9762\u677f\n    createGameBoard(cards);\n    \n    \/\/ \u542f\u52a8\u8ba1\u65f6\u5668\n    startTimer();\n}\n\nfunction generateCards() {\n    \/\/ \u6210\u5bf9\u590d\u5236\n    const pairs = [...cardIcons, ...cardIcons];\n    \/\/ \u968f\u673a\u6253\u4e71\n    return shuffleArray(pairs);\n}\n\nfunction createGameBoard(cards) {\n    gameBoard.innerHTML = '';\n    \n    cards.forEach((icon, index) => {\n        const card = createCardElement(icon, index);\n        gameBoard.appendChild(card);\n    });\n}\n\nfunction createCardElement(icon, index) {\n    const card = document.createElement('div');\n    card.className = 'card';\n    card.dataset.icon = icon;\n    card.dataset.index = index;\n    \n    const front = document.createElement('div');\n    front.className = 'card-front';\n    \n    const back = document.createElement('div');\n    back.className = 'card-back';\n    back.textContent = icon;\n    \n    card.appendChild(front);\n    card.appendChild(back);\n    \n    return card;\n}\n\n\/\/ ==================== \u6e38\u620f\u903b\u8f91 ====================\n\n\/\/ \u4e8b\u4ef6\u59d4\u6258\u5904\u7406\u5361\u724c\u70b9\u51fb\ngameBoard.addEventListener('click', handleCardClick);\n\nfunction handleCardClick(event) {\n    const card = event.target.closest('.card');\n    \n    \/\/ \u5ffd\u7565\u65e0\u6548\u70b9\u51fb\n    if (!card) return;\n    if (!state.isPlaying) return;\n    if (card.classList.contains('flipped')) return;\n    if (card.classList.contains('matched')) return;\n    if (state.flippedCards.length >= 2) return;\n    \n    \/\/ \u7ffb\u8f6c\u5361\u724c\n    flipCard(card);\n}\n\nfunction flipCard(card) {\n    \/\/ \u6dfb\u52a0\u7ffb\u8f6c\u52a8\u753b\n    card.classList.add('flipped');\n    \n    \/\/ \u52a0\u5165\u5df2\u7ffb\u5361\u724c\u6570\u7ec4\n    state.flippedCards.push(card);\n    \n    \/\/ \u5982\u679c\u7ffb\u4e86\u4e24\u5f20\uff0c\u68c0\u67e5\u914d\u5bf9\n    if (state.flippedCards.length === 2) {\n        state.moves++;\n        updateDisplay();\n        checkMatch();\n    }\n}\n\nfunction checkMatch() {\n    const [card1, card2] = state.flippedCards;\n    const icon1 = card1.dataset.icon;\n    const icon2 = card2.dataset.icon;\n    \n    if (icon1 === icon2) {\n        \/\/ \u914d\u5bf9\u6210\u529f\n        handleMatch(card1, card2);\n    } else {\n        \/\/ \u914d\u5bf9\u5931\u8d25\n        handleMismatch(card1, card2);\n    }\n}\n\nfunction handleMatch(card1, card2) {\n    \/\/ \u5ef6\u8fdf\u4e00\u70b9\uff0c\u8ba9\u73a9\u5bb6\u770b\u5230\u4e24\u5f20\u724c\n    setTimeout(() => {\n        \/\/ \u6807\u8bb0\u4e3a\u5df2\u914d\u5bf9\n        card1.classList.add('matched');\n        card2.classList.add('matched');\n        \n        \/\/ \u6e05\u7a7a\u5df2\u7ffb\u5361\u724c\n        state.flippedCards = [];\n        \n        \/\/ \u589e\u52a0\u914d\u5bf9\u8ba1\u6570\n        state.matchedPairs++;\n        \n        \/\/ \u68c0\u67e5\u80dc\u5229\n        if (state.matchedPairs === cardIcons.length) {\n            handleWin();\n        }\n    }, 500);\n}\n\nfunction handleMismatch(card1, card2) {\n    \/\/ \u5ef6\u8fdf\u540e\u7ffb\u56de\n    setTimeout(() => {\n        card1.classList.remove('flipped');\n        card2.classList.remove('flipped');\n        \n        \/\/ \u6e05\u7a7a\u5df2\u7ffb\u5361\u724c\n        state.flippedCards = [];\n    }, 1000);\n}\n\nfunction handleWin() {\n    state.isPlaying = false;\n    clearInterval(state.timer);\n    \n    \/\/ \u663e\u793a\u80dc\u5229\u5f39\u7a97\n    finalMoves.textContent = state.moves;\n    finalTime.textContent = formatTime(state.time);\n    winModal.classList.remove('hidden');\n}\n\n\/\/ ==================== \u8ba1\u65f6\u5668 ====================\n\nfunction startTimer() {\n    state.timer = setInterval(() => {\n        state.time++;\n        updateDisplay();\n    }, 1000);\n}\n\n\/\/ ==================== \u66f4\u65b0\u663e\u793a ====================\n\nfunction updateDisplay() {\n    movesDisplay.textContent = state.moves;\n    timeDisplay.textContent = formatTime(state.time);\n}\n\n\/\/ ==================== \u4e8b\u4ef6\u76d1\u542c ====================\n\nrestartBtn.addEventListener('click', initGame);\nplayAgainBtn.addEventListener('click', initGame);\n\n\/\/ ==================== \u542f\u52a8\u6e38\u620f ====================\ninitGame();\n<\/code><\/pre>\n
        \n
        \u26a0\ufe0f \u91cd\u8981\u6ce8\u610f\u4e8b\u9879<\/h2>\n
        1. \u4e8b\u4ef6\u59d4\u6258\u7684\u91cd\u8981\u6027<\/h3>\n
        \/\/ \u274c \u9519\u8bef\uff1a\u6bcf\u5f20\u5361\u724c\u90fd\u6dfb\u52a0\u76d1\u542c\u5668\ncards.forEach(card => {\n    card.addEventListener('click', handleClick);  \/\/ 16 \u4e2a\u76d1\u542c\u5668\n});\n\n\/\/ \u2705 \u6b63\u786e\uff1a\u4f7f\u7528\u4e8b\u4ef6\u59d4\u6258\ngameBoard.addEventListener('click', (event) => {\n    const card = event.target.closest('.card');\n    if (card) handleClick(card);  \/\/ \u53ea\u6709 1 \u4e2a\u76d1\u542c\u5668\n});\n<\/code><\/pre>\n
        \u4f18\u70b9<\/strong>\uff1a<\/p>\n