多款 HTML5 體育小遊戲合集 - 簡單、有趣、免安裝!
https://kaigiii.github.io/Super-Epic-Universe-Level-Sports-Game/
| 遊戲 | 簡介 | 連結 |
|---|---|---|
| 🏀 籃球遊戲 | 極簡籃球投籃遊戲,考驗你的準確度 | 開始遊戲 |
| ⚽ 足球遊戲 | 經典足球小遊戲 | 開始遊戲 |
| 🏐 排球遊戲 | HTML5 2D 排球,單人對戰電腦 | 開始遊戲 |
| 🎱 撞球遊戲 | 經典撞球台球遊戲 | 開始遊戲 |
| 🏓 乒乓球對戰 | 🆕 線上雙人即時對戰,透過 WebSocket 連線 | 開始遊戲 |
| ♟️ 西洋棋 | 簡化規則,雙方輪流走子,吃子加分 | 開始遊戲 |
- ✨ 純 HTML5 + CSS + JavaScript 開發
- 📱 響應式設計,支援多種裝置
- 🎮 無需安裝,開啟網頁即可遊玩
- 🌐 支援線上多人即時對戰(WebSocket)
- 🔧 持續優化與更新
- 📊 排行榜系統(支持匿名和登入用戶)
- 🔐 用戶認證系統(JWT)
- 💾 SQLite 數據庫存儲
- 前端: HTML5 Canvas, JavaScript (ES6+), CSS3
- 後端: Node.js, Express, WebSocket (ws)
- 數據庫: SQLite (better-sqlite3)
- 認證: JWT, bcryptjs
- CI/CD: GitHub Actions
- 部署: GitHub Pages (前端) + Render (後端)
- 代碼品質: ESLint, Stylelint, HTML Validate
- 測試: Lighthouse CI, Pa11y (無障礙性測試)
# Clone 專案
git clone https://github.com/kaigiii/Super-Epic-Universe-Level-Sports-Game.git
# 進入專案目錄
cd Super-Epic-Universe-Level-Sports-Game
# 啟動所有服務(後端 + 前端)
./scripts/start.sh
# 或手動啟動:
# 1. 啟動後端伺服器
cd server && npm install && npm start
# 2. 啟動前端伺服器(新終端)
python -m http.server 8000啟動後訪問:
- 🏠 主頁: http://localhost:8000/
- 🏀 籃球: http://localhost:8000/games/basketball/
- ⚽ 足球: http://localhost:8000/games/soccer/
- 🏐 排球: http://localhost:8000/games/volleyball/
- 🎱 撞球: http://localhost:8000/games/Billiards/
- 🏓 乒乓球: http://localhost:8000/games/pingpong/
- ♟️ 西洋棋: http://localhost:8000/games/chess/
- 🔐 登入/註冊: http://localhost:8000/pages/auth.html
- 🏆 排行榜: http://localhost:8000/pages/leaderboard.html
./scripts/stop.shSuper-Epic-Universe-Level-Sports-Game/
├── assets/ # 共用資源
│ ├── base-path.js # GitHub Pages 路徑處理
│ ├── common.css # 通用樣式
│ └── game-api.js # 遊戲 API 工具
├── scripts/ # 腳本檔案
│ ├── start.sh # 啟動腳本
│ └── stop.sh # 停止腳本
├── games/ # 遊戲資料夾
│ ├── basketball/ # 籃球遊戲
│ ├── soccer/ # 足球遊戲
│ ├── volleyball/ # 排球遊戲
│ ├── Billiards/ # 撞球遊戲
│ ├── pingpong/ # 線上乒乓球對戰
│ └── chess/ # 西洋棋遊戲
├── pages/ # 頁面資料夾
│ ├── auth.html # 登入/註冊頁面
│ └── leaderboard.html # 排行榜頁面
├── server/ # 後端伺服器
│ ├── server.js # Express + WebSocket 伺服器
│ ├── db.js # SQLite 數據庫模組
│ ├── package.json # 依賴配置
│ └── data/ # 數據庫文件目錄
├── index.html # 主頁
├── render.yaml # Render 部署配置
└── README.md # 專案說明
支援線上雙人即時對戰,透過 WebSocket 連線:
- 配對系統:自動配對等待中的玩家
- 房間管理:每個對戰創建獨立房間
- 即時同步:遊戲狀態即時同步到雙方
- 斷線處理:自動處理玩家離線情況
客戶端 → 伺服器:
// 尋找配對
{ type: 'findMatch' }
// 準備開始
{ type: 'ready' }
// 更新球拍位置
{ type: 'paddleMove', y: 250 }伺服器 → 客戶端:
// 等待配對
{ type: 'waiting', message: '...' }
// 分配玩家編號
{ type: 'playerAssigned', playerNum: 1, roomId: 'room_xxx' }
// 房間準備就緒
{ type: 'roomReady', message: '...' }
// 遊戲開始
{ type: 'gameStart', state: {...} }
// 遊戲狀態更新
{ type: 'gameState', state: {...} }
// 遊戲結束
{ type: 'gameEnd', message: '...', finalScore: {...} }- 註冊/登入:使用 JWT token 認證
- 密碼加密:使用 bcrypt 加密存儲
- 自動提交分數:已登入用戶自動記錄分數
- 匿名支持:未登入用戶也可以提交分數(顯示為「匿名玩家」)
POST /api/auth/register- 註冊新用戶POST /api/auth/login- 登入GET /api/auth/me- 獲取當前用戶信息(需要認證)
- 自動提交:所有遊戲自動提交分數(無需手動點擊)
- 匿名支持:未登入用戶也可以參與排行榜
- 個人記錄:已登入用戶可查看個人最佳記錄
- 多遊戲支持:每個遊戲獨立的排行榜
POST /api/leaderboard/submit- 提交分數(支持匿名)GET /api/leaderboard/:game- 獲取特定遊戲排行榜GET /api/leaderboard- 獲取所有遊戲排行榜GET /api/leaderboard/user/:userId- 獲取用戶個人記錄
Render 部署包含:
- ✅ 後端服務器(Node.js + Express + WebSocket)
- ✅ 資料庫(SQLite,需要持久化磁盤)
前端部署:
- ✅ GitHub Pages(靜態 HTML/CSS/JS 文件)
為什麼前端不部署在 Render?
- Render 主要用於動態服務(Node.js、Python 等)
- 前端是靜態文件,GitHub Pages 免費且更適合
- 分離部署可以降低成本和提高性能
👉 完整的 Render 部署步驟請參考:RENDER_DEPLOYMENT.md
- 推送到 GitHub
- 在 GitHub 倉庫設置中啟用 GitHub Pages
- 選擇
master分支作為源 - 訪問
https://kaigiii.github.io/Super-Epic-Universe-Level-Sports-Game/
在 Render 部署時,需要在環境變數中設置以下值:
必需環境變數:
-
JWT_SECRET
- 用途:JWT token 簽名密鑰
- 生成方式:使用隨機字符串生成器或
openssl rand -base64 32 - 範例:
your-super-secret-jwt-key-change-this-in-production
-
SESSION_SECRET
- 用途:Session 加密密鑰
- 生成方式:使用隨機字符串生成器或
openssl rand -base64 32 - 範例:
your-super-secret-session-key-change-this-in-production
-
NODE_ENV
- 用途:設置為生產環境
- 值:
production
可選環境變數:
- DATA_DIR(可選)
- 用途:SQLite 數據庫文件存儲目錄
- 預設值:
server/data(本地開發) - Render 部署:設置為
/data(配合持久化磁盤使用)
- 登入 Render Dashboard
- 選擇你的 Web Service
- 進入 "Environment" 標籤
- 點擊 "Add Environment Variable"
- 添加上述環境變數
SQLite 數據庫
本專案使用 SQLite 作為數據庫,簡單且無需額外配置。
數據庫結構:
- users 表:儲存使用者帳號資料(id, username, password, avatar, created_at)
- leaderboard 表:儲存排行榜數據(id, user_id, username, game, score, timestamp)
數據庫文件位置:
- 本地開發:
server/data/game.db - Render 部署:由
DATA_DIR環境變數決定(預設為server/data/game.db)
本地開發環境:
數據庫文件會自動創建在 server/data/game.db。首次運行時會自動初始化表結構。
Render 部署環境:
每次部署或重啟服務時,文件系統會被重置。
資料庫存儲方案:
- 在 Render Dashboard 中,選擇你的 Web Service
- 進入 "Settings" 標籤
- 找到 "Disks" 部分,點擊 "Add Disk"
- 設置:
- Mount Path:
/data - Size: 至少 1GB
- Mount Path:
- 在環境變數中設置:
- Key:
DATA_DIR - Value:
/data
- Key:
- 保存並重新部署服務
注意: Render 免費方案不包含持久化磁盤,需要付費方案(約 $7/月起)。
- 不設置持久化磁盤
- 不設置
DATA_DIR環境變數(使用預設值server/data) - 接受數據會在重啟後丟失的情況
適合場景: 測試、演示、學習用途
詳細說明請參考:RENDER_DEPLOYMENT.md
為什麼選擇 SQLite?
- ✅ 簡單:無需額外配置,單一文件數據庫
- ✅ 輕量:適合中小型應用
- ✅ 快速:本地文件系統,查詢速度快
- ✅ 無需額外服務:不需要單獨的數據庫服務器
- ✅ 易於備份:只需備份
.db文件
- 將代碼推送到 GitHub
- 在 Render 中創建新的 Web Service
- 連接 GitHub 倉庫
- 設置環境變數
- 設置構建命令:
cd server && npm install - 設置啟動命令:
cd server && node server.js - 添加持久化磁盤(掛載到
/data) - 部署!
數據丟失問題:
如果發現數據在重啟後丟失:
- 檢查持久化磁盤:確認已在 Render Dashboard 中設置持久化磁盤
- 檢查環境變數:確認
DATA_DIR環境變數設置為/data - 檢查數據庫文件:確認
/data/game.db文件存在 - 查看日誌:檢查服務日誌中是否有數據庫相關錯誤
SQLite 相關問題:
如果遇到數據庫錯誤:
- 權限問題:確保數據庫文件有讀寫權限
- 文件鎖定:SQLite 使用文件鎖,確保沒有多個進程同時寫入
- 磁盤空間:檢查持久化磁盤是否有足夠空間
環境變數問題:
如果環境變數未生效:
- 確認在 Render Dashboard 中正確設置
- 重啟服務以應用新的環境變數
- 檢查變數名稱是否正確(區分大小寫)
-
永遠不要將敏感信息提交到 Git
- 使用
.gitignore排除.env和數據文件 - 使用環境變數存儲密鑰
- 使用
-
使用強密碼
- JWT_SECRET 和 SESSION_SECRET 應該至少 32 字符
- 使用隨機生成器生成
-
HTTPS
- Render 自動提供 HTTPS
- 確保
NODE_ENV=production以啟用安全 cookie
-
定期備份數據
- SQLite 數據庫文件(
game.db)可以直接備份 - 如果使用持久化磁盤,可以通過 Render Dashboard 下載數據庫文件
- 建議定期導出數據庫文件作為備份
- SQLite 數據庫文件(
- 使用 60 FPS 更新頻率(多人遊戲)
- 伺服器端進行遊戲邏輯計算
- 客戶端僅負責渲染和輸入
- 定期清理過期房間(每分鐘)
- SQLite 索引優化查詢性能
本專案採用 MIT 授權條款
本專案採用 MIT 授權條款
⭐ 如果你喜歡這個專案,請給個 Star!
📅 2025-12-18 (13b728f)
- 變更: force push: 更新內容
- 作者: xiaojunjun
- 修改檔案:
assets/thumbs/Billiards.pngassets/thumbs/basketball.pngassets/thumbs/chess.pngassets/thumbs/chinese-chess.pngassets/thumbs/hide-and-seek-at-night.pngassets/thumbs/hide-and-seek.pngassets/thumbs/ping-pong.pngassets/thumbs/soccer.pngassets/thumbs/table-tennis.pngassets/thumbs/volleyball.png
📅 2025-12-17 (ed31f58)
- 變更: fix(profile): persist client top-up in localStorage to avoid server reload reverting UI; clear override on server redeem
- 作者: xiaojunjun
- 修改檔案:
pages/profile.js
📅 2025-12-17 (959f339)
- 變更: chore(images): add topup-qr.jpg
- 作者: xiaojunjun
- 修改檔案:
assets/images/topup-qr.jpg
📅 2025-12-17 (d929734)
- 變更: feat(profile): make top-up purchase update coins and notify like redeem
- 作者: xiaojunjun
- 修改檔案:
pages/profile.js
📅 2025-12-17 (64894e4)
- 變更: fix(profile): prefer topup-qr.jpg and fallback to png for modal images
- 作者: xiaojunjun
- 修改檔案:
pages/profile.js
📅 2025-12-17 (0b3d80e)
- 變更: feat(profile): use page gradient for topup modal; support image (../assets/images/topup-qr.png) and add placeholder README
- 作者: xiaojunjun
- 修改檔案:
assets/images/topup-qr.png.READMEpages/profile.htmlpages/profile.js
📅 2025-12-17 (0167b9a)
- 變更: style(profile): update top-up modal background, overlay blur and button gradient
- 作者: xiaojunjun
- 修改檔案:
pages/profile.html
📅 2025-12-17 (3097bee)
- 變更: feat(profile): add top-up (儲值) button and modal UI; simulate purchase
- 作者: xiaojunjun
- 修改檔案:
pages/profile.htmlpages/profile.js
📅 2025-12-17 (6ebe536)
- 變更: debug(header): log user-profile clicks and safe logout check
- 作者: xiaojunjun
- 修改檔案:
index.js
📅 2025-12-17 (271a1ed)
- 變更: Fix(header): use base-path getFullPath for profile navigation on GitHub Pages
- 作者: xiaojunjun
- 修改檔案:
index.js
📅 2025-12-17 (be484b1)
- 變更: Fix(index): use relative assets/game-api.js so GitHub Pages resolves under project path
- 作者: xiaojunjun
- 修改檔案:
index.html
📅 2025-12-17 (0a628da)
- 變更: Fix(pages): use ../assets paths and include base-path.js like leaderboard (GitHub Pages compatible)
- 作者: xiaojunjun
- 修改檔案:
pages/friends.htmlpages/profile.htmlpages/store.html
📅 2025-12-17 (2538d69)
- 變更: Revert: restore leading-slash asset/page links for GitHub Pages compatibility
- 作者: xiaojunjun
- 修改檔案:
index.htmlpages/friends.htmlpages/profile.htmlpages/store.html
📅 2025-12-17 (d6f2d67)
- 變更: Fix: use relative paths for internal assets (avoid /assets /pages leading-slash 404s)
- 作者: xiaojunjun
- 修改檔案:
index.htmlpages/friends.htmlpages/profile.htmlpages/store.html
📅 2025-12-17 (460d31b)
- 變更: Merge remote-tracking branch 'origin/master'
- 作者: Galin12341
📅 2025-12-17 (08106d0)
- 變更: UI: render title badges (emoji & color) in header/profile; enrich /api/profile titles with store metadata; style tweaks and debug logs
- 作者: xiaojunjun
- 修改檔案:
assets/game-api.jsassets/ui.cssassets/ui.jsgames/hide-and-seek-night-mode-and-with-gun/index.htmlgames/hide-and-seek-night-mode-and-with-gun/script.jsgames/table-tennis/index.htmlindex.cssindex.htmlindex.jspages/friends.css
📅 2025-12-14 (016bf19)
- 變更: big update of gun_has
- 作者: Galin12341
- 修改檔案:
games/hide-and-seek-night-mode-and-with-gun/index.htmlgames/hide-and-seek-night-mode-and-with-gun/script.jsgames/hide-and-seek-night-mode-and-with-gun/style.css
📅 2025-11-23 (acab72a)
- 變更: Merge remote-tracking branch 'origin/master'
- 作者: Galin12341
📅 2025-11-22 (09eb573)
- 變更: Merge remote-tracking branch 'origin/master'
- 作者: Galin12341
📅 2025-11-22 (ee7e496)
- 變更: update main page2
- 作者: Galin12341
- 修改檔案:
index.html
📅 2025-11-22 (6235256)
- 變更: update main page
- 作者: Galin12341
- 修改檔案:
index.html
📅 2025-11-22 (4caabd3)
- 變更: Fix formatting of 'Main Page' section in README
- 作者: Galin12341
📅 2025-11-22 (78ab5b7)
- 變更: Update README.md
- 作者: Galin12341
📅 2025-11-22 (f4e0a3b)
- 變更: Merge remote-tracking branch 'origin'
- 作者: Galin12341
📅 2025-11-21 (0ca7533)
- 變更: Merge remote-tracking branch 'origin/master'
- 作者: Galin12341
📅 2025-11-21 (5db24a7)
- 變更: add new game, modify HAS that change the character initial positiion
- 作者: Galin12341
- 修改檔案:
games/hide-and-seek-night-mode/index.htmlgames/hide-and-seek-night-mode/script.jsgames/hide-and-seek/script.js
📅 2025-11-20 (f963a73)
- 變更: :Merge remote-tracking branch 'origin/master'
- 作者: abaccldcc3-sketch
📅 2025-11-20 (308bf22)
- 變更: add beautiful sky cube and mouse control view
- 作者: abaccldcc3-sketch
- 修改檔案:
.DS_Storegames/hide-and-seek/index.htmlgames/hide-and-seek/script.jsskyBoxTest/index.htmlskyBoxTest/script.jsskyBoxTest/style.css
📅 2025-11-18 (81b24a7)
- 變更: Merge pull request #3 from kaigiii/dev_Chinese_chess
- 作者: Galin12341
📅 2025-11-10 (cfa601c)
- 變更: 更新本地更改:排行榜樣式和邏輯優化
- 作者: xiaojunjun
- 修改檔案:
games/soccer/script.jspages/leaderboard.csspages/leaderboard.js
📅 2025-11-10 (dd8b16d)
- 變更: 調整排行榜遊戲標籤樣式:對齊首頁遊戲卡片風格,圓角矩形、大圖標、光暈效果
- 作者: xiaojunjun
- 修改檔案:
pages/leaderboard.css
📅 2025-11-10 (66cca64)
- 變更: 排行榜:實現遊戲標籤滑動切換,一次顯示5個標籤,左右按鈕切換
- 作者: xiaojunjun
- 修改檔案:
pages/leaderboard.csspages/leaderboard.htmlpages/leaderboard.js
📅 2025-11-10 (3b90ee7)
- 變更: 更新排行榜和文檔:添加西洋棋遊戲
- 作者: xiaojunjun
- 修改檔案:
pages/leaderboard.htmlpages/leaderboard.js
📅 2025-11-10 (dcd75c8)
- 變更: 西洋棋:隱藏用戶狀態顯示、完善自動提交邏輯、按鈕置中
- 作者: xiaojunjun
- 修改檔案:
games/chess/index.htmlgames/chess/script.jsgames/chess/style.css
📅 2025-11-10 (c549d54)
- 變更: Chess: 調整排行榜按鈕至右上角,移除面板內連結,與其他遊戲一致
- 作者: xiaojunjun
- 修改檔案:
games/chess/index.htmlgames/chess/style.css
📅 2025-11-10 (0f54b4a)
- 變更: 調整西洋棋 UI:套用共用樣式與版型,對齊其他遊戲
- 作者: xiaojunjun
- 修改檔案:
games/chess/index.htmlgames/chess/style.css
📅 2025-11-10 (e183235)
- 變更: 新增遊戲:西洋棋(含自動提交分數與首頁連結)
- 作者: xiaojunjun
- 修改檔案:
games/chess/index.htmlgames/chess/script.jsgames/chess/style.cssindex.html
📅 2025-11-10 (49d52b2)
- 變更: remove bat test file ,modify readme.md
- 作者: Galin12341
- 修改檔案:
start-backend.batstart-frontend.battest-server.bat
📅 2025-11-10 (a438450)
- 變更: Merge pull request #2 from kaigiii/pre_merge_master
- 作者: Galin12341
📅 2025-11-10 (eff864c)
- 變更: Merge branch 'master' into pre_merge_master
- 作者: Galin12341
📅 2025-11-10 (176d4fc)
- 變更: test deploy
- 作者: Galin12341
- 修改檔案:
.github/workflows/ci-cd.yml.github/workflows/update-changelog.yml
📅 2025-11-09 (e07dd96)
- 變更: Merge branch 'master' of https://github.com/kaigiii/Super-Epic-Universe-Level-Sports-Game
- 作者: xiaojunjun