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