記分板
仿真翻頁記分板，為比賽和遊戲即時計分
什麼是記分板？
記分板是體育賽事和競技遊戲中用來記錄雙方得分的專用工具。這款線上記分板模擬了真實翻頁式記分板的外觀和翻頁動畫效果，讓您在桌球、羽毛球、籃球、桌遊、知識競賽等場景中獲得沉浸式的計分體驗。
支援紅藍、紅黃等多種配色方案，可新增最多 6 支隊伍，支援一鍵全螢幕投影到大螢幕。所有資料自動儲存在瀏覽器本地，重新整理頁面也不會遺失比分記錄。
使用方法
使用方法
- 選擇配色方案：紅藍、紅黃等
- 點選隊伍名稱進行編輯
- 使用 + / - 按鈕調整分數
- 點選全螢幕按鈕投影到大螢幕
顯示技巧
- 在活動開始前使用全螢幕模式，以便從觀眾位置能看清隊名、顏色和分數。
- 如果分數具有官方意義，請保留單獨的書面或系統記錄，以防瀏覽器標籤關閉或本地儲存被清除。
使用場景
技術原理
記分板作為一個輕量的客戶端狀態機運作：每支隊伍是一個包含名稱、分數和顏色欄位的物件，整個隊伍名單在每次變更時以 JSON 字串的形式持久化到 window.localStorage。由於 localStorage 是同步的，且作用範圍限定於來源加上瀏覽器設定檔，因此同一個分頁重新整理後仍可保留，但不同的瀏覽器或無痕視窗會從空白名單開始。 翻頁式數字動畫採用純 CSS 實現：每個數字由兩半圍繞 X 軸旋轉的區塊組成，分數變更時替換可見數字，同時以 300-400 毫秒的 transform: rotateX 過渡動畫模擬翻頁效果。由於動畫由本地狀態驅動而非網路幀，即使場地 Wi-Fi 在比賽中途斷線，顯示仍然持續運作。全螢幕展示使用標準 Fullscreen API（element.requestFullscreen、document.exitFullscreen），讓記分板填滿投影機或電視螢幕，不顯示瀏覽器介面。 多分頁同步依賴 storage 事件：當某個分頁的 localStorage 鍵值發生變更時，同一來源的其他分頁都會收到 StorageEvent 並根據更新後的 JSON 重新渲染。這使得裁判手機和場邊筆電無需任何後端即可保持同步，因為資料從未離開裝置。
- 狀態持久化：每次分數變更時使用 window.localStorage.setItem 儲存 JSON 序列化的隊伍名單，作用範圍限於來源和瀏覽器設定檔
- 翻頁動畫：兩個 CSS 偽元素半區塊以 transform: rotateX 進行約 300-400 毫秒的動畫；無需 JS 動畫迴圈
- Fullscreen API：element.requestFullscreen() / document.exitFullscreen() 搭配 fullscreenchange 事件追蹤 Esc 鍵退出
- 多分頁同步：window.addEventListener('storage', handler) 在鍵值變更時於其他分頁觸發
- 分數下限：分數被限制在零以上，避免休閒比賽中減號按鈕產生負數結果
- 色彩主題：CSS 自訂屬性（--team-a、--team-b）交換色盤，無需重新渲染 DOM 樹
- 分數上限依循當前規則設定，例如籃球無上限，桌球以 11 分結束並有 2 分平手規則
範例
籃球中場記分板
A 隊：Lakers 顏色：紅
B 隊：Celtics 顏色：藍
Q1: 22 - 18
Q2: 41 - 38 (中場)
Q3: 60 - 55
Q4 終場: 82 - 76
主題：紅藍配色，於體育館投影機全螢幕顯示網球依盤計分
第 1 盤：6 - 4 (A 選手勝)
第 2 盤：3 - 6 (B 選手勝)
第 3 盤：7 - 5 (A 選手勝)
結果：A 選手以 2-1 獲勝
提示：將隊名改為選手姓名，每場比賽之間重設益智之夜，4 隊賽制
第 1 輪：Team Quokka 8、Team Otter 6、Team Bear 7、Team Wolf 5
第 2 輪：14、13、12、10
第 3 輪：21、22、17、16
結果：30、31、25、23 -> Otter 獲勝
最多支援 6 隊，比分儲存於 localStorage桌球 11 分制
比分順序：1-0, 2-0, 2-1, 3-1, 3-2, 3-3, 4-3, ..., 10-9
10-10 平手後：須領先 2 分
結果：12 - 10
主題：紅黃配色，適合大螢幕高對比觀看
重設比分時保留選手姓名以便下一局使用常見問題
適合哪些運動？
原本是為桌球與羽球設計的翻牌式計分（突然變化、粗體大字）。同樣適合桌遊、知識競賽之夜、籃球、排球、電競賽事、課堂競賽，以及任何需要快速更新分數的場合。
可以自訂隊伍名稱與顏色嗎？
可以。直接點選隊伍名稱即可編輯，並能從預設配色（紅藍、紅黃等）中挑選符合活動氣氛的主題。沒有隊徽或圖片上傳功能。
翻牌動畫是怎麼運作的？
使用 CSS 3D 變形動畫模擬機械翻牌，翻動時間夠短（數百毫秒），不會拖慢快速計分。如果你偏好即時更新，可以在設定裡關閉動畫。
重新整理後分數會保留嗎？
會。目前的設定（隊伍名稱、分數、顏色）每次變更都會存到 localStorage，所以在同一個瀏覽器中重新整理可以保留分數。換瀏覽器或清除網站資料則會回到 0-0。
可以投影到投影機或大螢幕嗎？
可以。計分板支援全螢幕模式，能投放到投影機、電視或外接螢幕。分數會存在 localStorage，同一個瀏覽器中重新整理也不會掉。
支援盤/局比分（例如網球）嗎？
部分版本支援，可定義「N 盤幾勝」結構，每盤結束時重置每分計數。較簡單的版本只記錄總分。請依運動種類選擇合適的模式。
會上傳任何東西嗎？
不會。計分板完全在瀏覽器內運作，分數只存在分頁中（必要時也存 localStorage），不會傳給任何伺服器。