数字解密小游戏网页版（附代码）

灵感来源于：柒星的小屋
在线体验网址：https://imxcy.cn/Decryption.html
大佬能够更加完善请分享一份谢谢！

代码：

{cat_hide}

    <div class="container">
    <h1>数字解密游戏 v1.0</h1>
    <button class="toggle-rules" onclick="toggleRules()">查看游戏规则</button>
    <div class="rules" id="rules">
        <h2>游戏规则</h2>
        <p>1. 密码为4位不重复的1-9数字</p>
        <p>2. 每次猜测后会有颜色提示：</p>
        <p><span class="green">绿色</span>：数字正确且位置正确</p>
        <p><span class="white">白色</span>：数字正确但位置错误</p>
        <p><span class="red">红色</span>：数字不存在</p>
        <p>3. 输入必须是4位数字</p>
    </div>
    <div class="input-group">
        <label for="attempts">请输入猜测次数：</label>
        <input type="number" id="attempts" min="1" required>
    </div>
    <div class="input-group">
        <label for="hardMode">选择模式：</label>
        <select id="hardMode">
            <option value="easy">普通模式</option>
            <option value="hard">困难模式</option>
        </select>
    </div>
    <div class="input-group">
        <button onclick="startGame()">开始游戏</button>
    </div>
    <div class="input-group" id="guessInputGroup" style="display:none;">
        <label for="guess">请输入猜测（示例 1234）：</label>
        <input type="text" id="guess" maxlength="4" required>
        <button onclick="makeGuess()">提交猜测</button>
    </div>
    <div class="feedback" id="feedback"></div>
    <div class="footer">© 2025 许大阳</div>
</div>

<style>
    /* 使页面内容居中并美化 */
    body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: #f2f2f2; /* 轻微背景颜色 */
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 字体设置 */
    }

    .container {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        padding: 40px;
        width: 100%;
        max-width: 400px; /* 限制最大宽度 */
        text-align: center;
        margin: 20px;
        box-sizing: border-box;
    }

    h1 {
        margin-bottom: 25px;
        font-size: 24px;
        color: #4A90E2;
    }

    .rules {
        background: #f9f9f9;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        display: none;
    }

    .input-group {
        margin-bottom: 20px;
    }

    input[type="text"], input[type="number"] {
        width: 100%;
        padding: 12px;
        border: 2px solid #4A90E2;
        border-radius: 5px;
        box-shadow: inset 2px 2px 5px #ddd;
        transition: border 0.3s;
        margin: 0 auto;
    }

    input[type="text"]:focus, input[type="number"]:focus {
        border-color: #007BFF;
        outline: none;
    }

    button {
        width: 100%;
        padding: 12px;
        border: none;
        border-radius: 5px;
        background: #4A90E2;
        color: white;
        font-size: 16px;
        cursor: pointer;
        transition: background 0.3s;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        margin-top: 10px;
    }

    button:hover {
        background: #357ABD;
    }

    .feedback {
        margin-top: 20px;
        font-weight: bold;
        text-align: center;
    }

    .green { color: green; }
    .white { color: white; }
    .red { color: red; }

    .footer {
        margin-top: 20px;
        font-size: 12px;
        color: #777;
    }

    .toggle-rules {
        background: transparent;
        border: none;
        color: #4A90E2;
        cursor: pointer;
        font-size: 14px;
        text-decoration: underline;
        margin-bottom: 20px;
    }
</style>

<script>
    let secret;
    let maxAttempts;
    let attemptsLeft;
    let hardMode;

    function toggleRules() {
        const rules = document.getElementById("rules");
        rules.style.display = rules.style.display === "none" ? "block" : "none";
    }

    function startGame() {
        maxAttempts = parseInt(document.getElementById("attempts").value);
        hardMode = document.getElementById("hardMode").value === 'hard';
        secret = generateSecret();
        attemptsLeft = maxAttempts;
        document.getElementById("guessInputGroup").style.display = "block";
        document.getElementById("feedback").innerText = "";
    }

    function generateSecret() {
        const numbers = [];
        while (numbers.length < 4) {
            const num = Math.floor(Math.random() * 9) + 1;
            if (!numbers.includes(num)) {
                numbers.push(num);
            }
        }
        return numbers;
    }

    function makeGuess() {
        const guessStr = document.getElementById("guess").value;
        if (!validateGuess(guessStr)) {
            alert("输入不符合要求！");
            return;
        }
        const guess = Array.from(guessStr).map(Number);
        attemptsLeft--;

        if (JSON.stringify(guess) === JSON.stringify(secret)) {
            document.getElementById("feedback").innerHTML = "<span class='green'>★ 破解成功！★</span>";
            return;
        }

        const feedback = compareNumbers(secret, guess);
        displayFeedback(feedback);
        if (attemptsLeft <= 0) {
            document.getElementById("feedback").innerHTML = `<span class='red'>游戏结束！正确答案：${secret.join('')}</span>`;
        }
    }

    function validateGuess(guessStr) {
        return guessStr.length === 4 && /^[1-9]{4}$/.test(guessStr);
    }

    function compareNumbers(secret, guess) {
        const result = [];
        const matched = Array(4).fill(false);

        // 第一轮匹配绿色
        for (let i = 0; i < 4; i++) {
            if (guess[i] === secret[i]) {
                result.push('绿');
                matched[i] = true;
                guess[i] = null; // 标记已处理
            }
        }

        // 第二轮匹配白色
        for (let i = 0; i < 4; i++) {
            if (guess[i] === null) continue;
            for (let j = 0; j < 4; j++) {
                if (!matched[j] && guess[i] === secret[j]) {
                    result.push('白');
                    matched[j] = true;
                    break;
                }
            }
            if (result.length < i + 1) {
                result.push('红');
            }
        }

        return result;
    }

    function displayFeedback(feedback) {
        if (hardMode) {
            const greenCount = feedback.filter(color => color === '绿').length;
            const whiteCount = feedback.filter(color => color === '白').length;
            document.getElementById("feedback").innerText = `提示：绿色${greenCount} 白色${whiteCount}`;
        } else {
            const coloredFeedback = feedback.map(color => {
                if (color === '绿') return "<span class='green'>●</span>";
                if (color === '白') return "<span class='white'>●</span>";
                return "<span class='red'>●</span>";
            }).join(' ');
            document.getElementById("feedback").innerHTML = "提示：" + coloredFeedback;
        }
    }
</script>

{/cat_hide}