Spaces:

Lashtw
/

MontyHall

Running

File size: 11,696 Bytes

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三門問題遊戲</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans TC', Arial, sans-serif;
            text-align: center;
            padding: 20px;
            background-color: #f0f0f0;
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: row;
            justify-content: center;
            gap: 40px;
            position: relative;
            box-sizing: border-box;
        }
        .game-container {
            flex: 1;
            max-width: 600px;
            width: 100%;
        }
        .stats-container {
            flex: 1;
            max-width: 300px;
            width: 100%;
            text-align: left;
        }
        .door-container {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin: 20px 0;
            flex-wrap: wrap;
        }
        .door {
            cursor: pointer;
            border: 2px solid #333;
            padding: 10px;
            background-color: #fff;
            flex: 0 0 auto;
        }
        .door img {
            width: 100px;
            height: 150px;
            max-width: 100%;
        }
        #message {
            font-size: 1.2em;
            margin: 20px 0;
            word-wrap: break-word;
        }
        button {
            padding: 10px 20px;
            font-size: 1em;
            margin: 5px;
            cursor: pointer;
            width: auto;
            min-width: 120px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #333;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #ddd;
        }
        .footer {
            position: absolute;
            bottom: 10px;
            right: 10px;
            font-size: 0.9em;
            color: #555;
        }

        @media (max-width: 768px) {
            body {
                flex-direction: column;
                gap: 20px;
            }
            .game-container, .stats-container {
                max-width: 100%;
            }
            .door img {
                width: 80px;
                height: 120px;
            }
            button {
                font-size: 0.9em;
                padding: 8px 16px;
                min-width: 100px;
            }
            #message {
                font-size: 1em;
            }
            .footer {
                position: static;
                text-align: center;
                margin-top: 20px;
            }
        }

        @media (max-width: 480px) {
            .door img {
                width: 60px;
                height: 90px;
            }
            button {
                font-size: 0.8em;
                padding: 6px 12px;
                min-width: 80px;
            }
            #message {
                font-size: 0.9em;
            }
            h1 {
                font-size: 1.5em;
            }
            h2 {
                font-size: 1.2em;
            }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h1>三門問題遊戲</h1>
        <div id="intro">
            <p>歡迎來到三門問題遊戲！遊戲規則如下：<br>
            有三道門，任選一道，其中兩道門後面是一顆糖果，另一道門後面是一棟豪宅。<br>
            你選門後，主持人會打開一道有糖果的門，然後問你要不要換門。<br>
            準備好了嗎？請選擇一道門開始遊戲！</p>
        </div>
        <div id="doors" class="door-container">
            <div class="door" onclick="chooseDoor(0)"><img src="door.jpg" alt="門 1"></div>
            <div class="door" onclick="chooseDoor(1)"><img src="door.jpg" alt="門 2"></div>
            <div class="door" onclick="chooseDoor(2)"><img src="door.jpg" alt="門 3"></div>
        </div>
        <div id="message"></div>
        <div id="switch-choice" style="display: none;">
            <button onclick="switchDoor(true)">換門</button>
            <button onclick="switchDoor(false)">不換門</button>
        </div>
        <button onclick="promptForSimulation(false)">模擬 100 次：2號門不換 (需密碼)</button>
        <button onclick="promptForSimulation(true)">模擬 100 次：2號門換門 (需密碼)</button>
        <button onclick="promptForTenDoors()">進入十門版本 (需密碼)</button>
        <button onclick="promptForTeacherVersion()">進入教師教學版本 (需密碼)</button>
    </div>
    <div class="stats-container">
        <h2>中獎機率統計</h2>
        <table id="stats-table">
            <tr>
                <th>選擇</th>
                <th>次數</th>
                <th>中獎次數</th>
                <th>中獎機率</th>
            </tr>
            <tr>
                <td>換門</td>
                <td id="switch-count">0</td>
                <td id="switch-wins">0</td>
                <td id="switch-rate">0%</td>
            </tr>
            <tr>
                <td>不換門</td>
                <td id="no-switch-count">0</td>
                <td id="no-switch-wins">0</td>
                <td id="no-switch-rate">0%</td>
            </tr>
        </table>
    </div>
    <div class="footer">程式設計者：新竹縣立精華國中 藍星宇老師</div>

    <script>
        let playerChoice = null;
        let prizeDoor = Math.floor(Math.random() * 3);
        let revealedDoor = null;

        let switchCount = 0;
        let switchWins = 0;
        let noSwitchCount = 0;
        let noSwitchWins = 0;

        function chooseDoor(door) {
            playerChoice = door;
            document.getElementById("intro").style.display = "none";

            do {
                revealedDoor = Math.floor(Math.random() * 3);
            } while (revealedDoor === playerChoice || revealedDoor === prizeDoor);

            const doors = document.getElementsByClassName("door");
            doors[revealedDoor].innerHTML = '<img src="candy.jpg" alt="糖果">';
            doors[revealedDoor].style.pointerEvents = "none";

            document.getElementById("message").innerHTML = 
                `你選了門 ${playerChoice + 1}，主持人開啟了門 ${revealedDoor + 1}，後面是一顆糖果。<br>你要換門嗎？`;
            document.getElementById("switch-choice").style.display = "block";

            for (let i = 0; i < doors.length; i++) {
                doors[i].style.pointerEvents = "none";
            }
        }

        function switchDoor(doSwitch) {
            let finalChoice = playerChoice;
            if (doSwitch) {
                finalChoice = 3 - playerChoice - revealedDoor;
                switchCount++;
            } else {
                noSwitchCount++;
            }

            const doors = document.getElementsByClassName("door");
            for (let i = 0; i < 3; i++) {
                if (i === prizeDoor) {
                    doors[i].innerHTML = '<img src="house.jpg" alt="豪宅">';
                } else {
                    doors[i].innerHTML = '<img src="candy.jpg" alt="糖果">';
                }
            }

            const won = finalChoice === prizeDoor;
            let result = "";
            if (doSwitch) {
                result = won ? "換門，有中" : "換門，沒中";
                if (won) switchWins++;
            } else {
                result = won ? "不換門，有中" : "不換門，沒中";
                if (won) noSwitchWins++;
            }
            document.getElementById("message").innerHTML = 
                `你最終選擇了門 ${finalChoice + 1}，豪宅在門 ${prizeDoor + 1}。<br>結果：${result}<br><button onclick="resetGame()">再玩一次</button>`;
            
            document.getElementById("switch-choice").style.display = "none";

            updateStats();
        }

        function resetGame() {
            prizeDoor = Math.floor(Math.random() * 3);
            playerChoice = null;
            revealedDoor = null;

            document.getElementById("intro").style.display = "block";
            document.getElementById("message").innerHTML = "";
            document.getElementById("switch-choice").style.display = "none";

            const doors = document.getElementsByClassName("door");
            for (let i = 0; i < doors.length; i++) {
                doors[i].innerHTML = `<img src="door.jpg" alt="門 ${i + 1}">`;
                doors[i].style.pointerEvents = "auto";
            }
        }

        function updateStats() {
            document.getElementById("switch-count").innerHTML = switchCount;
            document.getElementById("switch-wins").innerHTML = switchWins;
            const switchRate = switchCount > 0 ? (switchWins / switchCount * 100).toFixed(1) : 0;
            document.getElementById("switch-rate").innerHTML = `${switchRate}%`;

            document.getElementById("no-switch-count").innerHTML = noSwitchCount;
            document.getElementById("no-switch-wins").innerHTML = noSwitchWins;
            const noSwitchRate = noSwitchCount > 0 ? (noSwitchWins / noSwitchCount * 100).toFixed(1) : 0;
            document.getElementById("no-switch-rate").innerHTML = `${noSwitchRate}%`;
        }

        function promptForSimulation(doSwitch) {
            const password = prompt("請輸入密碼以啟動模擬功能：");
            if (password === "Ghjh") {
                runSimulation(doSwitch);
            } else {
                alert("密碼錯誤！");
            }
        }

        function runSimulation(doSwitch) {
            for (let i = 0; i < 100; i++) {
                playerChoice = 1;
                prizeDoor = Math.floor(Math.random() * 3);

                do {
                    revealedDoor = Math.floor(Math.random() * 3);
                } while (revealedDoor === playerChoice || revealedDoor === prizeDoor);

                let finalChoice = playerChoice;
                if (doSwitch) {
                    finalChoice = 3 - playerChoice - revealedDoor;
                    switchCount++;
                    if (finalChoice === prizeDoor) switchWins++;
                } else {
                    noSwitchCount++;
                    if (finalChoice === prizeDoor) noSwitchWins++;
                }
            }

            updateStats();

            const action = doSwitch ? "換門" : "不換門";
            document.getElementById("message").innerHTML = 
                `模擬完成！已執行 100 次，選擇 2 號門且${action}。<br>請查看右側統計表格。<br><button onclick="resetGame()">再玩一次</button>`;
        }

        function promptForTenDoors() {
            const password = prompt("請輸入密碼以進入十門版本：");
            if (password === "TenDoors") {
                window.location.href = "ten_doors.html";
            } else {
                alert("密碼錯誤！");
            }
        }

        function promptForTeacherVersion() {
            const password = prompt("請輸入密碼以進入教師教學版本：");
            if (password === "Teacher") {
                window.location.href = "teacher_version.html";
            } else {
                alert("密碼錯誤！");
            }
        }
    </script>
</body>
</html>