{"id":286,"date":"2026-03-19T22:32:28","date_gmt":"2026-03-19T14:32:28","guid":{"rendered":"https:\/\/www.resilence.cn\/?p=286"},"modified":"2026-03-19T22:32:28","modified_gmt":"2026-03-19T14:32:28","slug":"day-21-%e9%a1%b9%e7%9b%ae3-%e7%8c%9c%e6%95%b0%e5%ad%97%e6%b8%b8%e6%88%8f","status":"publish","type":"post","link":"https:\/\/www.resilence.cn\/?p=286","title":{"rendered":"Day-21-\u9879\u76ee3-\u731c\u6570\u5b57\u6e38\u620f"},"content":{"rendered":"

Day 21: \u9879\u76ee3-\u731c\u6570\u5b57\u6e38\u620f<\/h1>\n
\n

\ud83c\udfaf Day 21 – \u731c\u6570\u5b57\u6e38\u620f<\/strong>
\n\ud83d\udcc2 \u5206\u7c7b: 09-\u9879\u76ee\u5b9e\u6218
\n\ud83d\udd25 \u96be\u5ea6: \u2b50\u2b50\u2b50\u2606\u2606<\/p>\n<\/blockquote>\n

\n

\ud83c\udfaf \u5b66\u4e60\u76ee\u6807<\/h2>\n
    \n
  • \u2705 \u638c\u63e1 Math.random() \u548c\u968f\u673a\u6570\u751f\u6210<\/li>\n
  • \u2705 \u5b66\u4f1a\u8868\u5355\u9a8c\u8bc1\u548c\u7528\u6237\u8f93\u5165\u5904\u7406<\/li>\n
  • \u2705 \u7406\u89e3\u6e38\u620f\u5faa\u73af\u548c\u72b6\u6001\u7ba1\u7406<\/li>\n
  • \u2705 \u638c\u63e1\u4e8b\u4ef6\u76d1\u542c\u548c\u4ea4\u4e92\u903b\u8f91<\/li>\n
  • \u2705 \u5b66\u4f1a\u4f7f\u7528 CSS \u52a8\u753b\u589e\u5f3a\u4f53\u9a8c<\/li>\n<\/ul>\n
    \n

    \ud83d\udca1 \u9879\u76ee\u6982\u8ff0<\/h2>\n

    \u9879\u76ee\u7b80\u4ecb<\/h3>\n

    \u731c\u6570\u5b57\u6e38\u620f<\/strong>\u662f\u5b66\u4e60\u4ea4\u4e92\u5f0f\u7f16\u7a0b\u7684\u7ecf\u5178\u9879\u76ee\uff0c\u5b83\u5305\u542b\uff1a<\/p>\n

      \n
    • \ud83c\udfb2 \u968f\u673a\u6570\u751f\u6210<\/strong>\uff1aMath.random() \u7684\u5b9e\u9645\u5e94\u7528<\/li>\n
    • \ud83c\udfae \u6e38\u620f\u5faa\u73af<\/strong>\uff1a\u5f00\u59cb \u2192 \u731c\u6d4b \u2192 \u53cd\u9988 \u2192 \u7ee7\u7eed<\/li>\n
    • \ud83c\udfc6 \u80dc\u8d1f\u5224\u5b9a<\/strong>\uff1a\u6bd4\u8f83\u731c\u6d4b\u4e0e\u76ee\u6807\u6570\u5b57<\/li>\n
    • \ud83d\udcca \u7edf\u8ba1\u8ffd\u8e2a<\/strong>\uff1a\u8bb0\u5f55\u731c\u6d4b\u6b21\u6570\u548c\u6700\u4f73\u6210\u7ee9<\/li>\n
    • \ud83c\udfa8 UI \u53cd\u9988<\/strong>\uff1a\u89c6\u89c9\u63d0\u793a\u548c\u52a8\u753b\u6548\u679c<\/li>\n<\/ul>\n

      \u6838\u5fc3\u529f\u80fd<\/h3>\n
        \n
      • [ ] \u751f\u6210 1-100 \u7684\u968f\u673a\u6570<\/li>\n
      • [ ] \u63a5\u53d7\u7528\u6237\u8f93\u5165\u5e76\u9a8c\u8bc1<\/li>\n
      • [ ] \u5224\u65ad\u5927\u5c0f\u5e76\u7ed9\u51fa\u63d0\u793a<\/li>\n
      • [ ] \u8bb0\u5f55\u731c\u6d4b\u6b21\u6570<\/li>\n
      • [ ] \u91cd\u65b0\u5f00\u59cb\u6e38\u620f<\/li>\n
      • [ ] \u5386\u53f2\u6700\u4f73\u6210\u7ee9<\/li>\n<\/ul>\n

        \u6280\u672f\u91cd\u70b9<\/h3>\n
          \n
        • \u968f\u673a\u6570<\/strong>: Math.random()\u3001Math.floor()<\/li>\n
        • DOM \u64cd\u4f5c<\/strong>: \u8868\u5355\u3001\u6309\u94ae\u3001\u6587\u672c<\/li>\n
        • \u4e8b\u4ef6\u5904\u7406<\/strong>: submit\u3001click\u3001keypress<\/li>\n
        • \u72b6\u6001\u7ba1\u7406<\/strong>: \u6e38\u620f\u72b6\u6001\u3001\u5386\u53f2\u8bb0\u5f55<\/li>\n
        • CSS \u52a8\u753b<\/strong>: \u8fc7\u6e21\u6548\u679c\u3001\u89c6\u89c9\u53cd\u9988<\/li>\n<\/ul>\n
          \n

          \ud83d\udcdd \u9879\u76ee\u7ed3\u6784<\/h2>\n
          guess-game\/\n\u251c\u2500\u2500 index.html          # \u4e3b\u9875\u9762\n\u251c\u2500\u2500 style.css           # \u6837\u5f0f\u6587\u4ef6\n\u2514\u2500\u2500 script.js           # JavaScript\u903b\u8f91\n<\/code><\/pre>\n
          \n
          \ud83c\udfae \u5b8c\u6574\u4ee3\u7801<\/h2>\n
          1. HTML (index.html)<\/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>\u731c\u6570\u5b57\u6e38\u620f<\/title>\n    <link rel="stylesheet" href="style.css">\n<\/head>\n<body>\n    <div class="container">\n        <header>\n            <h1>\ud83c\udfb2 \u731c\u6570\u5b57\u6e38\u620f<\/h1>\n            <p class="subtitle">\u6211\u6709\u4e00\u4e2a 1-100 \u4e4b\u95f4\u7684\u6570\u5b57\uff0c\u4f60\u80fd\u731c\u5230\u5417\uff1f<\/p>\n        <\/header>\n\n        <!-- \u6e38\u620f\u4fe1\u606f -->\n        <div class="game-info">\n            <div class="info-item">\n                <span class="label">\u5c1d\u8bd5\u6b21\u6570<\/span>\n                <span class="value" id="guessCount">0<\/span>\n            <\/div>\n            <div class="info-item">\n                <span class="label">\u5386\u53f2\u6700\u4f73<\/span>\n                <span class="value" id="bestScore">-<\/span>\n            <\/div>\n        <\/div>\n\n        <!-- \u6e38\u620f\u533a\u57df -->\n        <div class="game-area">\n            <!-- \u8f93\u5165\u533a\u57df -->\n            <div class="input-section">\n                <label for="guessInput">\u8f93\u5165\u4f60\u7684\u731c\u6d4b (1-100)<\/label>\n                <div class="input-group">\n                    <input \n                        type="number" \n                        id="guessInput" \n                        min="1" \n                        max="100" \n                        placeholder="\u8f93\u5165\u6570\u5b57..."\n                        autocomplete="off"\n                    >\n                    <button id="submitBtn" class="btn btn-primary">\u731c\uff01<\/button>\n                <\/div>\n                <p class="hint" id="inputHint"><\/p>\n            <\/div>\n\n            <!-- \u53cd\u9988\u533a\u57df -->\n            <div class="feedback-section" id="feedback">\n                <div class="feedback-icon" id="feedbackIcon">\u2753<\/div>\n                <div class="feedback-message" id="feedbackMessage">\n                    \u5f00\u59cb\u6e38\u620f\u5427\uff01\u8f93\u5165\u4f60\u7684\u731c\u6d4b\n                <\/div>\n                <div class="feedback-detail" id="feedbackDetail"><\/div>\n            <\/div>\n\n            <!-- \u5386\u53f2\u8bb0\u5f55 -->\n            <div class="history-section">\n                <h3>\u731c\u6d4b\u5386\u53f2<\/h3>\n                <div class="history-list" id="historyList">\n                    <p class="empty">\u8fd8\u6ca1\u6709\u731c\u6d4b\u8bb0\u5f55<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- \u91cd\u65b0\u5f00\u59cb -->\n            <button id="restartBtn" class="btn btn-secondary" style="display: none;">\n                \ud83d\udd04 \u91cd\u65b0\u5f00\u59cb\n            <\/button>\n        <\/div>\n    <\/div>\n\n    <script src="script.js"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n
          2. CSS (style.css)<\/h3>\n
          \/* \u5168\u5c40\u6837\u5f0f *\/\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nbody {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 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\/* \u5bb9\u5668 *\/\n.container {\n    background: white;\n    border-radius: 20px;\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n    max-width: 500px;\n    width: 100%;\n    padding: 30px;\n    animation: fadeIn 0.5s ease;\n}\n\n@keyframes fadeIn {\n    from {\n        opacity: 0;\n        transform: translateY(-20px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n\/* \u5934\u90e8 *\/\nheader {\n    text-align: center;\n    margin-bottom: 30px;\n}\n\nheader h1 {\n    color: #333;\n    font-size: 32px;\n    margin-bottom: 10px;\n}\n\n.subtitle {\n    color: #666;\n    font-size: 14px;\n}\n\n\/* \u6e38\u620f\u4fe1\u606f *\/\n.game-info {\n    display: flex;\n    justify-content: space-around;\n    background: #f7f7f7;\n    border-radius: 12px;\n    padding: 15px;\n    margin-bottom: 30px;\n}\n\n.info-item {\n    text-align: center;\n}\n\n.info-item .label {\n    display: block;\n    color: #666;\n    font-size: 12px;\n    margin-bottom: 5px;\n}\n\n.info-item .value {\n    display: block;\n    color: #667eea;\n    font-size: 24px;\n    font-weight: bold;\n}\n\n\/* \u6e38\u620f\u533a\u57df *\/\n.game-area {\n    margin-top: 20px;\n}\n\n\/* \u8f93\u5165\u533a\u57df *\/\n.input-section {\n    margin-bottom: 20px;\n}\n\n.input-section label {\n    display: block;\n    color: #333;\n    font-weight: 600;\n    margin-bottom: 10px;\n}\n\n.input-group {\n    display: flex;\n    gap: 10px;\n}\n\n#guessInput {\n    flex: 1;\n    padding: 15px;\n    border: 2px solid #e0e0e0;\n    border-radius: 10px;\n    font-size: 18px;\n    text-align: center;\n    transition: border-color 0.3s;\n}\n\n#guessInput:focus {\n    outline: none;\n    border-color: #667eea;\n}\n\n.btn {\n    padding: 15px 30px;\n    border: none;\n    border-radius: 10px;\n    font-size: 16px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.3s;\n}\n\n.btn-primary {\n    background: #667eea;\n    color: white;\n}\n\n.btn-primary:hover {\n    background: #5568d3;\n    transform: scale(1.05);\n}\n\n.btn-secondary {\n    background: #f7f7f7;\n    color: #333;\n    width: 100%;\n    margin-top: 20px;\n}\n\n.btn-secondary:hover {\n    background: #e0e0e0;\n}\n\n.hint {\n    color: #999;\n    font-size: 12px;\n    margin-top: 8px;\n    min-height: 18px;\n}\n\n.hint.error {\n    color: #f56565;\n}\n\n.hint.success {\n    color: #48bb78;\n}\n\n\/* \u53cd\u9988\u533a\u57df *\/\n.feedback-section {\n    background: #f7f7f7;\n    border-radius: 12px;\n    padding: 20px;\n    text-align: center;\n    margin-bottom: 20px;\n    transition: all 0.3s;\n}\n\n.feedback-section.too-high {\n    background: #fed7d7;\n    border: 2px solid #fc8181;\n}\n\n.feedback-section.too-low {\n    background: #bee3f8;\n    border: 2px solid #63b3ed;\n}\n\n.feedback-section.correct {\n    background: #c6f6d5;\n    border: 2px solid #48bb78;\n    animation: celebrate 0.5s ease;\n}\n\n@keyframes celebrate {\n    0%, 100% { transform: scale(1); }\n    50% { transform: scale(1.05); }\n}\n\n.feedback-icon {\n    font-size: 48px;\n    margin-bottom: 10px;\n}\n\n.feedback-message {\n    font-size: 20px;\n    font-weight: bold;\n    color: #333;\n    margin-bottom: 10px;\n}\n\n.feedback-detail {\n    font-size: 14px;\n    color: #666;\n}\n\n\/* \u5386\u53f2\u8bb0\u5f55 *\/\n.history-section {\n    margin-bottom: 20px;\n}\n\n.history-section h3 {\n    font-size: 16px;\n    color: #333;\n    margin-bottom: 10px;\n}\n\n.history-list {\n    background: #f7f7f7;\n    border-radius: 10px;\n    padding: 15px;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.history-list .empty {\n    color: #999;\n    text-align: center;\n    font-size: 14px;\n}\n\n.history-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 8px;\n    border-bottom: 1px solid #e0e0e0;\n    animation: slideIn 0.3s ease;\n}\n\n@keyframes slideIn {\n    from {\n        opacity: 0;\n        transform: translateX(-10px);\n    }\n    to {\n        opacity: 1;\n        transform: translateX(0);\n    }\n}\n\n.history-item:last-child {\n    border-bottom: none;\n}\n\n.history-number {\n    font-weight: bold;\n    color: #333;\n}\n\n.history-arrow {\n    font-size: 12px;\n    margin: 0 10px;\n}\n\n.history-arrow.high {\n    color: #fc8181;\n}\n\n.history-arrow.low {\n    color: #63b3ed;\n}\n\n\/* \u54cd\u5e94\u5f0f *\/\n@media (max-width: 480px) {\n    .container {\n        padding: 20px;\n    }\n    \n    header h1 {\n        font-size: 24px;\n    }\n    \n    .input-group {\n        flex-direction: column;\n    }\n    \n    .btn-primary {\n        width: 100%;\n    }\n}\n<\/code><\/pre>\n
          3. JavaScript (script.js)<\/h3>\n
          \/\/ ========== \u6e38\u620f\u72b6\u6001 ==========\nclass GuessGame {\n    constructor() {\n        this.targetNumber = this.generateRandomNumber();\n        this.guessCount = 0;\n        this.guessHistory = [];\n        this.gameOver = false;\n        this.bestScore = this.loadBestScore();\n        \n        this.initializeElements();\n        this.attachEventListeners();\n        this.updateDisplay();\n        this.loadBestScore();\n    }\n\n    \/\/ \u521d\u59cb\u5316 DOM \u5143\u7d20\n    initializeElements() {\n        this.elements = {\n            guessInput: document.getElementById('guessInput'),\n            submitBtn: document.getElementById('submitBtn'),\n            restartBtn: document.getElementById('restartBtn'),\n            guessCount: document.getElementById('guessCount'),\n            bestScore: document.getElementById('bestScore'),\n            feedback: document.getElementById('feedback'),\n            feedbackIcon: document.getElementById('feedbackIcon'),\n            feedbackMessage: document.getElementById('feedbackMessage'),\n            feedbackDetail: document.getElementById('feedbackDetail'),\n            historyList: document.getElementById('historyList'),\n            inputHint: document.getElementById('inputHint')\n        };\n    }\n\n    \/\/ \u9644\u52a0\u4e8b\u4ef6\u76d1\u542c\u5668\n    attachEventListeners() {\n        \/\/ \u63d0\u4ea4\u6309\u94ae\n        this.elements.submitBtn.addEventListener('click', () => {\n            this.handleGuess();\n        });\n\n        \/\/ \u56de\u8f66\u952e\u63d0\u4ea4\n        this.elements.guessInput.addEventListener('keypress', (e) => {\n            if (e.key === 'Enter') {\n                this.handleGuess();\n            }\n        });\n\n        \/\/ \u8f93\u5165\u9a8c\u8bc1\n        this.elements.guessInput.addEventListener('input', () => {\n            this.validateInput();\n        });\n\n        \/\/ \u91cd\u65b0\u5f00\u59cb\n        this.elements.restartBtn.addEventListener('click', () => {\n            this.restart();\n        });\n    }\n\n    \/\/ \u751f\u6210\u968f\u673a\u6570 (1-100)\n    generateRandomNumber() {\n        return Math.floor(Math.random() * 100) + 1;\n    }\n\n    \/\/ \u9a8c\u8bc1\u8f93\u5165\n    validateInput() {\n        const value = this.elements.guessInput.value;\n        const hint = this.elements.inputHint;\n        \n        if (value === '') {\n            hint.textContent = '';\n            hint.className = 'hint';\n            return false;\n        }\n\n        const num = parseInt(value);\n        \n        if (isNaN(num)) {\n            hint.textContent = '\u8bf7\u8f93\u5165\u6709\u6548\u7684\u6570\u5b57';\n            hint.className = 'hint error';\n            return false;\n        }\n\n        if (num < 1 || num > 100) {\n            hint.textContent = '\u6570\u5b57\u5fc5\u987b\u5728 1-100 \u4e4b\u95f4';\n            hint.className = 'hint error';\n            return false;\n        }\n\n        hint.textContent = '\u2713 \u6709\u6548';\n        hint.className = 'hint success';\n        return true;\n    }\n\n    \/\/ \u5904\u7406\u731c\u6d4b\n    handleGuess() {\n        if (this.gameOver) {\n            return;\n        }\n\n        if (!this.validateInput()) {\n            this.shakeInput();\n            return;\n        }\n\n        const guess = parseInt(this.elements.guessInput.value);\n        this.guessCount++;\n        \n        \/\/ \u6dfb\u52a0\u5230\u5386\u53f2\n        this.guessHistory.push(guess);\n        \n        \/\/ \u5224\u65ad\u7ed3\u679c\n        if (guess === this.targetNumber) {\n            this.handleCorrectGuess(guess);\n        } else if (guess > this.targetNumber) {\n            this.handleTooHigh(guess);\n        } else {\n            this.handleTooLow(guess);\n        }\n        \n        \/\/ \u66f4\u65b0\u663e\u793a\n        this.updateDisplay();\n        this.addToHistory(guess, guess > this.targetNumber ? 'high' : 'low');\n        \n        \/\/ \u6e05\u7a7a\u8f93\u5165\u5e76\u805a\u7126\n        if (!this.gameOver) {\n            this.elements.guessInput.value = '';\n            this.elements.guessInput.focus();\n        }\n    }\n\n    \/\/ \u731c\u5bf9\u4e86\n    handleCorrectGuess(guess) {\n        this.gameOver = true;\n        \n        \/\/ \u66f4\u65b0\u6700\u4f73\u6210\u7ee9\n        if (this.bestScore === null || this.guessCount < this.bestScore) {\n            this.bestScore = this.guessCount;\n            this.saveBestScore();\n        }\n        \n        \/\/ \u663e\u793a\u6210\u529f\u53cd\u9988\n        this.elements.feedback.className = 'feedback-section correct';\n        this.elements.feedbackIcon.textContent = '\ud83c\udf89';\n        this.elements.feedbackMessage.textContent = '\u606d\u559c\u4f60\uff0c\u731c\u5bf9\u4e86\uff01';\n        this.elements.feedbackDetail.textContent = \n            `\u6570\u5b57\u662f ${this.targetNumber}\uff0c\u4f60\u7528\u4e86 ${this.guessCount} \u6b21\u731c\u6d4b`;\n        \n        \/\/ \u663e\u793a\u91cd\u65b0\u5f00\u59cb\u6309\u94ae\n        this.elements.restartBtn.style.display = 'block';\n        this.elements.submitBtn.disabled = true;\n        this.elements.guessInput.disabled = true;\n    }\n\n    \/\/ \u731c\u5927\u4e86\n    handleTooHigh(guess) {\n        this.elements.feedback.className = 'feedback-section too-high';\n        this.elements.feedbackIcon.textContent = '\ud83d\udcc8';\n        this.elements.feedbackMessage.textContent = '\u592a\u5927\u4e86\uff01';\n        this.elements.feedbackDetail.textContent = \n            `\u4f60\u7684\u731c\u6d4b ${guess} \u6bd4\u76ee\u6807\u6570\u5b57\u5927`;\n    }\n\n    \/\/ \u731c\u5c0f\u4e86\n    handleTooLow(guess) {\n        this.elements.feedback.className = 'feedback-section too-low';\n        this.elements.feedbackIcon.textContent = '\ud83d\udcc9';\n        this.elements.feedbackMessage.textContent = '\u592a\u5c0f\u4e86\uff01';\n        this.elements.feedbackDetail.textContent = \n            `\u4f60\u7684\u731c\u6d4b ${guess} \u6bd4\u76ee\u6807\u6570\u5b57\u5c0f`;\n    }\n\n    \/\/ \u6dfb\u52a0\u5230\u5386\u53f2\u8bb0\u5f55\n    addToHistory(guess, direction) {\n        const historyItem = document.createElement('div');\n        historyItem.className = 'history-item';\n        \n        const arrow = direction === 'high' ? '\u2193' : '\u2191';\n        const arrowClass = direction === 'high' ? 'high' : 'low';\n        \n        historyItem.innerHTML = `\n            <span class="history-number">#${this.guessCount}: ${guess}<\/span>\n            <span class="history-arrow ${arrowClass}">${arrow}<\/span>\n        `;\n        \n        \/\/ \u79fb\u9664\u7a7a\u63d0\u793a\n        const empty = this.elements.historyList.querySelector('.empty');\n        if (empty) {\n            empty.remove();\n        }\n        \n        \/\/ \u6dfb\u52a0\u5230\u5f00\u5934\n        this.elements.historyList.insertBefore(\n            historyItem,\n            this.elements.historyList.firstChild\n        );\n    }\n\n    \/\/ \u66f4\u65b0\u663e\u793a\n    updateDisplay() {\n        this.elements.guessCount.textContent = this.guessCount;\n        this.elements.bestScore.textContent = \n            this.bestScore !== null ? this.bestScore : '-';\n    }\n\n    \/\/ \u8f93\u5165\u6846\u6296\u52a8\u6548\u679c\n    shakeInput() {\n        const input = this.elements.guessInput;\n        input.style.animation = 'none';\n        input.offsetHeight;  \/\/ \u89e6\u53d1\u91cd\u7ed8\n        input.style.animation = 'shake 0.5s ease';\n    }\n\n    \/\/ \u91cd\u65b0\u5f00\u59cb\n    restart() {\n        this.targetNumber = this.generateRandomNumber();\n        this.guessCount = 0;\n        this.guessHistory = [];\n        this.gameOver = false;\n        \n        \/\/ \u91cd\u7f6e UI\n        this.elements.feedback.className = 'feedback-section';\n        this.elements.feedbackIcon.textContent = '\u2753';\n        this.elements.feedbackMessage.textContent = '\u5f00\u59cb\u6e38\u620f\u5427\uff01\u8f93\u5165\u4f60\u7684\u731c\u6d4b';\n        this.elements.feedbackDetail.textContent = '';\n        \n        this.elements.restartBtn.style.display = 'none';\n        this.elements.submitBtn.disabled = false;\n        this.elements.guessInput.disabled = false;\n        this.elements.guessInput.value = '';\n        this.elements.guessInput.focus();\n        \n        this.elements.historyList.innerHTML = '<p class="empty">\u8fd8\u6ca1\u6709\u731c\u6d4b\u8bb0\u5f55<\/p>';\n        \n        this.updateDisplay();\n    }\n\n    \/\/ \u52a0\u8f7d\u6700\u4f73\u6210\u7ee9\n    loadBestScore() {\n        const saved = localStorage.getItem('guessGameBestScore');\n        if (saved) {\n            this.bestScore = parseInt(saved);\n        }\n    }\n\n    \/\/ \u4fdd\u5b58\u6700\u4f73\u6210\u7ee9\n    saveBestScore() {\n        localStorage.setItem('guessGameBestScore', this.bestScore);\n    }\n}\n\n\/\/ \u6dfb\u52a0\u6296\u52a8\u52a8\u753b\nconst style = document.createElement('style');\nstyle.textContent = `\n    @keyframes shake {\n        0%, 100% { transform: translateX(0); }\n        10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }\n        20%, 40%, 60%, 80% { transform: translateX(5px); }\n    }\n`;\ndocument.head.appendChild(style);\n\n\/\/ \u521d\u59cb\u5316\u6e38\u620f\ndocument.addEventListener('DOMContentLoaded', () => {\n    const game = new GuessGame();\n    console.log('\ud83c\udfae \u731c\u6570\u5b57\u6e38\u620f\u5df2\u542f\u52a8\uff01');\n    console.log('\ud83d\udca1 \u63d0\u793a\uff1a\u6309\u56de\u8f66\u952e\u5feb\u901f\u63d0\u4ea4\u731c\u6d4b');\n});\n<\/code><\/pre>\n
          \n
          \ud83c\udfaf \u9879\u76ee\u4eae\u70b9<\/h2>\n
          1. \u5b8c\u6574\u7684\u6e38\u620f\u5faa\u73af<\/h3>\n
          \u5f00\u59cb \u2192 \u751f\u6210\u968f\u673a\u6570 \u2192 \u63a5\u53d7\u8f93\u5165 \u2192 \u5224\u65ad \u2192 \u53cd\u9988 \u2192 \u7ee7\u7eed\/\u7ed3\u675f\n<\/code><\/pre>\n
          2. \u72b6\u6001\u7ba1\u7406<\/h3>\n
          class GuessGame {\n    constructor() {\n        this.targetNumber = null;      \/\/ \u76ee\u6807\u6570\u5b57\n        this.guessCount = 0;           \/\/ \u731c\u6d4b\u6b21\u6570\n        this.guessHistory = [];        \/\/ \u5386\u53f2\u8bb0\u5f55\n        this.gameOver = false;         \/\/ \u6e38\u620f\u72b6\u6001\n        this.bestScore = null;         \/\/ \u6700\u4f73\u6210\u7ee9\n    }\n}\n<\/code><\/pre>\n
          3. \u7528\u6237\u8f93\u5165\u9a8c\u8bc1<\/h3>\n
          validateInput() {\n    \/\/ \u68c0\u67e5\u662f\u5426\u4e3a\u6570\u5b57\n    \/\/ \u68c0\u67e5\u8303\u56f4\u662f\u5426\u6709\u6548\n    \/\/ \u63d0\u4f9b\u5b9e\u65f6\u53cd\u9988\n}\n<\/code><\/pre>\n
          4. \u672c\u5730\u5b58\u50a8\u6700\u4f73\u6210\u7ee9<\/h3>\n
          \/\/ \u4fdd\u5b58\u5230 localStorage\nlocalStorage.setItem('guessGameBestScore', this.bestScore);\n\n\/\/ \u4ece localStorage \u52a0\u8f7d\nconst saved = localStorage.getItem('guessGameBestScore');\n<\/code><\/pre>\n
          \n
          \u270d\ufe0f \u7ec3\u4e60\u4efb\u52a1<\/h2>\n
          \u7ec3\u4e601: \u57fa\u7840\u529f\u80fd\uff0830\u5206\u949f\uff09<\/h3>\n