txcgb
/
free
mirror of https://gitlab.com/txcgb/free.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文曲星经典猜数字</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
            background-color: #f0f0f0;
        }
        #game-area {
            margin: 20px auto;
            padding: 20px;
            border: 2px solid #ccc;
            width: 300px;
            border-radius: 10px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        input[type="text"] {
            padding: 10px;
            font-size: 16px;
            width: 100px;
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            margin-top: 10px;
        }
        button:hover {
            background-color: #45a049;
        }
        #message {
            font-size: 18px;
            margin-top: 20px;
            color: #333;
        }
        #history {
            margin-top: 20px;
            text-align: left;
        }
    </style>
</head>
<body>

<div id="game-area">
    <h1>文曲星经典猜数字</h1>
    <p>我已经想好了一个4位数（每位数字不同），猜猜看是多少？</p>
    <p>A.数字位置都正确</p>
    <p>B.数字正确，位置错误</p>
    <input type="number" id="guess-input" maxlength="4" placeholder="输入4位数">
    <button id="guess-button">猜一下</button>
    <div id="message"></div>
    <div id="history"></div>
</div>

<script>
    // 生成一个4位数（每位数字不同）
    function generateTargetNumber() {
        let digits = [];
        while (digits.length < 4) {
            const digit = Math.floor(Math.random() * 10);
            if (!digits.includes(digit)) {
                digits.push(digit);
            }
        }
        return digits.join('');
    }

    const targetNumber = generateTargetNumber();
    let attempts = 0;
    const history = [];

    // 获取元素
    const guessInput = document.getElementById('guess-input');
    const guessButton = document.getElementById('guess-button');
    const message = document.getElementById('message');
    const historyDiv = document.getElementById('history');

    // 猜数字逻辑
    guessButton.addEventListener('click', () => {
        const userGuess = guessInput.value;

        // 检查输入是否合法
        if (!/^\d{4}$/.test(userGuess) || new Set(userGuess).size !== 4) {
            message.textContent = "请输入一个4位数，且每位数字不同！";
            return;
        }

        attempts++;
        let correctPosition = 0;
        let correctDigit = 0;

        // 检查数字和位置
        for (let i = 0; i < 4; i++) {
            if (userGuess[i] === targetNumber[i]) {
                correctPosition++;
            } else if (targetNumber.includes(userGuess[i])) {
                correctDigit++;
            }
        }

        // 记录历史
        history.push({
            guess: userGuess,
            correctPosition,
            correctDigit
        });

        // 显示结果
        if (correctPosition === 4) {
            message.textContent = `恭喜你！你猜对了！数字是 ${targetNumber}，你用了 ${attempts} 次尝试。`;
            guessInput.disabled = true;
            guessButton.disabled = true;
        } else {
            message.textContent = `A：${correctPosition}，B：${correctDigit}`;
        }

        // 更新历史记录
        historyDiv.innerHTML = "<strong>历史记录：</strong><br>" + history.map(entry => 
            `猜测：${entry.guess} → A：${entry.correctPosition}，B：${entry.correctDigit}`
        ).join('<br>');

        guessInput.value = ''; // 清空输入框
        guessInput.focus();    // 聚焦输入框
    });
</script>

</body>
</html>