| <!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: 0; |
| margin: 0; |
| background-color: #f0f0f0; |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| justify-content: space-between; |
| position: relative; |
| box-sizing: border-box; |
| } |
| .main-container { |
| display: flex; |
| flex-direction: row; |
| justify-content: center; |
| align-items: stretch; |
| flex: 1; |
| width: 100%; |
| padding: 10px; |
| gap: 20px; |
| } |
| .game-container { |
| flex: 2; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| } |
| .stats-container { |
| flex: 1; |
| max-width: 300px; |
| width: 100%; |
| text-align: left; |
| padding: 20px; |
| } |
| .door-container { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| gap: 10px; |
| flex-wrap: wrap; |
| width: 100%; |
| height: 100%; |
| } |
| .door { |
| cursor: pointer; |
| border: 2px solid #333; |
| padding: 10px; |
| background-color: #fff; |
| flex: 1; |
| max-width: 30%; |
| height: auto; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| box-sizing: border-box; |
| position: relative; |
| } |
| .door.selected { |
| border: 4px solid red; |
| } |
| .door img { |
| width: 100%; |
| height: auto; |
| max-height: 80vh; |
| object-fit: contain; |
| } |
| #message { |
| font-size: 1.2em; |
| margin: 10px 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; |
| } |
| .mute-button { |
| position: fixed; |
| top: 10px; |
| right: 10px; |
| z-index: 1000; |
| padding: 8px 16px; |
| background-color: #ff4444; |
| color: white; |
| border: none; |
| border-radius: 5px; |
| cursor: pointer; |
| } |
| .mute-button.muted { |
| background-color: #44ff44; |
| } |
| |
| @media (max-width: 768px) { |
| .main-container { |
| flex-direction: column; |
| gap: 10px; |
| } |
| .game-container, .stats-container { |
| max-width: 100%; |
| } |
| .door { |
| max-width: 30%; |
| } |
| .door img { |
| max-height: 40vh; |
| } |
| button { |
| font-size: 0.9em; |
| padding: 8px 16px; |
| min-width: 100px; |
| } |
| #message { |
| font-size: 1em; |
| } |
| } |
| |
| @media (max-width: 480px) { |
| .door { |
| max-width: 30%; |
| } |
| .door img { |
| max-height: 30vh; |
| } |
| button { |
| font-size: 0.8em; |
| padding: 6px 12px; |
| min-width: 80px; |
| } |
| #message { |
| font-size: 0.9em; |
| } |
| h2 { |
| font-size: 1.2em; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <button id="mute-button" class="mute-button" onclick="toggleMute()">靜音</button> |
| <div class="main-container"> |
| <div class="game-container"> |
| <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> |
| </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> |
|
|
| <audio id="bgm" loop> |
| <source src="bgm.mp3" type="audio/mpeg"> |
| 你的瀏覽器不支援音頻播放。 |
| </audio> |
| <audio id="win-sound"> |
| <source src="O.mp3" type="audio/mpeg"> |
| 你的瀏覽器不支援音頻播放。 |
| </audio> |
| <audio id="lose-sound"> |
| <source src="X.mp3" type="audio/mpeg"> |
| 你的瀏覽器不支援音頻播放。 |
| </audio> |
|
|
| <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; |
| |
| const bgm = document.getElementById("bgm"); |
| const winSound = document.getElementById("win-sound"); |
| const loseSound = document.getElementById("lose-sound"); |
| const muteButton = document.getElementById("mute-button"); |
| let isMuted = false; |
| |
| window.onload = function() { |
| bgm.play().catch(error => { |
| console.log("背景音樂播放失敗：", error); |
| }); |
| }; |
| |
| function toggleMute() { |
| isMuted = !isMuted; |
| bgm.muted = isMuted; |
| winSound.muted = isMuted; |
| loseSound.muted = isMuted; |
| muteButton.textContent = isMuted ? "開啟聲音" : "靜音"; |
| muteButton.classList.toggle("muted", !isMuted); |
| } |
| |
| function chooseDoor(door) { |
| playerChoice = door; |
| |
| |
| const doors = document.getElementsByClassName("door"); |
| for (let i = 0; i < doors.length; i++) { |
| doors[i].classList.remove("selected"); |
| } |
| doors[playerChoice].classList.add("selected"); |
| |
| |
| do { |
| revealedDoor = Math.floor(Math.random() * 3); |
| } while (revealedDoor === playerChoice || revealedDoor === prizeDoor); |
| |
| doors[revealedDoor].innerHTML = '<img src="candy23.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="h2.jpg" alt="豪宅">'; |
| } else { |
| doors[i].innerHTML = '<img src="candy23.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"; |
| |
| bgm.pause(); |
| if (won) { |
| winSound.play().catch(error => { |
| console.log("贏音樂播放失敗：", error); |
| }); |
| } else { |
| loseSound.play().catch(error => { |
| console.log("輸音樂播放失敗：", error); |
| }); |
| } |
| |
| updateStats(); |
| } |
| |
| function resetGame() { |
| prizeDoor = Math.floor(Math.random() * 3); |
| playerChoice = null; |
| revealedDoor = null; |
| |
| 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].classList.remove("selected"); |
| doors[i].style.pointerEvents = "auto"; |
| } |
| |
| if (!isMuted) { |
| bgm.currentTime = 0; |
| bgm.play().catch(error => { |
| console.log("背景音樂播放失敗：", error); |
| }); |
| } |
| } |
| |
| 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}%`; |
| } |
| </script> |
| </body> |
| </html> |
