Spaces:

Lashtw
/

MontyHall

Running

App Files Files Community

Lashtw commited on Mar 25, 2025

Commit

fefe9cc

verified ·

1 Parent(s): c4b2f36

Create ten_doors.html

Browse files

Files changed (1) hide show

ten_doors.html +347 -0

ten_doors.html ADDED Viewed

	@@ -0,0 +1,347 @@

+<!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: 800px;
+            width: 100%;
+        }
+        .stats-container {
+            flex: 1;
+            max-width: 300px;
+            width: 100%;
+            text-align: left;
+        }
+        .door-container {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            margin: 20px 0;
+            flex-wrap: wrap;
+        }
+        .door {
+            cursor: pointer;
+            border: 2px solid #333;
+            padding: 5px;
+            background-color: #fff;
+            flex: 0 0 auto;
+        }
+        .door img {
+            width: 60px;
+            height: 90px;
+            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: 50px;
+                height: 75px;
+            }
+            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: 40px;
+                height: 60px;
+            }
+            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 class="door" onclick="chooseDoor(3)"><img src="door.jpg" alt="門 4"></div>
+            <div class="door" onclick="chooseDoor(4)"><img src="door.jpg" alt="門 5"></div>
+            <div class="door" onclick="chooseDoor(5)"><img src="door.jpg" alt="門 6"></div>
+            <div class="door" onclick="chooseDoor(6)"><img src="door.jpg" alt="門 7"></div>
+            <div class="door" onclick="chooseDoor(7)"><img src="door.jpg" alt="門 8"></div>
+            <div class="door" onclick="chooseDoor(8)"><img src="door.jpg" alt="門 9"></div>
+            <div class="door" onclick="chooseDoor(9)"><img src="door.jpg" alt="門 10"></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="window.location.href='index.html'">返回三門版本</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>
+        const TOTAL_DOORS = 10;
+        let playerChoice = null;
+        let prizeDoor = Math.floor(Math.random() * TOTAL_DOORS);
+        let remainingDoor = null;
+        let switchCount = 0;
+        let switchWins = 0;
+        let noSwitchCount = 0;
+        let noSwitchWins = 0;
+        function chooseDoor(door) {
+            playerChoice = door;
+            document.getElementById("intro").style.display = "none";
+            // 主持人開啟所有非豪宅的門
+            const doors = document.getElementsByClassName("door");
+            if (playerChoice === prizeDoor) {
+                // 玩家選中豪宅，隨機選一扇門留下，其餘全開
+                do {
+                    remainingDoor = Math.floor(Math.random() * TOTAL_DOORS);
+                } while (remainingDoor === playerChoice);
+                for (let i = 0; i < TOTAL_DOORS; i++) {
+                    if (i !== playerChoice && i !== remainingDoor) {
+                        doors[i].innerHTML = '<img src="candy.jpg" alt="糖果">';
+                        doors[i].style.pointerEvents = "none";
+                    }
+                }
+            } else {
+                // 玩家選中糖果，留下豪宅門，其餘全開
+                remainingDoor = prizeDoor;
+                for (let i = 0; i < TOTAL_DOORS; i++) {
+                    if (i !== playerChoice && i !== prizeDoor) {
+                        doors[i].innerHTML = '<img src="candy.jpg" alt="糖果">';
+                        doors[i].style.pointerEvents = "none";
+                    }
+                }
+            }
+            // 提示玩家是否換門
+            document.getElementById("message").innerHTML =
+                `你選了門 ${playerChoice + 1}，主持人開啟了其他糖果門，剩下門 ${remainingDoor + 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 = remainingDoor;
+                switchCount++;
+            } else {
+                noSwitchCount++;
+            }
+            // 顯示所有門後面的結果
+            const doors = document.getElementsByClassName("door");
+            for (let i = 0; i < TOTAL_DOORS; 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() * TOTAL_DOORS);
+            playerChoice = null;
+            remainingDoor = 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() * TOTAL_DOORS);
+                if (playerChoice === prizeDoor) {
+                    do {
+                        remainingDoor = Math.floor(Math.random() * TOTAL_DOORS);
+                    } while (remainingDoor === playerChoice);
+                } else {
+                    remainingDoor = prizeDoor;
+                }
+                let finalChoice = playerChoice;
+                if (doSwitch) {
+                    finalChoice = remainingDoor;
+                    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>`;
+        }
+    </script>
+</body>
+</html>