| <!doctype html> |
| <html lang="zh-Hant"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> |
| <title>大富翁：Q版小鎮</title> |
| <meta name="description" content="Q版大富翁小鎮：雙人對戰、人物頭像、自動代玩、機會命運、車站與房屋升級。"> |
| <meta name="theme-color" content="#fff6e5"> |
| <link rel="icon" type="image/png" href="assets/favicon.png"> |
| <link rel="apple-touch-icon" href="assets/favicon.png"> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body> |
| <div class="sky-deco" aria-hidden="true"> |
| <span class="cloud cloud-a"></span> |
| <span class="cloud cloud-b"></span> |
| <span class="cloud cloud-c"></span> |
| <span class="sun"></span> |
| <span class="hill hill-a"></span> |
| <span class="hill hill-b"></span> |
| </div> |
|
|
| <header class="topbar"> |
| <a class="brand" href="./" aria-label="大富翁 Q版小鎮 首頁"> |
| <img class="brand-mascot" src="assets/coin_mascot.png" alt=""> |
| <span class="brand-text"> |
| <span class="brand-kicker">HELLOSUN PRESENTS</span> |
| <span class="brand-title">大富翁 <em>Q版小鎮</em></span> |
| </span> |
| </a> |
| <div class="top-actions"> |
| <button class="icon-btn" id="soundBtn" type="button" aria-label="開啟音效" aria-pressed="false" title="音效">🔇</button> |
| <button class="ghost-btn" id="rulesBtn" type="button">玩法</button> |
| <button class="ghost-btn" id="restartBtn" type="button">重新開始</button> |
| </div> |
| </header> |
|
|
| <main class="game-layout"> |
| <section class="board-panel" aria-label="遊戲棋盤區"> |
| <div class="board-scroll"> |
| <div class="board" id="board"> |
| <div class="board-center" id="boardCenter"> |
| <div class="center-top"> |
| <div class="town-frame"> |
| <img src="assets/town_center.png" alt="Q版小鎮立體模型"> |
| </div> |
| <div class="center-heading"> |
| <span class="eyebrow">DAFUWENG TOWN</span> |
| <h1>Q版小鎮</h1> |
| <span class="round-pill">第 <b id="roundNum">1</b> / 30 回合</span> |
| </div> |
| </div> |
|
|
| <div class="dice-zone" aria-live="polite"> |
| <div class="die" id="die1" aria-label="第一顆骰子"></div> |
| <div class="die" id="die2" aria-label="第二顆骰子"></div> |
| <span class="dice-sum" id="diceSum">—</span> |
| </div> |
|
|
| <div class="turn-display"> |
| <img class="turn-avatar" id="centerAvatar" src="assets/avatar_afei.png" alt=""> |
| <span class="turn-copy"> |
| <small>現在輪到</small> |
| <b id="centerName">阿富</b> |
| </span> |
| <span class="turn-tag" id="turnTag">P1</span> |
| </div> |
|
|
| <button class="roll-btn" id="rollBtn" type="button">🎲 擲骰子</button> |
| <p class="center-hint" id="centerHint">按一下擲骰子，開始小鎮冒險。</p> |
|
|
| <div class="action-panel is-hidden" id="actionPanel" aria-live="polite"></div> |
|
|
| <div class="center-news" id="centerNews"> |
| <span aria-hidden="true">📣</span> |
| <span id="newsText">歡迎來到 Q版小鎮！</span> |
| </div> |
|
|
| <div class="center-stats"> |
| <span>💰 彩池 <b id="potValue">$0</b></span> |
| <span>🏆 破產或 30 回合決勝</span> |
| </div> |
| </div> |
| <div class="tiles-layer" id="tilesLayer"></div> |
| </div> |
| </div> |
| <div class="board-caption"> |
| <span>經過起點領 $2,000</span> |
| <span>雙骰可再擲一次</span> |
| <span>完整色組租金 ×2</span> |
| <span class="mobile-hint">左右滑動棋盤</span> |
| </div> |
| </section> |
|
|
| <aside class="sidebar" aria-label="玩家與控制面板"> |
| <section class="card current-card"> |
| <div class="section-label">當前玩家 <span class="live-dot" aria-hidden="true"></span></div> |
| <div class="current-hero"> |
| <div class="avatar-ring" id="currentRing"> |
| <img id="currentAvatar" src="assets/avatar_afei.png" alt="阿富頭像"> |
| </div> |
| <div class="current-copy"> |
| <h2 id="currentName">阿富</h2> |
| <div class="current-money" id="currentMoney">$25,000</div> |
| <p id="currentSub">📍 起點 · 🏠 0 處地產</p> |
| </div> |
| </div> |
| <div class="mini-stats"> |
| <div><span>現金</span><b id="currentCash">$25,000</b></div> |
| <div><span>地產</span><b id="currentProps">0</b></div> |
| <div><span>卡片</span><b id="currentCards">0</b></div> |
| </div> |
| </section> |
|
|
| <section class="players-row" id="playersRow" aria-label="兩位玩家"></section> |
|
|
| <section class="card control-card"> |
| <button class="auto-btn" id="autoBtn" type="button" aria-pressed="false"> |
| <span class="auto-icon" id="autoIcon">▶</span> |
| <span class="auto-copy"> |
| <b id="autoTitle">自動代玩</b> |
| <small id="autoSub">讓小鎮自己跑起來</small> |
| </span> |
| </button> |
| <div class="control-row"> |
| <label class="speed-label" for="speedSelect">速度 |
| <select id="speedSelect"> |
| <option value="1">1×</option> |
| <option value="2" selected>2×</option> |
| <option value="3">3×</option> |
| </select> |
| </label> |
| <span class="control-note">代玩中仍可隨時停止</span> |
| </div> |
| </section> |
|
|
| <section class="card log-card"> |
| <div class="log-head"> |
| <h2>事件紀錄</h2> |
| <button class="text-btn" id="clearLogBtn" type="button">清除</button> |
| </div> |
| <ul class="log-list" id="logList" aria-live="polite"></ul> |
| </section> |
|
|
| <footer class="credits"> |
| 圖像由 <a href="https://huggingface.co/HelloSun/Z-Image-Turbo-OpenVINO-INT4" target="_blank" rel="noreferrer">Z-Image-Turbo OpenVINO INT4</a> 生成 · 256×256 |
| </footer> |
| </aside> |
| </main> |
|
|
| <div class="toast" id="toast" role="status" aria-live="polite"></div> |
|
|
| <div class="modal is-hidden" id="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle"> |
| <div class="modal-card"> |
| <button class="modal-close" id="modalClose" type="button" aria-label="關閉">×</button> |
| <div id="modalBody"></div> |
| </div> |
| </div> |
|
|
| <noscript> |
| <div class="noscript">這個遊戲需要 JavaScript 才能遊玩。</div> |
| </noscript> |
| <script src="game.js"></script> |
| </body> |
| </html> |
|
|
