| | <!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> |
