| (() => { |
| "use strict"; |
|
|
| const START_CASH = 25000; |
| const PASS_START = 2000; |
| const START_BONUS = 1000; |
| const MAX_ROUNDS = 30; |
| const BAIL = 1500; |
| const MAX_HOUSES = 3; |
| const BOARD_SIZE = 32; |
|
|
| const GROUPS = { |
| pink: { label: "草莓", color: "#ff7d9f", soft: "#ffe4eb" }, |
| blue: { label: "海洋", color: "#5b96ff", soft: "#e5efff" }, |
| green: { label: "森林", color: "#44c58a", soft: "#e0f9ed" }, |
| purple: { label: "夢幻", color: "#ad7bff", soft: "#f0e7ff" }, |
| station: { label: "車站", color: "#f3a33a", soft: "#fff0d8" }, |
| utility: { label: "公用", color: "#2fc0b4", soft: "#ddfbf7" }, |
| special: { label: "特殊", color: "#c8b28b", soft: "#f7efdf" } |
| }; |
|
|
| const PLAYER_META = [ |
| { name: "阿富", avatar: "assets/avatar_afei.png", color: "#ff6a49", soft: "#fff0eb" }, |
| { name: "小滿", avatar: "assets/avatar_xiaoman.png", color: "#4f7dff", soft: "#edf2ff" } |
| ]; |
|
|
| const TILES = [ |
| { type: "start", name: "起點", icon: "🏁" }, |
| { type: "property", group: "pink", name: "棉花糖巷", icon: "🍬", price: 800, baseRent: 160 }, |
| { type: "chance", name: "機會", icon: "🎁" }, |
| { type: "property", group: "pink", name: "草莓莊園", icon: "🍓", price: 1000, baseRent: 200 }, |
| { type: "station", group: "station", name: "溫泉站", icon: "♨️", price: 1500 }, |
| { type: "property", group: "pink", name: "櫻桃小屋", icon: "🍒", price: 1200, baseRent: 240 }, |
| { type: "tax", name: "甜點稅", icon: "🍰", amount: 800 }, |
| { type: "utility", group: "utility", name: "泡泡水廠", icon: "🫧", price: 1600 }, |
| { type: "jail", name: "監獄", icon: "🚨" }, |
| { type: "property", group: "blue", name: "書店街", icon: "📚", price: 1400, baseRent: 280 }, |
| { type: "fate", name: "命運", icon: "🔮" }, |
| { type: "property", group: "blue", name: "藍莓工坊", icon: "🫐", price: 1600, baseRent: 320 }, |
| { type: "station", group: "station", name: "風車站", icon: "🌬️", price: 1800 }, |
| { type: "property", group: "blue", name: "圖書館", icon: "🏛️", price: 1800, baseRent: 360 }, |
| { type: "charity", name: "公益捐款", icon: "💝", amount: 600 }, |
| { type: "bank", name: "大富翁銀行", icon: "🏦", amount: 1200 }, |
| { type: "free", name: "免費停車", icon: "🅿️" }, |
| { type: "property", group: "green", name: "向日葵田", icon: "🌻", price: 2000, baseRent: 400 }, |
| { type: "chance", name: "機會", icon: "🎁" }, |
| { type: "property", group: "green", name: "森林小屋", icon: "🌲", price: 2200, baseRent: 440 }, |
| { type: "station", group: "station", name: "彩虹站", icon: "🌈", price: 2200 }, |
| { type: "property", group: "green", name: "蘋果園", icon: "🍎", price: 2400, baseRent: 480 }, |
| { type: "tax", name: "豪華稅", icon: "💎", amount: 1200 }, |
| { type: "chance", name: "機會", icon: "🎁" }, |
| { type: "gojail", name: "前往監獄", icon: "🚔" }, |
| { type: "property", group: "purple", name: "櫻花町", icon: "🌸", price: 2600, baseRent: 520 }, |
| { type: "utility", group: "utility", name: "電力公司", icon: "⚡", price: 2400 }, |
| { type: "property", group: "purple", name: "紫藤館", icon: "🏯", price: 2800, baseRent: 560 }, |
| { type: "fate", name: "命運", icon: "🔮" }, |
| { type: "property", group: "purple", name: "星空城堡", icon: "🏰", price: 3000, baseRent: 600 }, |
| { type: "station", group: "station", name: "雲朵機場", icon: "✈️", price: 2800 }, |
| { type: "chance", name: "機會", icon: "🎁" } |
| ]; |
|
|
| TILES.forEach((tile, index) => { |
| tile.id = index; |
| }); |
|
|
| const CHANCE_CARDS = [ |
| { title: "中獎啦！", text: "彩券中了二獎，獲得 $2,000。", effectLabel: "+ $2,000", effect: { type: "gain", amount: 2000 } }, |
| { title: "小鎮紅利", text: "銀行發放小鎮紅利 $1,200。", effectLabel: "+ $1,200", effect: { type: "gain", amount: 1200 } }, |
| { title: "免費停車", text: "直接前往免費停車場，把彩池帶回家。", effectLabel: "前往免費停車", effect: { type: "moveTo", amount: 16 } }, |
| { title: "搭上順風車", text: "一路順風，前進 3 格。", effectLabel: "前進 3 格", effect: { type: "moveSteps", amount: 3 } }, |
| { title: "回到起點", text: "小鎮觀光巴士帶你回到起點，順便領取 $2,000。", effectLabel: "回到起點", effect: { type: "moveTo", amount: 0 } }, |
| { title: "前進車站", text: "搭上下一班車，前往最近的車站。", effectLabel: "前往最近車站", effect: { type: "nearestStation" } }, |
| { title: "監獄風雲", text: "不小心走錯路，直接前往監獄。", effectLabel: "前往監獄", effect: { type: "jail" } }, |
| { title: "免獄卡", text: "獲得一張免獄卡，下次入獄時自動使用。", effectLabel: "獲得免獄卡", effect: { type: "freeJail" } }, |
| { title: "房屋維修", text: "小鎮房屋大檢查，每棟房屋支付 $300 維修費。", effectLabel: "每棟房屋 -$300", effect: { type: "repair", amount: 300 } }, |
| { title: "對手請客", text: "對手請你喝一杯小鎮特調，獲得 $500。", effectLabel: "+ $500", effect: { type: "gainFromOpponent", amount: 500 } } |
| ]; |
|
|
| const FATE_CARDS = [ |
| { title: "維修費", text: "小屋屋頂漏水，支付維修費 $800。", effectLabel: "- $800", effect: { type: "payPot", amount: 800 } }, |
| { title: "請客", text: "請對手吃甜點，支付 $600。", effectLabel: "- $600", effect: { type: "payOpponent", amount: 600 } }, |
| { title: "前進 3 格", text: "命運指引你向前，前進 3 格。", effectLabel: "前進 3 格", effect: { type: "moveSteps", amount: 3 } }, |
| { title: "後退 3 格", text: "走錯方向了，後退 3 格。", effectLabel: "後退 3 格", effect: { type: "moveSteps", amount: -3 } }, |
| { title: "銀行利息", text: "存款利息入帳，獲得 $1,500。", effectLabel: "+ $1,500", effect: { type: "gain", amount: 1500 } }, |
| { title: "手機壞了", text: "手機掉進水溝，支付 $500 修理費。", effectLabel: "- $500", effect: { type: "payPot", amount: 500 } }, |
| { title: "房屋稅", text: "每棟房屋繳交 $200 房屋稅。", effectLabel: "每棟房屋 -$200", effect: { type: "repair", amount: 200 } }, |
| { title: "免獄卡", text: "獲得一張免獄卡，下次入獄時自動使用。", effectLabel: "獲得免獄卡", effect: { type: "freeJail" } }, |
| { title: "旅遊券", text: "抽中旅遊券，獲得 $1,000。", effectLabel: "+ $1,000", effect: { type: "gain", amount: 1000 } }, |
| { title: "罰單", text: "亂丟垃圾被開罰單，支付 $700。", effectLabel: "- $700", effect: { type: "payPot", amount: 700 } } |
| ]; |
|
|
| const PIP_MAP = { |
| 1: [4], |
| 2: [0, 8], |
| 3: [0, 4, 8], |
| 4: [0, 2, 6, 8], |
| 5: [0, 2, 4, 6, 8], |
| 6: [0, 2, 3, 5, 6, 8] |
| }; |
|
|
| const els = { |
| board: document.getElementById("board"), |
| boardCenter: document.getElementById("boardCenter"), |
| boardScroll: document.querySelector(".board-scroll"), |
| tilesLayer: document.getElementById("tilesLayer"), |
| rollBtn: document.getElementById("rollBtn"), |
| die1: document.getElementById("die1"), |
| die2: document.getElementById("die2"), |
| diceSum: document.getElementById("diceSum"), |
| centerAvatar: document.getElementById("centerAvatar"), |
| centerName: document.getElementById("centerName"), |
| turnTag: document.getElementById("turnTag"), |
| centerHint: document.getElementById("centerHint"), |
| roundNum: document.getElementById("roundNum"), |
| potValue: document.getElementById("potValue"), |
| actionPanel: document.getElementById("actionPanel"), |
| centerNews: document.getElementById("centerNews"), |
| newsText: document.getElementById("newsText"), |
| currentAvatar: document.getElementById("currentAvatar"), |
| currentRing: document.getElementById("currentRing"), |
| currentName: document.getElementById("currentName"), |
| currentMoney: document.getElementById("currentMoney"), |
| currentSub: document.getElementById("currentSub"), |
| currentCash: document.getElementById("currentCash"), |
| currentProps: document.getElementById("currentProps"), |
| currentCards: document.getElementById("currentCards"), |
| playersRow: document.getElementById("playersRow"), |
| autoBtn: document.getElementById("autoBtn"), |
| autoIcon: document.getElementById("autoIcon"), |
| autoTitle: document.getElementById("autoTitle"), |
| autoSub: document.getElementById("autoSub"), |
| speedSelect: document.getElementById("speedSelect"), |
| soundBtn: document.getElementById("soundBtn"), |
| rulesBtn: document.getElementById("rulesBtn"), |
| restartBtn: document.getElementById("restartBtn"), |
| clearLogBtn: document.getElementById("clearLogBtn"), |
| logList: document.getElementById("logList"), |
| toast: document.getElementById("toast"), |
| modal: document.getElementById("modal"), |
| modalBody: document.getElementById("modalBody"), |
| modalClose: document.getElementById("modalClose") |
| }; |
|
|
| const state = { |
| players: [], |
| tileEls: [], |
| playerCards: [], |
| current: 0, |
| round: 1, |
| phase: "idle", |
| auto: false, |
| speed: 2, |
| busy: false, |
| over: false, |
| pot: 0, |
| dice: [1, 1], |
| rolled: false, |
| pending: null, |
| pendingAutoTimer: null, |
| autoTimer: null, |
| modalOpen: false, |
| modalResolve: null, |
| modalTimer: null, |
| modalAutoCloseable: false, |
| modalAutoCloseDelay: 0, |
| shownCurrent: -1, |
| gameOverShown: false, |
| sound: false, |
| toastTimer: null |
| }; |
|
|
| let audioCtx = null; |
|
|
| function fmt(value) { |
| return Math.round(Number(value) || 0).toLocaleString("en-US"); |
| } |
|
|
| function wait(ms) { |
| return new Promise((resolve) => setTimeout(resolve, Math.max(28, Math.round(ms / state.speed)))); |
| } |
|
|
| function randDie() { |
| return 1 + Math.floor(Math.random() * 6); |
| } |
|
|
| function currentPlayer() { |
| return state.players[state.current]; |
| } |
|
|
| function otherPlayer(player) { |
| return state.players[player.id === 0 ? 1 : 0]; |
| } |
|
|
| function makePlayers() { |
| return PLAYER_META.map((meta, id) => ({ |
| id, |
| name: meta.name, |
| avatar: meta.avatar, |
| color: meta.color, |
| soft: meta.soft, |
| money: START_CASH, |
| pos: 0, |
| props: [], |
| houses: {}, |
| jailTurns: 0, |
| cards: [] |
| })); |
| } |
|
|
| function ownerOf(tileId) { |
| for (const player of state.players) { |
| if (player.props.includes(tileId)) return player.id; |
| } |
| return null; |
| } |
|
|
| function ownsFullGroup(player, group) { |
| if (!["pink", "blue", "green", "purple"].includes(group)) return false; |
| return TILES.filter((tile) => tile.group === group).every((tile) => player.props.includes(TILES.indexOf(tile))); |
| } |
|
|
| function upgradeCost(tile) { |
| return Math.round((tile.price || 0) * 0.6); |
| } |
|
|
| function propertyRent(tile, owner, level) { |
| const full = ownsFullGroup(owner, tile.group); |
| let rent = (tile.baseRent || 0) * (full ? 2 : 1); |
| if (level > 0) rent = Math.round(rent * (1 + level * 1.15)); |
| return Math.round(rent); |
| } |
|
|
| function calcRent(tile, owner, diceSum) { |
| if (tile.type === "station") { |
| const count = owner.props.filter((id) => TILES[id].type === "station").length; |
| return [0, 400, 900, 1600, 2500][count] || 0; |
| } |
| if (tile.type === "utility") { |
| const count = owner.props.filter((id) => TILES[id].type === "utility").length; |
| return diceSum * (count >= 2 ? 200 : 80); |
| } |
| return propertyRent(tile, owner, owner.houses[tile.id] || 0); |
| } |
|
|
| function netWorth(player) { |
| return player.money + player.props.reduce((sum, id) => { |
| const tile = TILES[id]; |
| return sum + (tile.price || 0) + (player.houses[id] || 0) * upgradeCost(tile); |
| }, 0); |
| } |
|
|
| function tilePriceText(tile) { |
| if (tile.price) return `$${fmt(tile.price)}`; |
| switch (tile.type) { |
| case "start": return "+$2,000"; |
| case "tax": return `-$${fmt(tile.amount)}`; |
| case "charity": return `-$${fmt(tile.amount)}`; |
| case "bank": return `+$${fmt(tile.amount)}`; |
| case "free": return "彩池"; |
| case "jail": return "探監"; |
| case "gojail": return "進監獄"; |
| case "chance": |
| case "fate": return "抽卡"; |
| default: return ""; |
| } |
| } |
|
|
| function tileTooltip(tile) { |
| let text = tile.name; |
| if (tile.price) text += ` · 售價 $${fmt(tile.price)}`; |
| if (tile.baseRent) text += ` · 基本租金 $${fmt(tile.baseRent)}`; |
| if (tile.type === "station") text += " · 租金依車站數量"; |
| if (tile.type === "utility") text += " · 租金 = 骰子點數 × 倍率"; |
| if (tile.amount) text += ` · ${tile.type === "bank" ? "領取" : "支付"} $${fmt(tile.amount)}`; |
| return text; |
| } |
|
|
| function tileGridPosition(index) { |
| if (index === 0) return [9, 9]; |
| if (index < 8) return [9, 9 - index]; |
| if (index === 8) return [9, 1]; |
| if (index < 16) return [9 - (index - 8), 1]; |
| if (index === 16) return [1, 1]; |
| if (index < 24) return [1, 1 + (index - 16)]; |
| if (index === 24) return [1, 9]; |
| return [1 + (index - 24), 9]; |
| } |
|
|
| function buildPlayerCards() { |
| els.playersRow.innerHTML = ""; |
| state.playerCards = PLAYER_META.map((meta, index) => { |
| const card = document.createElement("article"); |
| card.className = "player-card"; |
| card.dataset.playerCard = String(index); |
| card.style.setProperty("--pcolor", meta.color); |
| card.style.setProperty("--psoft", meta.soft); |
| card.innerHTML = ` |
| <div class="player-avatar"><img src="${meta.avatar}" alt="${meta.name}頭像"></div> |
| <div class="player-main"> |
| <div class="player-name-row"><b>${meta.name}</b><span class="player-tag">當前</span></div> |
| <div class="player-cash" data-cash>$25,000</div> |
| <div class="player-meta" data-meta>📍 起點 · 🏠 0</div> |
| </div> |
| <span class="player-jail" data-jail></span> |
| `; |
| els.playersRow.appendChild(card); |
| return card; |
| }); |
| } |
|
|
| function buildBoard() { |
| const fragment = document.createDocumentFragment(); |
| state.tileEls = []; |
| TILES.forEach((tile, index) => { |
| const [row, col] = tileGridPosition(index); |
| const button = document.createElement("button"); |
| button.type = "button"; |
| button.className = `tile tile-${tile.type} pos-${index}${tile.group ? ` has-strip group-${tile.group}` : ""}`; |
| button.style.gridRow = String(row); |
| button.style.gridColumn = String(col); |
| button.dataset.tileId = String(index); |
| if (tile.group) button.style.setProperty("--group-color", GROUPS[tile.group].color); |
| button.title = tileTooltip(tile); |
| button.setAttribute("aria-label", tileTooltip(tile)); |
| button.innerHTML = ` |
| <span class="tile-icon">${tile.icon}</span> |
| <span class="tile-name">${tile.name}</span> |
| <span class="tile-price">${tilePriceText(tile)}</span> |
| <span class="tile-houses" data-houses></span> |
| <span class="tile-owner" data-owner></span> |
| <span class="tile-tokens" data-tokens></span> |
| `; |
| fragment.appendChild(button); |
| state.tileEls.push(button); |
| }); |
| els.tilesLayer.appendChild(fragment); |
| } |
|
|
| function renderBoard() { |
| const current = currentPlayer(); |
| state.tileEls.forEach((el, index) => { |
| const ownerId = ownerOf(index); |
| const owner = ownerId === null ? null : state.players[ownerId]; |
| el.classList.toggle("owned", Boolean(owner)); |
| const isCurrentTile = Boolean(current && current.pos === index); |
| el.classList.toggle("is-current", isCurrentTile); |
| if (isCurrentTile && current) el.style.setProperty("--current-color", current.color); |
| if (!isCurrentTile) el.style.removeProperty("--current-color"); |
| if (owner) { |
| el.style.setProperty("--owner-color", owner.color); |
| el.style.setProperty("--owner-soft", owner.soft); |
| } else { |
| el.style.removeProperty("--owner-color"); |
| el.style.removeProperty("--owner-soft"); |
| } |
| el.querySelector("[data-owner]").textContent = owner ? `P${owner.id + 1}` : ""; |
| const level = owner ? (owner.houses[index] || 0) : 0; |
| el.querySelector("[data-houses]").textContent = level ? "🏠".repeat(level) : ""; |
| const tokenLayer = el.querySelector("[data-tokens]"); |
| tokenLayer.innerHTML = ""; |
| state.players.forEach((player) => { |
| if (player.pos !== index) return; |
| const token = document.createElement("span"); |
| token.className = `token${player.id === state.current ? " is-current" : ""}`; |
| token.style.setProperty("--pcolor", player.color); |
| token.innerHTML = `<img src="${player.avatar}" alt="${player.name}">`; |
| token.title = player.name; |
| tokenLayer.appendChild(token); |
| }); |
| }); |
| } |
|
|
| function setDieValue(die, value) { |
| die.innerHTML = ""; |
| const pips = PIP_MAP[value] || []; |
| for (let i = 0; i < 9; i += 1) { |
| const cell = document.createElement("span"); |
| if (pips.includes(i)) cell.className = "pip"; |
| die.appendChild(cell); |
| } |
| die.setAttribute("aria-label", `骰子 ${value} 點`); |
| } |
|
|
| function renderUI() { |
| const player = currentPlayer(); |
| if (!player) return; |
| const switched = state.shownCurrent !== player.id; |
| state.shownCurrent = player.id; |
|
|
| els.currentAvatar.src = player.avatar; |
| els.currentAvatar.alt = `${player.name}頭像`; |
| els.centerAvatar.src = player.avatar; |
| els.centerAvatar.alt = `${player.name}頭像`; |
| els.currentName.textContent = player.name; |
| els.currentName.style.color = player.color; |
| els.centerName.textContent = player.name; |
| els.currentRing.style.setProperty("--ring", player.color); |
| els.turnTag.textContent = `P${player.id + 1}`; |
| els.turnTag.style.background = player.soft; |
| els.turnTag.style.color = player.color; |
| els.currentMoney.textContent = `$${fmt(player.money)}`; |
| els.currentCash.textContent = `$${fmt(player.money)}`; |
| els.currentProps.textContent = String(player.props.length); |
| els.currentCards.textContent = String(player.cards.length); |
| els.currentSub.textContent = player.jailTurns > 0 |
| ? `🚨 監獄中 · 剩餘 ${player.jailTurns} 回合` |
| : `📍 ${TILES[player.pos].name} · 🏠 ${player.props.length} 處地產`; |
| els.roundNum.textContent = String(state.round); |
| els.potValue.textContent = `$${fmt(state.pot)}`; |
|
|
| state.players.forEach((p, index) => { |
| const card = state.playerCards[index]; |
| if (!card) return; |
| card.classList.toggle("is-current", p.id === state.current); |
| card.querySelector("[data-cash]").textContent = `$${fmt(p.money)}`; |
| card.querySelector("[data-meta]").textContent = `📍 ${TILES[p.pos].name} · 🏠 ${p.props.length}`; |
| card.querySelector("[data-jail]").textContent = p.jailTurns > 0 ? "🚨" : ""; |
| }); |
|
|
| if (state.phase !== "rolling") { |
| setDieValue(els.die1, state.dice[0]); |
| setDieValue(els.die2, state.dice[1]); |
| } |
| const showSum = state.rolled && state.phase !== "rolling"; |
| els.diceSum.textContent = showSum ? String(state.dice[0] + state.dice[1]) : "—"; |
| els.diceSum.classList.toggle("show", showSum); |
|
|
| const canRoll = state.phase === "idle" && !state.over && !state.auto && !state.busy; |
| els.rollBtn.disabled = !canRoll; |
| els.rollBtn.classList.toggle("is-auto", state.auto); |
| if (state.over) { |
| els.rollBtn.textContent = "🏁 遊戲結束"; |
| } else if (state.auto) { |
| els.rollBtn.textContent = state.phase === "idle" ? "🤖 自動代玩中" : "🤖 代玩進行中"; |
| } else if (state.phase === "idle") { |
| els.rollBtn.textContent = "🎲 擲骰子"; |
| } else if (state.phase === "rolling") { |
| els.rollBtn.textContent = "🎲 擲骰中…"; |
| } else if (state.phase === "moving") { |
| els.rollBtn.textContent = "🚶 移動中…"; |
| } else if (state.phase === "action") { |
| els.rollBtn.textContent = "🤔 請做決定"; |
| } else if (state.phase === "jail") { |
| els.rollBtn.textContent = "🚨 監獄中"; |
| } else if (state.phase === "card") { |
| els.rollBtn.textContent = "🎁 抽卡中…"; |
| } else if (state.phase === "ending") { |
| els.rollBtn.textContent = "🔄 換人中…"; |
| } else { |
| els.rollBtn.textContent = "⏳ 結算中…"; |
| } |
|
|
| els.autoBtn.classList.toggle("is-on", state.auto); |
| els.autoBtn.setAttribute("aria-pressed", String(state.auto)); |
| els.autoIcon.textContent = state.auto ? "⏸" : "▶"; |
| els.autoTitle.textContent = state.auto ? "停止代玩" : "自動代玩"; |
| els.autoSub.textContent = state.auto ? `進行中 · ${state.speed}× 速度` : "讓小鎮自己跑起來"; |
|
|
| if (state.over) { |
| els.centerHint.textContent = "遊戲結束，查看最後結果。"; |
| } else if (state.auto) { |
| els.centerHint.textContent = `自動代玩中 · ${state.speed}× · 隨時可以按停止。`; |
| } else if (state.phase === "idle") { |
| els.centerHint.textContent = "按一下擲骰子，開始小鎮冒險。"; |
| } else if (state.phase === "rolling") { |
| els.centerHint.textContent = "骰子轉呀轉，看看這次走幾步。"; |
| } else if (state.phase === "moving") { |
| els.centerHint.textContent = "一步一步往前進…"; |
| } else if (state.phase === "action") { |
| els.centerHint.textContent = "選一個動作，繼續你的回合。"; |
| } else if (state.phase === "jail") { |
| els.centerHint.textContent = "支付保釋金，或乖乖服刑一回合。"; |
| } else if (state.phase === "card") { |
| els.centerHint.textContent = "卡片效果發動中…"; |
| } else if (state.phase === "ending") { |
| els.centerHint.textContent = "換下一位玩家上場。"; |
| } else { |
| els.centerHint.textContent = "正在結算這塊地…"; |
| } |
|
|
| if (switched) { |
| [els.currentAvatar, els.centerAvatar].forEach((img) => { |
| try { |
| img.animate( |
| [ |
| { opacity: 0.15, transform: "scale(.88) rotate(-4deg)" }, |
| { opacity: 1, transform: "scale(1) rotate(0deg)" } |
| ], |
| { duration: 360, easing: "cubic-bezier(.2,.8,.2,1)" } |
| ); |
| } catch (error) { |
| void error; |
| } |
| }); |
| } |
| } |
|
|
| function renderActionPanel() { |
| const pending = state.pending; |
| els.boardCenter.classList.toggle("has-action", Boolean(pending)); |
| if (!pending) { |
| els.actionPanel.classList.add("is-hidden"); |
| els.actionPanel.innerHTML = ""; |
| return; |
| } |
|
|
| const player = state.players[pending.playerId]; |
| const tile = TILES[pending.tileId]; |
| const autoNote = state.auto ? '<div class="auto-note">自動代玩中，將自動決定…</div>' : ""; |
| let html = ""; |
|
|
| if (pending.kind === "buy") { |
| const group = GROUPS[tile.group]; |
| const description = tile.type === "station" |
| ? "買下後，對手踩到會依你擁有的車站數量支付租金。" |
| : tile.type === "utility" |
| ? "買下後，對手踩到會支付「骰子點數 × 倍率」的租金。" |
| : `買下後，對手踩到需支付基本租金 $${fmt(propertyRent(tile, player, 0))}；收集完整「${group.label}」色組，租金 ×2。`; |
| html = ` |
| <div class="action-head"> |
| <span class="action-icon">${tile.icon}</span> |
| <div class="action-title"><b>${tile.name}</b><small>${group.label} · 售價 $${fmt(tile.price)}</small></div> |
| </div> |
| <p class="action-desc">${description}</p> |
| <div class="action-buttons"> |
| <button type="button" class="primary" data-choice="buy" ${pending.canBuy ? "" : "disabled"}>${pending.canBuy ? `買下 $${fmt(tile.price)}` : "現金不足"}</button> |
| <button type="button" class="ghost" data-choice="pass">放棄</button> |
| </div> |
| ${autoNote} |
| `; |
| } else if (pending.kind === "upgrade") { |
| const level = player.houses[tile.id] || 0; |
| const nextLevel = level + 1; |
| const cost = upgradeCost(tile); |
| const currentRent = propertyRent(tile, player, level); |
| const nextRent = propertyRent(tile, player, nextLevel); |
| html = ` |
| <div class="action-head"> |
| <span class="action-icon">${tile.icon}</span> |
| <div class="action-title"><b>${tile.name}</b><small>${GROUPS[tile.group].label} · 第 ${level} 級房屋</small></div> |
| </div> |
| <p class="action-desc">目前租金 <b>$${fmt(currentRent)}</b>，升級後 <b>$${fmt(nextRent)}</b>。升級費 $${fmt(cost)}。</p> |
| <div class="action-buttons"> |
| <button type="button" class="primary" data-choice="upgrade" ${pending.canUpgrade ? "" : "disabled"}>${pending.canUpgrade ? `升級 $${fmt(cost)}` : "現金不足"}</button> |
| <button type="button" class="ghost" data-choice="skip">這次不升級</button> |
| </div> |
| ${autoNote} |
| `; |
| } else if (pending.kind === "jail") { |
| html = ` |
| <div class="action-head"> |
| <span class="action-icon">🚨</span> |
| <div class="action-title"><b>監獄中</b><small>還要停留 ${player.jailTurns} 回合</small></div> |
| </div> |
| <p class="action-desc">支付 <b>$${fmt(BAIL)}</b> 保釋金可以立刻出獄；也可以服刑一回合。</p> |
| <div class="action-buttons"> |
| <button type="button" class="primary" data-choice="bail" ${pending.canBail ? "" : "disabled"}>${pending.canBail ? `保釋 $${fmt(BAIL)}` : "現金不足"}</button> |
| <button type="button" class="ghost" data-choice="serve">服刑一回合</button> |
| </div> |
| ${autoNote} |
| `; |
| } |
|
|
| els.actionPanel.innerHTML = html; |
| els.actionPanel.classList.remove("is-hidden"); |
| els.actionPanel.querySelectorAll("[data-choice]").forEach((button) => { |
| button.addEventListener("click", () => { |
| if (button.disabled) return; |
| resolvePending(button.dataset.choice); |
| }); |
| }); |
| } |
|
|
| function addLog(text, type = "info") { |
| const item = document.createElement("li"); |
| item.className = `log-item log-${type}`; |
| item.textContent = text; |
| els.logList.prepend(item); |
| if (type !== "turn") els.newsText.textContent = text; |
| while (els.logList.children.length > 60) { |
| els.logList.lastElementChild.remove(); |
| } |
| } |
|
|
| function toast(text, type = "") { |
| clearTimeout(state.toastTimer); |
| els.toast.textContent = text; |
| els.toast.className = `toast show${type ? ` is-${type}` : ""}`; |
| state.toastTimer = setTimeout(() => { |
| els.toast.classList.remove("show"); |
| }, 2200); |
| } |
|
|
| function ensureAudio() { |
| if (!state.sound) return null; |
| if (!audioCtx) { |
| const AudioCtor = window.AudioContext || window.webkitAudioContext; |
| if (!AudioCtor) return null; |
| try { |
| audioCtx = new AudioCtor(); |
| } catch (error) { |
| void error; |
| return null; |
| } |
| } |
| if (audioCtx.state === "suspended") { |
| audioCtx.resume().catch(() => {}); |
| } |
| return audioCtx; |
| } |
|
|
| function playTone(freq = 440, duration = 0.08, type = "sine", volume = 0.03) { |
| const ctx = ensureAudio(); |
| if (!ctx) return; |
| const osc = ctx.createOscillator(); |
| const gain = ctx.createGain(); |
| osc.type = type; |
| osc.frequency.value = freq; |
| gain.gain.setValueAtTime(volume, ctx.currentTime); |
| gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + duration); |
| osc.connect(gain); |
| gain.connect(ctx.destination); |
| osc.start(); |
| osc.stop(ctx.currentTime + duration); |
| } |
|
|
| function playWin() { |
| [523, 659, 784, 1047].forEach((freq, index) => { |
| setTimeout(() => playTone(freq, 0.16, "triangle", 0.035), index * 120); |
| }); |
| } |
|
|
| function updateSoundButton() { |
| els.soundBtn.textContent = state.sound ? "🔊" : "🔇"; |
| els.soundBtn.classList.toggle("is-on", state.sound); |
| els.soundBtn.setAttribute("aria-pressed", String(state.sound)); |
| els.soundBtn.setAttribute("aria-label", state.sound ? "關閉音效" : "開啟音效"); |
| els.soundBtn.title = state.sound ? "關閉音效" : "開啟音效"; |
| } |
|
|
| function savePrefs() { |
| try { |
| localStorage.setItem("dafuweng-speed", String(state.speed)); |
| localStorage.setItem("dafuweng-sound", state.sound ? "1" : "0"); |
| } catch (error) { |
| void error; |
| } |
| } |
|
|
| function loadPrefs() { |
| try { |
| const savedSpeed = Number(localStorage.getItem("dafuweng-speed")); |
| if ([1, 2, 3].includes(savedSpeed)) state.speed = savedSpeed; |
| state.sound = localStorage.getItem("dafuweng-sound") === "1"; |
| } catch (error) { |
| void error; |
| } |
| els.speedSelect.value = String(state.speed); |
| updateSoundButton(); |
| } |
|
|
| function clearAutoTimers() { |
| clearTimeout(state.autoTimer); |
| clearTimeout(state.pendingAutoTimer); |
| clearTimeout(state.modalTimer); |
| state.autoTimer = null; |
| state.pendingAutoTimer = null; |
| state.modalTimer = null; |
| } |
|
|
| function scheduleAutoRoll() { |
| clearTimeout(state.autoTimer); |
| state.autoTimer = null; |
| if (!state.auto || state.over || state.modalOpen || state.phase !== "idle" || state.busy) return; |
| state.autoTimer = setTimeout(() => { |
| state.autoTimer = null; |
| if (state.auto && !state.over && !state.modalOpen && state.phase === "idle" && !state.busy) { |
| rollDice(); |
| } |
| }, Math.max(180, Math.round(620 / state.speed))); |
| } |
|
|
| function maybeAuto() { |
| if (!state.auto || state.over) return; |
| if (state.pending) schedulePendingAuto(); |
| if (state.phase === "idle") scheduleAutoRoll(); |
| if (state.modalOpen && state.modalAutoCloseable) scheduleModalAutoClose(state.modalAutoCloseDelay); |
| } |
|
|
| function toggleAuto(force) { |
| if (state.over) return; |
| const next = typeof force === "boolean" ? force : !state.auto; |
| if (next === state.auto) return; |
| state.auto = next; |
| if (!state.auto) clearAutoTimers(); |
| renderUI(); |
| renderActionPanel(); |
| if (state.auto) { |
| playTone(660, 0.08, "sine"); |
| maybeAuto(); |
| } else { |
| playTone(320, 0.07, "sine"); |
| } |
| } |
|
|
| function schedulePendingAuto() { |
| clearTimeout(state.pendingAutoTimer); |
| state.pendingAutoTimer = null; |
| if (!state.auto || !state.pending || state.over) return; |
| state.pendingAutoTimer = setTimeout(() => { |
| state.pendingAutoTimer = null; |
| if (!state.auto || !state.pending || state.over) return; |
| resolvePending(autoChoice(state.pending)); |
| }, Math.max(220, Math.round(700 / state.speed))); |
| } |
|
|
| function autoChoice(pending) { |
| const player = state.players[pending.playerId]; |
| const tile = TILES[pending.tileId]; |
| if (pending.kind === "buy") { |
| return pending.canBuy && player.money - tile.price >= 3500 ? "buy" : "pass"; |
| } |
| if (pending.kind === "upgrade") { |
| return pending.canUpgrade && player.money - upgradeCost(tile) >= 5000 ? "upgrade" : "skip"; |
| } |
| if (pending.kind === "jail") { |
| return pending.canBail && player.money >= 5000 ? "bail" : "serve"; |
| } |
| return "pass"; |
| } |
|
|
| function resolvePending(choice) { |
| const pending = state.pending; |
| if (!pending) return; |
| state.pending = null; |
| clearTimeout(state.pendingAutoTimer); |
| state.pendingAutoTimer = null; |
| state.phase = "resolving"; |
| renderActionPanel(); |
| renderUI(); |
| pending.resolve(choice); |
| } |
|
|
| function promptPurchase(player, tile) { |
| return new Promise((resolve) => { |
| state.pending = { |
| kind: "buy", |
| playerId: player.id, |
| tileId: tile.id, |
| canBuy: player.money >= tile.price, |
| resolve |
| }; |
| state.phase = "action"; |
| renderActionPanel(); |
| renderUI(); |
| if (state.auto) schedulePendingAuto(); |
| }); |
| } |
|
|
| function promptUpgrade(player, tile) { |
| return new Promise((resolve) => { |
| state.pending = { |
| kind: "upgrade", |
| playerId: player.id, |
| tileId: tile.id, |
| canUpgrade: player.money >= upgradeCost(tile), |
| resolve |
| }; |
| state.phase = "action"; |
| renderActionPanel(); |
| renderUI(); |
| if (state.auto) schedulePendingAuto(); |
| }); |
| } |
|
|
| function promptJail(player) { |
| return new Promise((resolve) => { |
| state.pending = { |
| kind: "jail", |
| playerId: player.id, |
| tileId: player.pos, |
| canBail: player.money >= BAIL, |
| resolve |
| }; |
| state.phase = "jail"; |
| renderActionPanel(); |
| renderUI(); |
| if (state.auto) schedulePendingAuto(); |
| }); |
| } |
|
|
| function animateDice(die1, die2) { |
| els.die1.classList.add("rolling"); |
| els.die2.classList.add("rolling"); |
| const interval = setInterval(() => { |
| setDieValue(els.die1, randDie()); |
| setDieValue(els.die2, randDie()); |
| }, 62); |
| return wait(760).then(() => { |
| clearInterval(interval); |
| els.die1.classList.remove("rolling"); |
| els.die2.classList.remove("rolling"); |
| setDieValue(els.die1, die1); |
| setDieValue(els.die2, die2); |
| }); |
| } |
|
|
| async function rollDice() { |
| if (state.busy || state.phase !== "idle" || state.over) return; |
| const player = currentPlayer(); |
| state.busy = true; |
| state.phase = "rolling"; |
| const die1 = randDie(); |
| const die2 = randDie(); |
| state.dice = [die1, die2]; |
| state.rolled = true; |
| renderUI(); |
| playTone(540, 0.07, "triangle"); |
| await animateDice(die1, die2); |
| if (state.over) { |
| state.busy = false; |
| return; |
| } |
| addLog(`${player.name} 擲出 ${die1} + ${die2} = ${die1 + die2} 點。`, "dice"); |
| if (die1 === die2) { |
| addLog("雙骰！本回合結束後可以再擲一次。", "bonus"); |
| toast("雙骰！再來一次", "gold"); |
| playTone(880, 0.1, "sine"); |
| } |
| state.phase = "moving"; |
| renderUI(); |
| await moveSteps(die1 + die2, true); |
| if (state.over) { |
| state.busy = false; |
| renderUI(); |
| return; |
| } |
| await resolveLanding(0); |
| if (state.over) { |
| state.busy = false; |
| renderUI(); |
| return; |
| } |
| await finishTurn(true); |
| } |
|
|
| async function moveSteps(steps, collectStart = true) { |
| const player = currentPlayer(); |
| const direction = steps >= 0 ? 1 : -1; |
| const count = Math.abs(steps); |
| for (let i = 0; i < count; i += 1) { |
| player.pos = (player.pos + direction + BOARD_SIZE) % BOARD_SIZE; |
| if (direction > 0 && collectStart && player.pos === 0) { |
| player.money += PASS_START; |
| addLog(`${player.name} 經過起點，領取 $${fmt(PASS_START)}。`, "bonus"); |
| toast(`${player.name} 經過起點 +$${fmt(PASS_START)}`, "gold"); |
| playTone(920, 0.08, "sine"); |
| } |
| renderBoard(); |
| renderUI(); |
| await wait(95); |
| } |
| } |
|
|
| async function moveTo(target, collectStart = true) { |
| const player = currentPlayer(); |
| if (player.pos === target) return; |
| const steps = (target - player.pos + BOARD_SIZE) % BOARD_SIZE; |
| await moveSteps(steps, collectStart); |
| } |
|
|
| function findNextStation(pos) { |
| for (let step = 1; step <= BOARD_SIZE; step += 1) { |
| const index = (pos + step) % BOARD_SIZE; |
| if (TILES[index].type === "station") return index; |
| } |
| return 0; |
| } |
|
|
| async function resolveLanding(depth = 0) { |
| if (state.over) return; |
| const player = currentPlayer(); |
| const tile = TILES[player.pos]; |
| state.phase = "resolving"; |
| renderUI(); |
| addLog(`${player.name} 停在「${tile.name}」。`, "move"); |
| await wait(220); |
| if (state.over) return; |
|
|
| if (tile.type === "start") { |
| player.money += START_BONUS; |
| addLog(`${player.name} 正好停在起點，額外領取 $${fmt(START_BONUS)}。`, "bonus"); |
| toast(`停在起點 +$${fmt(START_BONUS)}`, "gold"); |
| playTone(880, 0.1, "sine"); |
| return; |
| } |
|
|
| if (tile.type === "jail") { |
| addLog(`${player.name} 只是來監獄探監，平安無事。`, "info"); |
| return; |
| } |
|
|
| if (tile.type === "free") { |
| if (state.pot > 0) { |
| const amount = state.pot; |
| player.money += amount; |
| state.pot = 0; |
| addLog(`${player.name} 在免費停車場拿走彩池 $${fmt(amount)}！`, "bonus"); |
| toast(`免費停車 +$${fmt(amount)}`, "gold"); |
| playTone(760, 0.14, "sine"); |
| } else { |
| player.money += 500; |
| addLog(`${player.name} 在免費停車場休息，領取小鎮補助 $500。`, "bonus"); |
| toast("免費停車 +$500", "gold"); |
| } |
| return; |
| } |
|
|
| if (tile.type === "gojail") { |
| await sendToJail(player); |
| return; |
| } |
|
|
| if (tile.type === "tax" || tile.type === "charity") { |
| await payToPot(player, tile.amount, tile.name); |
| return; |
| } |
|
|
| if (tile.type === "bank") { |
| player.money += tile.amount; |
| addLog(`${player.name} 到大富翁銀行領取紅利 $${fmt(tile.amount)}。`, "bonus"); |
| toast(`銀行紅利 +$${fmt(tile.amount)}`, "gold"); |
| playTone(780, 0.1, "sine"); |
| return; |
| } |
|
|
| if (tile.type === "chance" || tile.type === "fate") { |
| if (depth > 2) { |
| addLog("這次卡片沒有再連鎖，直接結束結算。", "info"); |
| return; |
| } |
| await drawCard(tile.type, depth); |
| return; |
| } |
|
|
| if (tile.type === "property" || tile.type === "station" || tile.type === "utility") { |
| await handleProperty(player, tile); |
| } |
| } |
|
|
| async function handleProperty(player, tile) { |
| const ownerId = ownerOf(tile.id); |
| if (ownerId === null) { |
| if (state.auto) { |
| await wait(450); |
| if (state.over) return; |
| const shouldBuy = player.money >= tile.price && player.money - tile.price >= 3500; |
| if (shouldBuy) { |
| buyProperty(player, tile); |
| } else { |
| addLog(`${player.name} 覺得「${tile.name}」太貴，決定先不買。`, "info"); |
| toast(`${player.name} 放棄購買`, ""); |
| } |
| return; |
| } |
| const choice = await promptPurchase(player, tile); |
| if (state.over) return; |
| if (choice === "buy") { |
| buyProperty(player, tile); |
| } else { |
| addLog(`${player.name} 放棄購買「${tile.name}」。`, "info"); |
| } |
| return; |
| } |
|
|
| if (ownerId === player.id) { |
| const level = player.houses[tile.id] || 0; |
| const canUpgrade = tile.type === "property" |
| && ownsFullGroup(player, tile.group) |
| && level < MAX_HOUSES |
| && player.money >= upgradeCost(tile); |
| if (canUpgrade) { |
| if (state.auto) { |
| await wait(350); |
| if (state.over) return; |
| if (player.money - upgradeCost(tile) >= 5000) { |
| upgradeProperty(player, tile); |
| } else { |
| addLog(`${player.name} 保留現金，這次不升級「${tile.name}」。`, "info"); |
| } |
| return; |
| } |
| const choice = await promptUpgrade(player, tile); |
| if (state.over) return; |
| if (choice === "upgrade") { |
| upgradeProperty(player, tile); |
| } else { |
| addLog(`${player.name} 這次不升級「${tile.name}」。`, "info"); |
| } |
| return; |
| } |
| addLog(`${player.name} 回到自己的「${tile.name}」，休息一下。`, "info"); |
| await wait(300); |
| return; |
| } |
|
|
| const owner = state.players[ownerId]; |
| const rent = calcRent(tile, owner, state.dice[0] + state.dice[1]); |
| addLog(`${player.name} 踩到 ${owner.name} 的「${tile.name}」，需付租金 $${fmt(rent)}。`, "rent"); |
| await wait(350); |
| if (state.over) return; |
| const paid = pay(player, owner, rent); |
| if (paid) { |
| toast(`${player.name} 支付租金 $${fmt(rent)}`, "bad"); |
| playTone(240, 0.12, "sawtooth", 0.025); |
| } |
| } |
|
|
| function buyProperty(player, tile) { |
| if (player.money < tile.price) { |
| addLog(`${player.name} 現金不足，無法買下「${tile.name}」。`, "danger"); |
| return; |
| } |
| player.money -= tile.price; |
| player.props.push(tile.id); |
| player.houses[tile.id] = 0; |
| addLog(`${player.name} 買下「${tile.name}」！`, "buy"); |
| toast(`${player.name} 買下 ${tile.name}`, "good"); |
| playTone(690, 0.09, "sine"); |
| if (tile.type === "property" && ownsFullGroup(player, tile.group)) { |
| addLog(`${player.name} 收集完整「${GROUPS[tile.group].label}」色組，租金 ×2！`, "bonus"); |
| toast(`${GROUPS[tile.group].label}色組完成！租金 ×2`, "gold"); |
| } |
| renderBoard(); |
| renderUI(); |
| } |
|
|
| function upgradeProperty(player, tile) { |
| const cost = upgradeCost(tile); |
| if (player.money < cost) { |
| addLog(`${player.name} 現金不足，無法升級「${tile.name}」。`, "danger"); |
| return; |
| } |
| player.money -= cost; |
| const level = (player.houses[tile.id] || 0) + 1; |
| player.houses[tile.id] = level; |
| addLog(`${player.name} 把「${tile.name}」升級到 ${level} 級房屋，租金提升！`, "buy"); |
| toast(`${tile.name} 升級到 ${level} 級`, "good"); |
| playTone(820, 0.1, "triangle"); |
| renderBoard(); |
| renderUI(); |
| } |
|
|
| function pay(from, to, amount) { |
| const total = Math.max(0, Math.round(amount)); |
| const paid = Math.min(from.money, total); |
| from.money -= paid; |
| if (to === "pot") { |
| state.pot += paid; |
| } else if (to && to !== from) { |
| to.money += paid; |
| } |
| const ok = paid >= total; |
| if (!ok) bankrupt(from); |
| return ok; |
| } |
|
|
| async function payToPot(player, amount, label) { |
| const ok = pay(player, "pot", amount); |
| if (ok) { |
| addLog(`${player.name} 支付「${label}」$${fmt(amount)}，彩池增加到 $${fmt(state.pot)}。`, "rent"); |
| toast(`${label} -$${fmt(amount)}`, "bad"); |
| playTone(260, 0.1, "sawtooth", 0.022); |
| renderUI(); |
| } |
| return ok; |
| } |
|
|
| async function sendToJail(player) { |
| if (player.cards.includes("freeJail")) { |
| player.cards = player.cards.filter((card) => card !== "freeJail"); |
| addLog(`${player.name} 使用免獄卡，免去牢獄之災！`, "bonus"); |
| toast("免獄卡發動！", "gold"); |
| playTone(920, 0.12, "sine"); |
| renderUI(); |
| return; |
| } |
| player.pos = 8; |
| player.jailTurns = 1; |
| addLog(`${player.name} 被送進監獄，下一回合暫停。`, "jail"); |
| toast(`${player.name} 被關進監獄`, "bad"); |
| playTone(180, 0.16, "sawtooth", 0.025); |
| renderBoard(); |
| renderUI(); |
| await wait(500); |
| } |
|
|
| async function drawCard(kind, depth) { |
| const player = currentPlayer(); |
| const deck = kind === "chance" ? CHANCE_CARDS : FATE_CARDS; |
| const card = deck[Math.floor(Math.random() * deck.length)]; |
| state.phase = "card"; |
| renderUI(); |
| addLog(`${player.name} 抽到${kind === "chance" ? "機會" : "命運"}卡：「${card.title}」`, "card"); |
| playTone(740, 0.09, "triangle"); |
| await showModal({ |
| kicker: kind === "chance" ? "機會 CHANCE" : "命運 FATE", |
| title: card.title, |
| image: kind === "chance" ? "assets/chance_chest.png" : "assets/fate_cat.png", |
| html: `<p>${card.text}</p><div class="card-effect">${card.effectLabel}</div>`, |
| actions: [{ label: "知道了", value: "ok", primary: true }], |
| dismissible: true, |
| autoClose: 1500, |
| autoCloseOnAuto: true, |
| className: `event-modal ${kind}` |
| }); |
| if (state.over) return; |
| await applyCard(card, player, depth); |
| } |
|
|
| async function applyCard(card, player, depth) { |
| const effect = card.effect; |
| if (effect.type === "gain") { |
| player.money += effect.amount; |
| addLog(`${player.name} 獲得 $${fmt(effect.amount)}。`, "bonus"); |
| toast(`+$${fmt(effect.amount)}`, "gold"); |
| playTone(860, 0.1, "sine"); |
| } else if (effect.type === "payPot") { |
| if (!(await payToPot(player, effect.amount, card.title))) return; |
| } else if (effect.type === "payOpponent") { |
| const opponent = otherPlayer(player); |
| if (!pay(player, opponent, effect.amount)) return; |
| addLog(`${player.name} 支付 ${opponent.name} $${fmt(effect.amount)}。`, "rent"); |
| toast(`支付 ${opponent.name} $${fmt(effect.amount)}`, "bad"); |
| } else if (effect.type === "gainFromOpponent") { |
| const opponent = otherPlayer(player); |
| if (!pay(opponent, player, effect.amount)) return; |
| addLog(`${player.name} 從 ${opponent.name} 獲得 $${fmt(effect.amount)}。`, "bonus"); |
| toast(`+$${fmt(effect.amount)}`, "gold"); |
| } else if (effect.type === "freeJail") { |
| player.cards.push("freeJail"); |
| addLog(`${player.name} 獲得一張免獄卡。`, "bonus"); |
| toast("獲得免獄卡", "gold"); |
| playTone(900, 0.1, "sine"); |
| } else if (effect.type === "repair") { |
| const houseCount = player.props.reduce((sum, id) => sum + (player.houses[id] || 0), 0); |
| if (houseCount === 0) { |
| addLog(`${player.name} 沒有房屋，免付維修費。`, "info"); |
| } else { |
| const total = houseCount * effect.amount; |
| if (!(await payToPot(player, total, card.title))) return; |
| addLog(`${player.name} 共有 ${houseCount} 棟房屋，支付 $${fmt(total)}。`, "rent"); |
| } |
| } else if (effect.type === "moveTo") { |
| await moveTo(effect.amount, true); |
| if (!state.over) await resolveLanding(depth + 1); |
| return; |
| } else if (effect.type === "moveSteps") { |
| await moveSteps(effect.amount, effect.amount > 0); |
| if (!state.over) await resolveLanding(depth + 1); |
| return; |
| } else if (effect.type === "nearestStation") { |
| const target = findNextStation(player.pos); |
| await moveTo(target, true); |
| if (!state.over) await resolveLanding(depth + 1); |
| return; |
| } else if (effect.type === "jail") { |
| await sendToJail(player); |
| return; |
| } |
| renderBoard(); |
| renderUI(); |
| } |
|
|
| async function finishTurn(allowDouble = true) { |
| if (state.over) return; |
| const player = currentPlayer(); |
| const isDouble = allowDouble && state.dice[0] === state.dice[1] && player.jailTurns === 0; |
| state.phase = "ending"; |
| renderUI(); |
| await wait(480); |
| if (state.over) return; |
|
|
| if (isDouble) { |
| addLog(`${player.name} 擲出雙骰，再來一回合！`, "bonus"); |
| state.phase = "idle"; |
| state.busy = false; |
| renderUI(); |
| await beginTurn(true); |
| return; |
| } |
|
|
| state.current = 1 - state.current; |
| if (state.current === 0) { |
| if (state.round >= MAX_ROUNDS) { |
| endByRounds(); |
| return; |
| } |
| state.round += 1; |
| } |
| state.busy = false; |
| await beginTurn(false); |
| } |
|
|
| async function beginTurn(extraTurn = false) { |
| if (state.over) return; |
| state.busy = false; |
| const player = currentPlayer(); |
| state.phase = "idle"; |
| renderUI(); |
| addLog(extraTurn ? `${player.name} 的追加回合。` : `— 第 ${state.round} 回合 · ${player.name} 的回合 —`, "turn"); |
|
|
| if (player.jailTurns > 0) { |
| if (player.cards.includes("freeJail")) { |
| player.cards = player.cards.filter((card) => card !== "freeJail"); |
| player.jailTurns = 0; |
| addLog(`${player.name} 使用免獄卡，直接出獄。`, "bonus"); |
| toast("免獄卡發動！", "gold"); |
| } else { |
| state.phase = "jail"; |
| renderUI(); |
| if (state.auto) { |
| await wait(620); |
| if (state.over) return; |
| if (player.money >= 5000) { |
| pay(player, null, BAIL); |
| player.jailTurns = 0; |
| addLog(`${player.name} 支付 $${fmt(BAIL)} 保釋金，立刻出獄。`, "info"); |
| toast(`${player.name} 保釋出獄`, "gold"); |
| } else { |
| player.jailTurns -= 1; |
| addLog(`${player.name} 現金不足，只能留在監獄一回合。`, "jail"); |
| await wait(400); |
| await finishTurn(false); |
| return; |
| } |
| } else { |
| const choice = await promptJail(player); |
| if (state.over) return; |
| if (choice === "bail" && player.money >= BAIL) { |
| pay(player, null, BAIL); |
| player.jailTurns = 0; |
| addLog(`${player.name} 支付 $${fmt(BAIL)} 保釋金，立刻出獄。`, "info"); |
| toast(`${player.name} 保釋出獄`, "gold"); |
| playTone(720, 0.1, "sine"); |
| } else { |
| player.jailTurns -= 1; |
| addLog(`${player.name} 選擇服刑，暫停一回合。`, "jail"); |
| await wait(350); |
| await finishTurn(false); |
| return; |
| } |
| } |
| } |
| } |
|
|
| state.phase = "idle"; |
| renderUI(); |
| if (state.auto) scheduleAutoRoll(); |
| } |
|
|
| function bankrupt(loser) { |
| if (state.over) return; |
| state.over = true; |
| state.phase = "over"; |
| state.auto = false; |
| clearAutoTimers(); |
| renderUI(); |
| const winner = state.players.find((player) => player.id !== loser.id); |
| addLog(`${loser.name} 現金不足，宣告破產！`, "danger"); |
| showGameOver(winner, `${loser.name} 破產了，${winner.name} 成為 Q版小鎮的大富翁！`); |
| } |
|
|
| function endByRounds() { |
| state.over = true; |
| state.phase = "over"; |
| state.auto = false; |
| clearAutoTimers(); |
| renderUI(); |
| const first = state.players[0]; |
| const second = state.players[1]; |
| const firstWorth = netWorth(first); |
| const secondWorth = netWorth(second); |
| const winner = firstWorth >= secondWorth ? first : second; |
| showGameOver( |
| winner, |
| `30 回合結束，以總身家決勝（${first.name} $${fmt(firstWorth)}／${second.name} $${fmt(secondWorth)}）。` |
| ); |
| } |
|
|
| function showGameOver(winner, reason) { |
| if (state.gameOverShown) return; |
| state.gameOverShown = true; |
| state.over = true; |
| state.phase = "over"; |
| state.auto = false; |
| clearAutoTimers(); |
| renderUI(); |
| const rows = state.players.map((player) => ` |
| <div class="final-row"> |
| <img src="${player.avatar}" alt="${player.name}頭像"> |
| <b>${player.name}</b> |
| <span>$${fmt(netWorth(player))}</span> |
| </div> |
| `).join(""); |
| addLog(`遊戲結束：${winner.name} 獲勝！`, "bonus"); |
| playWin(); |
| showModal({ |
| kicker: "GAME OVER", |
| title: `${winner.name} 獲勝！`, |
| image: winner.avatar, |
| html: `<p>${reason}</p><div class="final-scores">${rows}</div>`, |
| actions: [{ label: "再玩一次", value: "restart", primary: true }], |
| dismissible: false, |
| className: "gameover-modal" |
| }).then((value) => { |
| if (value === "restart") window.location.reload(); |
| }); |
| } |
|
|
| function showModal(options = {}) { |
| if (state.modalOpen) closeModal(null); |
| const { |
| title = "", |
| kicker = "", |
| image = "", |
| html = "", |
| actions = [{ label: "知道了", value: "ok", primary: true }], |
| dismissible = true, |
| autoClose = 0, |
| autoCloseOnAuto = false, |
| className = "" |
| } = options; |
|
|
| state.modalOpen = true; |
| state.modalAutoCloseable = Boolean(autoCloseOnAuto); |
| state.modalAutoCloseDelay = autoClose || 1200; |
| clearTimeout(state.modalTimer); |
| state.modalTimer = null; |
| els.modal.classList.remove("is-hidden"); |
| els.modal.classList.toggle("no-dismiss", !dismissible); |
| const card = els.modal.querySelector(".modal-card"); |
| card.className = `modal-card ${className}`.trim(); |
| els.modalBody.innerHTML = ` |
| ${image ? `<div class="modal-art"><img src="${image}" alt=""></div>` : ""} |
| ${kicker ? `<div class="modal-kicker">${kicker}</div>` : ""} |
| <h2 id="modalTitle">${title}</h2> |
| ${html} |
| `; |
| const actionWrap = document.createElement("div"); |
| actionWrap.className = "modal-actions"; |
| actions.forEach((action) => { |
| const button = document.createElement("button"); |
| button.type = "button"; |
| button.className = action.primary ? "primary" : action.secondary ? "secondary" : "ghost"; |
| button.textContent = action.label; |
| button.addEventListener("click", () => closeModal(action.value)); |
| actionWrap.appendChild(button); |
| }); |
| els.modalBody.appendChild(actionWrap); |
|
|
| return new Promise((resolve) => { |
| state.modalResolve = resolve; |
| if (autoClose && state.auto) scheduleModalAutoClose(autoClose); |
| }); |
| } |
|
|
| function scheduleModalAutoClose(ms) { |
| clearTimeout(state.modalTimer); |
| state.modalTimer = setTimeout(() => { |
| state.modalTimer = null; |
| if (state.modalOpen) closeModal("ok"); |
| }, Math.max(250, Math.round(ms / state.speed))); |
| } |
|
|
| function closeModal(value) { |
| if (!state.modalOpen) return; |
| state.modalOpen = false; |
| clearTimeout(state.modalTimer); |
| state.modalTimer = null; |
| els.modal.classList.add("is-hidden"); |
| const resolve = state.modalResolve; |
| state.modalResolve = null; |
| if (resolve) resolve(value); |
| setTimeout(() => { |
| if (state.auto && !state.over && !state.modalOpen && state.phase === "idle") scheduleAutoRoll(); |
| }, 0); |
| } |
|
|
| function openRules() { |
| if (state.busy) { |
| toast("等這一回合結束再看玩法。"); |
| return; |
| } |
| const wasAuto = state.auto; |
| if (wasAuto) { |
| state.auto = false; |
| clearAutoTimers(); |
| renderUI(); |
| } |
| const chips = ["pink", "blue", "green", "purple"].map((key) => ( |
| `<span class="group-chip" style="--chip:${GROUPS[key].color};--chip-soft:${GROUPS[key].soft}">${GROUPS[key].label}</span>` |
| )).join(""); |
| const html = ` |
| <div class="rules-grid"> |
| <div class="rule-row"><span class="rule-icon">🎲</span><div><b>擲骰前進</b>：兩顆骰子相加就是步數。經過起點領 $2,000，擲出雙骰可以再來一回合。</div></div> |
| <div class="rule-row"><span class="rule-icon">🏠</span><div><b>買地收租</b>：踩到無主地產可以買下；對手踩到就要付租金。收集完整同色 3 塊地，租金 ×2。</div></div> |
| <div class="rule-row"><span class="rule-icon">🔨</span><div><b>升級房屋</b>：擁有完整色組後，踩到自己的地產可以升級，最多 3 級，租金會愈來愈高。</div></div> |
| <div class="rule-row"><span class="rule-icon">🚉</span><div><b>車站與公用</b>：車站租金依擁有的車站數量增加；公用事業租金 = 骰子點數 × 倍率。</div></div> |
| <div class="rule-row"><span class="rule-icon">🎁</span><div><b>機會與命運</b>：抽卡可能加錢、罰款、移動或拿到免獄卡。稅金與捐款會進入彩池。</div></div> |
| <div class="rule-row"><span class="rule-icon">🚨</span><div><b>監獄</b>：進監獄後暫停一回合，可以付 $1,500 保釋金立刻出獄。免獄卡會自動使用。</div></div> |
| <div class="rule-row"><span class="rule-icon">🏆</span><div><b>勝利條件</b>：讓對手破產，或 30 回合後以總身家（現金＋地產＋房屋）決勝。</div></div> |
| <div class="rule-row"><span class="rule-icon">🤖</span><div><b>自動代玩</b>：按右側「自動代玩」讓兩位角色自己決策，可調 1×～3× 速度，隨時停止接手。</div></div> |
| </div> |
| <div class="group-legend">${chips}</div> |
| <p style="font-size:10px;color:#a1845d;margin-top:10px;">圖像由 Z-Image-Turbo OpenVINO INT4 生成，統一 Q 版黏土玩具風格，尺寸 256×256。</p> |
| `; |
| showModal({ |
| kicker: "HOW TO PLAY", |
| title: "Q版小鎮玩法", |
| html, |
| actions: [{ label: "開始玩", value: "ok", primary: true }], |
| dismissible: true, |
| className: "rules-modal" |
| }).then(() => { |
| if (wasAuto && !state.over) { |
| state.auto = true; |
| renderUI(); |
| maybeAuto(); |
| } |
| }); |
| } |
|
|
| function openRestart() { |
| const wasAuto = state.auto; |
| if (wasAuto) { |
| state.auto = false; |
| clearAutoTimers(); |
| renderUI(); |
| } |
| showModal({ |
| kicker: "NEW GAME", |
| title: "重新開始？", |
| html: "<p>目前的小鎮進度會消失，確定要重新開始嗎？</p>", |
| actions: [ |
| { label: "繼續玩", value: "cancel" }, |
| { label: "重新開始", value: "restart", primary: true } |
| ], |
| dismissible: true |
| }).then((value) => { |
| if (value === "restart") { |
| window.location.reload(); |
| } else if (wasAuto && !state.over) { |
| state.auto = true; |
| renderUI(); |
| maybeAuto(); |
| } |
| }); |
| } |
|
|
| function bindEvents() { |
| els.rollBtn.addEventListener("click", () => rollDice()); |
| els.autoBtn.addEventListener("click", () => toggleAuto()); |
| els.speedSelect.addEventListener("change", () => { |
| const next = Number(els.speedSelect.value); |
| state.speed = [1, 2, 3].includes(next) ? next : 2; |
| savePrefs(); |
| renderUI(); |
| if (state.auto) maybeAuto(); |
| }); |
| els.soundBtn.addEventListener("click", () => { |
| state.sound = !state.sound; |
| updateSoundButton(); |
| savePrefs(); |
| if (state.sound) { |
| ensureAudio(); |
| playTone(660, 0.08, "sine"); |
| } |
| }); |
| els.rulesBtn.addEventListener("click", openRules); |
| els.restartBtn.addEventListener("click", openRestart); |
| els.clearLogBtn.addEventListener("click", () => { |
| els.logList.innerHTML = ""; |
| addLog("事件紀錄已清除。", "info"); |
| }); |
| els.modalClose.addEventListener("click", () => closeModal(null)); |
| els.modal.addEventListener("click", (event) => { |
| if (event.target === els.modal && !els.modal.classList.contains("no-dismiss")) { |
| closeModal(null); |
| } |
| }); |
| document.addEventListener("keydown", (event) => { |
| if (event.code === "Escape" && state.modalOpen) { |
| if (!els.modal.classList.contains("no-dismiss")) closeModal(null); |
| return; |
| } |
| const tag = event.target && event.target.tagName; |
| if (["INPUT", "SELECT", "TEXTAREA", "BUTTON"].includes(tag)) return; |
| if (event.code === "Space" && !state.modalOpen && state.phase === "idle" && !state.auto && !state.over) { |
| event.preventDefault(); |
| rollDice(); |
| } |
| }); |
| } |
|
|
| function resetGame() { |
| clearAutoTimers(); |
| if (state.modalOpen) closeModal(null); |
| state.players = makePlayers(); |
| state.current = 0; |
| state.round = 1; |
| state.phase = "idle"; |
| state.auto = false; |
| state.busy = false; |
| state.over = false; |
| state.pot = 0; |
| state.dice = [1, 1]; |
| state.rolled = false; |
| state.pending = null; |
| state.shownCurrent = -1; |
| state.gameOverShown = false; |
| els.logList.innerHTML = ""; |
| els.actionPanel.classList.add("is-hidden"); |
| els.actionPanel.innerHTML = ""; |
| els.boardCenter.classList.remove("has-action"); |
| els.newsText.textContent = "歡迎來到 Q版小鎮！"; |
| renderBoard(); |
| renderUI(); |
| addLog("歡迎來到 Q版小鎮！收集色組、升級房屋，讓對手破產。", "info"); |
| addLog("按「自動代玩」可以讓阿富和小滿自己玩。", "info"); |
| centerBoardScroll(); |
| void beginTurn(false); |
| } |
|
|
| function centerBoardScroll() { |
| if (!els.boardScroll) return; |
| requestAnimationFrame(() => { |
| if (els.boardScroll.scrollWidth > els.boardScroll.clientWidth) { |
| els.boardScroll.scrollLeft = (els.boardScroll.scrollWidth - els.boardScroll.clientWidth) / 2; |
| } |
| }); |
| } |
|
|
| function init() { |
| loadPrefs(); |
| buildPlayerCards(); |
| buildBoard(); |
| bindEvents(); |
| resetGame(); |
| window.addEventListener("resize", centerBoardScroll); |
| } |
|
|
| init(); |
| })(); |
|
|
