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