{"id":288,"date":"2026-03-19T22:32:38","date_gmt":"2026-03-19T14:32:38","guid":{"rendered":"https:\/\/www.resilence.cn\/?p=288"},"modified":"2026-03-19T22:32:38","modified_gmt":"2026-03-19T14:32:38","slug":"day-22-%e9%a1%b9%e7%9b%ae4-%e6%89%93%e5%ad%97%e7%bb%83%e4%b9%a0%e6%b8%b8%e6%88%8f","status":"publish","type":"post","link":"https:\/\/www.resilence.cn\/?p=288","title":{"rendered":"Day-22-\u9879\u76ee4-\u6253\u5b57\u7ec3\u4e60\u6e38\u620f"},"content":{"rendered":"

Day 22: \u9879\u76ee4-\u6253\u5b57\u7ec3\u4e60\u6e38\u620f<\/h1>\n
\n

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

\n

\ud83c\udfaf \u5b66\u4e60\u76ee\u6807<\/h2>\n
    \n
  • \u2705 \u638c\u63e1\u952e\u76d8\u4e8b\u4ef6\u5904\u7406\uff08keydown\u3001keyup\uff09<\/li>\n
  • \u2705 \u5b66\u4f1a\u5b9e\u65f6\u8f93\u5165\u9a8c\u8bc1\u548c\u53cd\u9988<\/li>\n
  • \u2705 \u7406\u89e3\u6e38\u620f\u8ba1\u65f6\u548cWPM\u8ba1\u7b97<\/li>\n
  • \u2705 \u638c\u63e1\u6253\u5b57\u51c6\u786e\u7387\u7edf\u8ba1<\/li>\n
  • \u2705 \u5b66\u4f1a\u4f7f\u7528CSS\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

    \u6253\u5b57\u7ec3\u4e60\u6e38\u620f<\/strong>\u662f\u5b66\u4e60\u952e\u76d8\u4e8b\u4ef6\u548c\u5b9e\u65f6\u4ea4\u4e92\u7684\u7ecf\u5178\u9879\u76ee\uff0c\u5b83\u5305\u542b\uff1a<\/p>\n

      \n
    • \u2328\ufe0f \u952e\u76d8\u4e8b\u4ef6<\/strong>\uff1akeydown\u3001keyup\u3001keypress \u7684\u6df1\u5165\u5e94\u7528<\/li>\n
    • \u23f1\ufe0f \u5b9e\u65f6\u7edf\u8ba1<\/strong>\uff1aWPM\uff08\u6bcf\u5206\u949f\u5b57\u6570\uff09\u3001\u51c6\u786e\u7387<\/li>\n
    • \ud83c\udfaf \u76ee\u6807\u6587\u672c<\/strong>\uff1a\u968f\u673a\u6216\u9884\u8bbe\u7684\u7ec3\u4e60\u6587\u672c<\/li>\n
    • \ud83d\udcca \u8fdb\u5ea6\u8ffd\u8e2a<\/strong>\uff1a\u5b9e\u65f6\u663e\u793a\u8f93\u5165\u8fdb\u5ea6<\/li>\n
    • \ud83c\udfc6 \u6210\u7ee9\u8bb0\u5f55<\/strong>\uff1a\u4fdd\u5b58\u6700\u4f73\u6210\u7ee9<\/li>\n<\/ul>\n

      \u6838\u5fc3\u529f\u80fd<\/h3>\n
        \n
      • [ ] \u663e\u793a\u76ee\u6807\u6587\u672c\u4f9b\u7528\u6237\u8f93\u5165<\/li>\n
      • [ ] \u5b9e\u65f6\u68c0\u6d4b\u952e\u76d8\u8f93\u5165<\/li>\n
      • [ ] \u9ad8\u4eae\u663e\u793a\u5f53\u524d\u5b57\u7b26\u4f4d\u7f6e<\/li>\n
      • [ ] \u8ba1\u7b97\u6253\u5b57\u901f\u5ea6\uff08WPM\uff09<\/li>\n
      • [ ] \u7edf\u8ba1\u9519\u8bef\u7387<\/li>\n
      • [ ] \u5012\u8ba1\u65f6\u6a21\u5f0f<\/li>\n
      • [ ] \u5386\u53f2\u6700\u4f73\u6210\u7ee9<\/li>\n<\/ul>\n

        \u6280\u672f\u91cd\u70b9<\/h3>\n
          \n
        • \u952e\u76d8\u4e8b\u4ef6<\/strong>: addEventListener\u3001key\u3001keyCode<\/li>\n
        • \u5b57\u7b26\u4e32\u64cd\u4f5c<\/strong>: substring\u3001charAt\u3001split<\/li>\n
        • \u5b9a\u65f6\u5668<\/strong>: setInterval\u3001performance.now()<\/li>\n
        • \u5b9e\u65f6\u53cd\u9988<\/strong>: DOM \u52a8\u6001\u66f4\u65b0<\/li>\n
        • CSS \u52a8\u753b<\/strong>: \u8fc7\u6e21\u6548\u679c\u3001\u9519\u8bef\u63d0\u793a<\/li>\n<\/ul>\n
          \n

          \ud83d\udcdd \u9879\u76ee\u7ed3\u6784<\/h2>\n
          typing-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>\u6253\u5b57\u7ec3\u4e60\u6e38\u620f<\/title>\n    <link rel="stylesheet" href="style.css">\n<\/head>\n<body>\n    <div class="container">\n        <header>\n            <h1>\u2328\ufe0f \u6253\u5b57\u7ec3\u4e60\u6e38\u620f<\/h1>\n            <p class="subtitle">\u63d0\u9ad8\u4f60\u7684\u6253\u5b57\u901f\u5ea6\u548c\u51c6\u786e\u7387<\/p>\n        <\/header>\n\n        <!-- \u6e38\u620f\u6a21\u5f0f\u9009\u62e9 -->\n        <div class="mode-selection" id="modeSelection">\n            <button class="mode-btn" data-mode="time">\u23f1\ufe0f \u8ba1\u65f6\u6a21\u5f0f<\/button>\n            <button class="mode-btn" data-mode="practice">\ud83d\udcdd \u7ec3\u4e60\u6a21\u5f0f<\/button>\n        <\/div>\n\n        <!-- \u7edf\u8ba1\u4fe1\u606f -->\n        <div class="stats">\n            <div class="stat-item">\n                <span class="stat-label">\u65f6\u95f4<\/span>\n                <span class="stat-value" id="timer">60<\/span>\n                <span class="stat-unit">\u79d2<\/span>\n            <\/div>\n            <div class="stat-item">\n                <span class="stat-label">WPM<\/span>\n                <span class="stat-value" id="wpm">0<\/span>\n                <span class="stat-unit">\u5b57\/\u5206<\/span>\n            <\/div>\n            <div class="stat-item">\n                <span class="stat-label">\u51c6\u786e\u7387<\/span>\n                <span class="stat-value" id="accuracy">100<\/span>\n                <span class="stat-unit">%<\/span>\n            <\/div>\n            <div class="stat-item">\n                <span class="stat-label">\u9519\u8bef<\/span>\n                <span class="stat-value" id="errors">0<\/span>\n            <\/div>\n        <\/div>\n\n        <!-- \u6e38\u620f\u533a\u57df -->\n        <div class="game-area">\n            <!-- \u76ee\u6807\u6587\u672c\u663e\u793a -->\n            <div class="text-display" id="textDisplay">\n                <span class="target-text" id="targetText"><\/span>\n                <span class="cursor" id="cursor"><\/span>\n            <\/div>\n\n            <!-- \u8f93\u5165\u63d0\u793a -->\n            <div class="input-hint">\n                <p id="currentChar">\u6309\u4e0b\u4efb\u610f\u952e\u5f00\u59cb...<\/p>\n            <\/div>\n\n            <!-- \u8fdb\u5ea6\u6761 -->\n            <div class="progress-bar">\n                <div class="progress-fill" id="progress"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- \u63a7\u5236\u6309\u94ae -->\n        <div class="controls">\n            <button id="restartBtn" class="btn btn-primary">\ud83d\udd04 \u91cd\u65b0\u5f00\u59cb<\/button>\n            <button id="newTextBtn" class="btn btn-secondary">\ud83d\udcc4 \u6362\u4e00\u6bb5\u6587\u672c<\/button>\n        <\/div>\n\n        <!-- \u5386\u53f2\u6700\u4f73 -->\n        <div class="best-score">\n            <span>\u6700\u4f73 WPM: <\/span>\n            <span id="bestWPM">0<\/span>\n        <\/div>\n\n        <!-- \u7ed3\u679c\u5f39\u7a97 -->\n        <div class="modal" id="resultModal" style="display: none;">\n            <div class="modal-content">\n                <h2>\ud83c\udf89 \u7ec3\u4e60\u5b8c\u6210\uff01<\/h2>\n                <div class="result-stats">\n                    <div class="result-item">\n                        <span class="result-label">WPM<\/span>\n                        <span class="result-value" id="finalWPM">0<\/span>\n                    <\/div>\n                    <div class="result-item">\n                        <span class="result-label">\u51c6\u786e\u7387<\/span>\n                        <span class="result-value" id="finalAccuracy">0%<\/span>\n                    <\/div>\n                    <div class="result-item">\n                        <span class="result-label">\u9519\u8bef\u6570<\/span>\n                        <span class="result-value" id="finalErrors">0<\/span>\n                    <\/div>\n                <\/div>\n                <button id="closeModal" class="btn btn-primary">\u7ee7\u7eed\u7ec3\u4e60<\/button>\n            <\/div>\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: 'Courier New', monospace;\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: 900px;\n    width: 100%;\n    padding: 30px;\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\/* \u6a21\u5f0f\u9009\u62e9 *\/\n.mode-selection {\n    display: flex;\n    justify-content: center;\n    gap: 15px;\n    margin-bottom: 30px;\n}\n\n.mode-btn {\n    padding: 12px 24px;\n    border: 2px solid #e0e0e0;\n    background: white;\n    border-radius: 10px;\n    cursor: pointer;\n    font-size: 14px;\n    transition: all 0.3s;\n}\n\n.mode-btn:hover {\n    border-color: #667eea;\n    background: #f7f7f7;\n}\n\n.mode-btn.active {\n    background: #667eea;\n    color: white;\n    border-color: #667eea;\n}\n\n\/* \u7edf\u8ba1\u4fe1\u606f *\/\n.stats {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n    gap: 20px;\n    margin-bottom: 30px;\n}\n\n.stat-item {\n    background: #f7f7f7;\n    border-radius: 12px;\n    padding: 20px;\n    text-align: center;\n}\n\n.stat-label {\n    display: block;\n    color: #666;\n    font-size: 12px;\n    margin-bottom: 10px;\n}\n\n.stat-value {\n    display: block;\n    color: #667eea;\n    font-size: 32px;\n    font-weight: bold;\n}\n\n.stat-unit {\n    color: #999;\n    font-size: 12px;\n}\n\n\/* \u6e38\u620f\u533a\u57df *\/\n.game-area {\n    margin-bottom: 30px;\n}\n\n\/* \u6587\u672c\u663e\u793a *\/\n.text-display {\n    background: #f7f7f7;\n    border-radius: 12px;\n    padding: 30px;\n    margin-bottom: 20px;\n    font-size: 24px;\n    line-height: 1.8;\n    min-height: 200px;\n    position: relative;\n}\n\n.target-text {\n    color: #999;\n}\n\n.char {\n    display: inline;\n    padding: 2px 1px;\n    border-radius: 3px;\n    transition: all 0.1s;\n}\n\n.char.correct {\n    color: #48bb78;\n    background: #c6f6d5;\n}\n\n.char.incorrect {\n    color: #f56565;\n    background: #fed7d7;\n    text-decoration: underline;\n}\n\n.char.current {\n    background: #667eea;\n    color: white;\n    animation: blink 1s infinite;\n}\n\n@keyframes blink {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.5; }\n}\n\n\/* \u5149\u6807 *\/\n.cursor {\n    display: inline-block;\n    width: 3px;\n    height: 24px;\n    background: #667eea;\n    animation: blink 1s infinite;\n    margin-left: -1px;\n}\n\n\/* \u8f93\u5165\u63d0\u793a *\/\n.input-hint {\n    text-align: center;\n    margin-bottom: 20px;\n}\n\n#currentChar {\n    color: #666;\n    font-size: 14px;\n}\n\n\/* \u8fdb\u5ea6\u6761 *\/\n.progress-bar {\n    width: 100%;\n    height: 8px;\n    background: #e0e0e0;\n    border-radius: 4px;\n    overflow: hidden;\n}\n\n.progress-fill {\n    height: 100%;\n    background: #667eea;\n    transition: width 0.3s;\n    width: 0%;\n}\n\n\/* \u63a7\u5236\u6309\u94ae *\/\n.controls {\n    display: flex;\n    gap: 15px;\n    justify-content: center;\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}\n\n.btn-secondary:hover {\n    background: #e0e0e0;\n}\n\n\/* \u6700\u4f73\u6210\u7ee9 *\/\n.best-score {\n    text-align: center;\n    margin-top: 20px;\n    color: #666;\n    font-size: 14px;\n}\n\n.best-score span:last-child {\n    color: #667eea;\n    font-weight: bold;\n    font-size: 18px;\n}\n\n\/* \u7ed3\u679c\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}\n\n.modal-content {\n    background: white;\n    border-radius: 20px;\n    padding: 40px;\n    text-align: center;\n    animation: slideIn 0.3s ease;\n}\n\n@keyframes slideIn {\n    from {\n        opacity: 0;\n        transform: translateY(-50px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.modal-content h2 {\n    color: #333;\n    margin-bottom: 30px;\n}\n\n.result-stats {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 20px;\n    margin-bottom: 30px;\n}\n\n.result-item {\n    background: #f7f7f7;\n    border-radius: 12px;\n    padding: 20px;\n}\n\n.result-label {\n    display: block;\n    color: #666;\n    font-size: 12px;\n    margin-bottom: 10px;\n}\n\n.result-value {\n    display: block;\n    color: #667eea;\n    font-size: 32px;\n    font-weight: bold;\n}\n\n\/* \u54cd\u5e94\u5f0f *\/\n@media (max-width: 768px) {\n    .container {\n        padding: 20px;\n    }\n    \n    .stats {\n        grid-template-columns: repeat(2, 1fr);\n    }\n    \n    .text-display {\n        font-size: 18px;\n        padding: 20px;\n    }\n    \n    .result-stats {\n        grid-template-columns: 1fr;\n    }\n}\n<\/code><\/pre>\n
          3. JavaScript (script.js)<\/h3>\n
          \/\/ ========== \u7ec3\u4e60\u6587\u672c\u5e93 ==========\nconst TEXTS = [\n    "The quick brown fox jumps over the lazy dog. This sentence contains every letter of the alphabet.",\n    "Programming is the art of telling another human what one wants the computer to do.",\n    "In software engineering, we often face complex problems that require creative solutions.",\n    "JavaScript is a versatile programming language that powers the modern web.",\n    "Practice makes perfect. Keep typing and you will see improvement over time.",\n    "The best way to learn programming is by building real projects and solving problems.",\n    "Technology changes rapidly, but the fundamentals remain the same.",\n    "Debugging is twice as hard as writing the code in the first place.",\n    "Any fool can write code that a computer can understand. Good programmers write code that humans can understand.",\n    "First, solve the problem. Then, write the code."\n];\n\n\/\/ ========== \u6e38\u620f\u72b6\u6001\u7ba1\u7406 ==========\nclass TypingGame {\n    constructor() {\n        \/\/ \u6e38\u620f\u72b6\u6001\n        this.gameStarted = false;\n        this.gameEnded = false;\n        this.gameMode = 'time';  \/\/ 'time' or 'practice'\n        \n        \/\/ \u6587\u672c\u72b6\u6001\n        this.targetText = '';\n        this.currentIndex = 0;\n        this.errors = 0;\n        \n        \/\/ \u65f6\u95f4\u548c\u7edf\u8ba1\n        this.timeLeft = 60;\n        this.timer = null;\n        this.startTime = null;\n        \n        \/\/ \u6210\u7ee9\n        this.bestWPM = this.loadBestWPM();\n        \n        \/\/ \u521d\u59cb\u5316\n        this.initializeElements();\n        this.attachEventListeners();\n        this.loadNewText();\n        this.updateBestScore();\n    }\n\n    \/\/ \u521d\u59cb\u5316 DOM \u5143\u7d20\n    initializeElements() {\n        this.elements = {\n            targetText: document.getElementById('targetText'),\n            timer: document.getElementById('timer'),\n            wpm: document.getElementById('wpm'),\n            accuracy: document.getElementById('accuracy'),\n            errors: document.getElementById('errors'),\n            progress: document.getElementById('progress'),\n            currentChar: document.getElementById('currentChar'),\n            bestWPM: document.getElementById('bestWPM'),\n            resultModal: document.getElementById('resultModal'),\n            finalWPM: document.getElementById('finalWPM'),\n            finalAccuracy: document.getElementById('finalAccuracy'),\n            finalErrors: document.getElementById('finalErrors')\n        };\n    }\n\n    \/\/ \u9644\u52a0\u4e8b\u4ef6\u76d1\u542c\u5668\n    attachEventListeners() {\n        \/\/ \u952e\u76d8\u8f93\u5165\n        document.addEventListener('keydown', (e) => this.handleKeyDown(e));\n        \n        \/\/ \u6a21\u5f0f\u9009\u62e9\n        document.querySelectorAll('.mode-btn').forEach(btn => {\n            btn.addEventListener('click', () => {\n                this.switchMode(btn.dataset.mode);\n            });\n        });\n        \n        \/\/ \u63a7\u5236\u6309\u94ae\n        document.getElementById('restartBtn').addEventListener('click', () => {\n            this.restart();\n        });\n        \n        document.getElementById('newTextBtn').addEventListener('click', () => {\n            this.loadNewText();\n        });\n        \n        document.getElementById('closeModal').addEventListener('click', () => {\n            this.closeModal();\n        });\n    }\n\n    \/\/ \u5207\u6362\u6e38\u620f\u6a21\u5f0f\n    switchMode(mode) {\n        this.gameMode = mode;\n        \n        \/\/ \u66f4\u65b0\u6309\u94ae\u72b6\u6001\n        document.querySelectorAll('.mode-btn').forEach(btn => {\n            btn.classList.remove('active');\n            if (btn.dataset.mode === mode) {\n                btn.classList.add('active');\n            }\n        });\n        \n        \/\/ \u91cd\u65b0\u5f00\u59cb\n        this.restart();\n    }\n\n    \/\/ \u52a0\u8f7d\u65b0\u6587\u672c\n    loadNewText() {\n        const randomIndex = Math.floor(Math.random() * TEXTS.length);\n        this.targetText = TEXTS[randomIndex];\n        this.renderText();\n        this.resetGame();\n    }\n\n    \/\/ \u6e32\u67d3\u6587\u672c\n    renderText() {\n        let html = '';\n        for (let i = 0; i < this.targetText.length; i++) {\n            html += `<span class="char" data-index="${i}">${this.targetText[i]}<\/span>`;\n        }\n        this.elements.targetText.innerHTML = html;\n        this.updateCursor();\n    }\n\n    \/\/ \u91cd\u7f6e\u6e38\u620f\n    resetGame() {\n        this.gameStarted = false;\n        this.gameEnded = false;\n        this.currentIndex = 0;\n        this.errors = 0;\n        this.timeLeft = 60;\n        \n        \/\/ \u505c\u6b62\u8ba1\u65f6\u5668\n        if (this.timer) {\n            clearInterval(this.timer);\n            this.timer = null;\n        }\n        \n        \/\/ \u91cd\u7f6e\u663e\u793a\n        this.elements.timer.textContent = this.timeLeft;\n        this.elements.wpm.textContent = '0';\n        this.elements.accuracy.textContent = '100';\n        this.elements.errors.textContent = '0';\n        this.elements.progress.style.width = '0%';\n        this.elements.currentChar.textContent = '\u6309\u4e0b\u4efb\u610f\u952e\u5f00\u59cb...';\n        \n        \/\/ \u91cd\u7f6e\u5b57\u7b26\u6837\u5f0f\n        document.querySelectorAll('.char').forEach(char => {\n            char.classList.remove('correct', 'incorrect', 'current');\n        });\n        \n        \/\/ \u6807\u8bb0\u7b2c\u4e00\u4e2a\u5b57\u7b26\n        if (document.querySelector('.char[data-index="0"]')) {\n            document.querySelector('.char[data-index="0"]').classList.add('current');\n        }\n    }\n\n    \/\/ \u5904\u7406\u952e\u76d8\u8f93\u5165\n    handleKeyDown(e) {\n        if (this.gameEnded) {\n            return;\n        }\n        \n        \/\/ \u5ffd\u7565\u529f\u80fd\u952e\n        if (e.key.length > 1) {\n            return;\n        }\n        \n        \/\/ \u5f00\u59cb\u6e38\u620f\n        if (!this.gameStarted) {\n            this.startGame();\n        }\n        \n        const currentChar = this.targetText[this.currentIndex];\n        const charElement = document.querySelector(`.char[data-index="${this.currentIndex}"]`);\n        \n        \/\/ \u68c0\u67e5\u5b57\u7b26\u662f\u5426\u6b63\u786e\n        if (e.key === currentChar) {\n            \/\/ \u6b63\u786e\n            charElement.classList.add('correct');\n            charElement.classList.remove('current', 'incorrect');\n        } else {\n            \/\/ \u9519\u8bef\n            charElement.classList.add('incorrect');\n            this.errors++;\n            this.elements.errors.textContent = this.errors;\n            \n            \/\/ \u9707\u52a8\u6548\u679c\n            this.shakeElement(charElement);\n        }\n        \n        \/\/ \u79fb\u52a8\u5230\u4e0b\u4e00\u4e2a\u5b57\u7b26\n        this.currentIndex++;\n        this.updateCursor();\n        this.updateStats();\n        \n        \/\/ \u68c0\u67e5\u662f\u5426\u5b8c\u6210\n        if (this.currentIndex >= this.targetText.length) {\n            this.endGame();\n        }\n    }\n\n    \/\/ \u5f00\u59cb\u6e38\u620f\n    startGame() {\n        this.gameStarted = true;\n        this.startTime = Date.now();\n        \n        \/\/ \u542f\u52a8\u8ba1\u65f6\u5668\n        this.timer = setInterval(() => {\n            this.timeLeft--;\n            this.elements.timer.textContent = this.timeLeft;\n            \n            if (this.timeLeft <= 0) {\n                this.endGame();\n            }\n        }, 1000);\n        \n        this.elements.currentChar.textContent = '\u5f00\u59cb\u6253\u5b57\uff01';\n    }\n\n    \/\/ \u66f4\u65b0\u5149\u6807\u4f4d\u7f6e\n    updateCursor() {\n        \/\/ \u79fb\u9664\u6240\u6709 current \u7c7b\n        document.querySelectorAll('.char').forEach(char => {\n            char.classList.remove('current');\n        });\n        \n        \/\/ \u6dfb\u52a0 current \u7c7b\u5230\u5f53\u524d\u5b57\u7b26\n        if (this.currentIndex < this.targetText.length) {\n            const currentChar = document.querySelector(`.char[data-index="${this.currentIndex}"]`);\n            if (currentChar) {\n                currentChar.classList.add('current');\n            }\n            \n            \/\/ \u663e\u793a\u5f53\u524d\u5b57\u7b26\u63d0\u793a\n            const char = this.targetText[this.currentIndex];\n            if (char === ' ') {\n                this.elements.currentChar.textContent = '\u5f53\u524d\u5b57\u7b26: \u7a7a\u683c';\n            } else {\n                this.elements.currentChar.textContent = `\u5f53\u524d\u5b57\u7b26: ${char}`;\n            }\n        }\n    }\n\n    \/\/ \u66f4\u65b0\u7edf\u8ba1\u4fe1\u606f\n    updateStats() {\n        \/\/ \u8ba1\u7b97\u8fdb\u5ea6\n        const progress = (this.currentIndex \/ this.targetText.length) * 100;\n        this.elements.progress.style.width = `${progress}%`;\n        \n        \/\/ \u8ba1\u7b97 WPM\n        const timeElapsed = (Date.now() - this.startTime) \/ 1000 \/ 60;  \/\/ \u5206\u949f\n        const wordsTyped = this.currentIndex \/ 5;  \/\/ \u6807\u51c6\u8ba1\u7b97\uff1a5\u4e2a\u5b57\u7b26=1\u4e2a\u5355\u8bcd\n        const wpm = Math.round(wordsTyped \/ timeElapsed) || 0;\n        this.elements.wpm.textContent = wpm;\n        \n        \/\/ \u8ba1\u7b97\u51c6\u786e\u7387\n        const totalChars = this.currentIndex + this.errors;\n        const accuracy = totalChars > 0 \n            ? Math.round((this.currentIndex \/ totalChars) * 100) \n            : 100;\n        this.elements.accuracy.textContent = accuracy;\n    }\n\n    \/\/ \u9707\u52a8\u5143\u7d20\n    shakeElement(element) {\n        element.style.animation = 'none';\n        element.offsetHeight;  \/\/ \u89e6\u53d1\u91cd\u7ed8\n        element.style.animation = 'shake 0.3s ease';\n    }\n\n    \/\/ \u7ed3\u675f\u6e38\u620f\n    endGame() {\n        this.gameEnded = true;\n        \n        \/\/ \u505c\u6b62\u8ba1\u65f6\u5668\n        if (this.timer) {\n            clearInterval(this.timer);\n            this.timer = null;\n        }\n        \n        \/\/ \u8ba1\u7b97\u6700\u7ec8\u6210\u7ee9\n        const timeElapsed = (Date.now() - this.startTime) \/ 1000 \/ 60;\n        const wordsTyped = this.currentIndex \/ 5;\n        const finalWPM = Math.round(wordsTyped \/ timeElapsed) || 0;\n        const totalChars = this.currentIndex + this.errors;\n        const finalAccuracy = totalChars > 0 \n            ? Math.round((this.currentIndex \/ totalChars) * 100) \n            : 100;\n        \n        \/\/ \u66f4\u65b0\u6700\u4f73\u6210\u7ee9\n        if (finalWPM > this.bestWPM) {\n            this.bestWPM = finalWPM;\n            this.saveBestWPM();\n            this.updateBestScore();\n        }\n        \n        \/\/ \u663e\u793a\u7ed3\u679c\n        this.elements.finalWPM.textContent = finalWPM;\n        this.elements.finalAccuracy.textContent = `${finalAccuracy}%`;\n        this.elements.finalErrors.textContent = this.errors;\n        this.elements.resultModal.style.display = 'flex';\n    }\n\n    \/\/ \u91cd\u65b0\u5f00\u59cb\n    restart() {\n        this.closeModal();\n        this.loadNewText();\n    }\n\n    \/\/ \u5173\u95ed\u5f39\u7a97\n    closeModal() {\n        this.elements.resultModal.style.display = 'none';\n    }\n\n    \/\/ \u52a0\u8f7d\u6700\u4f73\u6210\u7ee9\n    loadBestWPM() {\n        const saved = localStorage.getItem('typingGameBestWPM');\n        return saved ? parseInt(saved) : 0;\n    }\n\n    \/\/ \u4fdd\u5b58\u6700\u4f73\u6210\u7ee9\n    saveBestWPM() {\n        localStorage.setItem('typingGameBestWPM', this.bestWPM);\n    }\n\n    \/\/ \u66f4\u65b0\u6700\u4f73\u6210\u7ee9\u663e\u793a\n    updateBestScore() {\n        this.elements.bestWPM.textContent = this.bestWPM;\n    }\n}\n\n\/\/ \u6dfb\u52a0\u9707\u52a8\u52a8\u753b\nconst style = document.createElement('style');\nstyle.textContent = `\n    @keyframes shake {\n        0%, 100% { transform: translateX(0); }\n        25% { transform: translateX(-5px); }\n        75% { transform: translateX(5px); }\n    }\n`;\ndocument.head.appendChild(style);\n\n\/\/ \u521d\u59cb\u5316\u6e38\u620f\ndocument.addEventListener('DOMContentLoaded', () => {\n    const game = new TypingGame();\n    console.log('\u2328\ufe0f \u6253\u5b57\u6e38\u620f\u5df2\u542f\u52a8\uff01');\n    console.log('\ud83d\udca1 \u63d0\u793a\uff1a\u9009\u62e9\u8ba1\u65f6\u6a21\u5f0f\u6216\u7ec3\u4e60\u6a21\u5f0f\u5f00\u59cb');\n});\n<\/code><\/pre>\n
          \n
          \ud83c\udfaf \u9879\u76ee\u4eae\u70b9<\/h2>\n
          1. \u952e\u76d8\u4e8b\u4ef6\u5904\u7406<\/h3>\n
          document.addEventListener('keydown', (e) => {\n    \/\/ e.key: \u6309\u952e\u5b57\u7b26\n    \/\/ e.keyCode: \u6309\u952e\u4ee3\u7801\n    \/\/ e.code: \u7269\u7406\u952e\u4f4d\n});\n<\/code><\/pre>\n
          2. \u5b9e\u65f6\u7edf\u8ba1\u8ba1\u7b97<\/h3>\n
          \/\/ WPM \u8ba1\u7b97\nconst wpm = Math.round((charsTyped \/ 5) \/ timeInMinutes);\n\n\/\/ \u51c6\u786e\u7387\u8ba1\u7b97\nconst accuracy = Math.round((correctChars \/ totalChars) * 100);\n<\/code><\/pre>\n
          3. \u89c6\u89c9\u53cd\u9988\u7cfb\u7edf<\/h3>\n
          \/\/ \u6b63\u786e: \u7eff\u8272\ncharElement.classList.add('correct');\n\n\/\/ \u9519\u8bef: \u7ea2\u8272 + \u4e0b\u5212\u7ebf\ncharElement.classList.add('incorrect');\n\n\/\/ \u5f53\u524d: \u84dd\u8272 + \u95ea\u70c1\ncharElement.classList.add('current');\n<\/code><\/pre>\n
          \n
          \u270d\ufe0f \u7ec3\u4e60\u4efb\u52a1<\/h2>\n
          \u7ec3\u4e601: \u57fa\u7840\u529f\u80fd\uff0845\u5206\u949f\uff09<\/h3>\n