Skip to content

kaigiii/Super-Epic-Universe-Level-Sports-Game

Repository files navigation

Super Epic Universe Level Sports Game 🎮

多款 HTML5 體育小遊戲合集 - 簡單、有趣、免安裝!

CI/CD Pipeline

Main Page:

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

訪問遊戲

啟動後訪問:

停止服務

./scripts/stop.sh

📊 專案結構

Super-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 連線:

  • 配對系統:自動配對等待中的玩家
  • 房間管理:每個對戰創建獨立房間
  • 即時同步:遊戲狀態即時同步到雙方
  • 斷線處理:自動處理玩家離線情況

WebSocket API

客戶端 → 伺服器

// 尋找配對
{ 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 加密存儲
  • 自動提交分數:已登入用戶自動記錄分數
  • 匿名支持:未登入用戶也可以提交分數(顯示為「匿名玩家」)

API 端點

  • POST /api/auth/register - 註冊新用戶
  • POST /api/auth/login - 登入
  • GET /api/auth/me - 獲取當前用戶信息(需要認證)

📊 排行榜系統

功能

  • 自動提交:所有遊戲自動提交分數(無需手動點擊)
  • 匿名支持:未登入用戶也可以參與排行榜
  • 個人記錄:已登入用戶可查看個人最佳記錄
  • 多遊戲支持:每個遊戲獨立的排行榜

API 端點

  • 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 Pages)

  1. 推送到 GitHub
  2. 在 GitHub 倉庫設置中啟用 GitHub Pages
  3. 選擇 master 分支作為源
  4. 訪問 https://kaigiii.github.io/Super-Epic-Universe-Level-Sports-Game/

後端部署(Render)- 快速開始

環境變數設置

在 Render 部署時,需要在環境變數中設置以下值:

必需環境變數

  1. JWT_SECRET

    • 用途:JWT token 簽名密鑰
    • 生成方式:使用隨機字符串生成器或 openssl rand -base64 32
    • 範例:your-super-secret-jwt-key-change-this-in-production
  2. SESSION_SECRET

    • 用途:Session 加密密鑰
    • 生成方式:使用隨機字符串生成器或 openssl rand -base64 32
    • 範例:your-super-secret-session-key-change-this-in-production
  3. NODE_ENV

    • 用途:設置為生產環境
    • 值:production

可選環境變數

  1. DATA_DIR(可選)
    • 用途:SQLite 數據庫文件存儲目錄
    • 預設值:server/data(本地開發)
    • Render 部署:設置為 /data(配合持久化磁盤使用)

在 Render 中設置環境變數

  1. 登入 Render Dashboard
  2. 選擇你的 Web Service
  3. 進入 "Environment" 標籤
  4. 點擊 "Add Environment Variable"
  5. 添加上述環境變數

數據儲存

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 的文件系統是臨時的!

每次部署或重啟服務時,文件系統會被重置。

資料庫存儲方案:

方案 A:使用持久化磁盤(付費)💰
  1. 在 Render Dashboard 中,選擇你的 Web Service
  2. 進入 "Settings" 標籤
  3. 找到 "Disks" 部分,點擊 "Add Disk"
  4. 設置:
    • Mount Path: /data
    • Size: 至少 1GB
  5. 在環境變數中設置:
    • Key: DATA_DIR
    • Value: /data
  6. 保存並重新部署服務

注意: Render 免費方案不包含持久化磁盤,需要付費方案(約 $7/月起)。

方案 B:免費方案(數據會丟失)🆓
  • 不設置持久化磁盤
  • 不設置 DATA_DIR 環境變數(使用預設值 server/data
  • 接受數據會在重啟後丟失的情況

適合場景: 測試、演示、學習用途

詳細說明請參考:RENDER_DEPLOYMENT.md

為什麼選擇 SQLite?

  • 簡單:無需額外配置,單一文件數據庫
  • 輕量:適合中小型應用
  • 快速:本地文件系統,查詢速度快
  • 無需額外服務:不需要單獨的數據庫服務器
  • 易於備份:只需備份 .db 文件

部署步驟

  1. 將代碼推送到 GitHub
  2. 在 Render 中創建新的 Web Service
  3. 連接 GitHub 倉庫
  4. 設置環境變數
  5. 設置構建命令:cd server && npm install
  6. 設置啟動命令:cd server && node server.js
  7. 添加持久化磁盤(掛載到 /data
  8. 部署!

故障排除

數據丟失問題

如果發現數據在重啟後丟失:

  • 檢查持久化磁盤:確認已在 Render Dashboard 中設置持久化磁盤
  • 檢查環境變數:確認 DATA_DIR 環境變數設置為 /data
  • 檢查數據庫文件:確認 /data/game.db 文件存在
  • 查看日誌:檢查服務日誌中是否有數據庫相關錯誤

SQLite 相關問題

如果遇到數據庫錯誤:

  • 權限問題:確保數據庫文件有讀寫權限
  • 文件鎖定:SQLite 使用文件鎖,確保沒有多個進程同時寫入
  • 磁盤空間:檢查持久化磁盤是否有足夠空間

環境變數問題

如果環境變數未生效:

  • 確認在 Render Dashboard 中正確設置
  • 重啟服務以應用新的環境變數
  • 檢查變數名稱是否正確(區分大小寫)

🛡️ 安全建議

  1. 永遠不要將敏感信息提交到 Git

    • 使用 .gitignore 排除 .env 和數據文件
    • 使用環境變數存儲密鑰
  2. 使用強密碼

    • JWT_SECRET 和 SESSION_SECRET 應該至少 32 字符
    • 使用隨機生成器生成
  3. HTTPS

    • Render 自動提供 HTTPS
    • 確保 NODE_ENV=production 以啟用安全 cookie
  4. 定期備份數據

    • SQLite 數據庫文件(game.db)可以直接備份
    • 如果使用持久化磁盤,可以通過 Render Dashboard 下載數據庫文件
    • 建議定期導出數據庫文件作為備份

📈 效能優化

  • 使用 60 FPS 更新頻率(多人遊戲)
  • 伺服器端進行遊戲邏輯計算
  • 客戶端僅負責渲染和輸入
  • 定期清理過期房間(每分鐘)
  • SQLite 索引優化查詢性能

📄 授權

本專案採用 MIT 授權條款

⭐ 如果你喜歡這個專案,請給個 Star!


BTW昱辰的專題缺一個人 你們可以來找我

📝 更新日誌

📄 授權

本專案採用 MIT 授權條款


⭐ 如果你喜歡這個專案,請給個 Star!

BTW昱辰的專題缺一個人 你們可以來找我

📅 2025-12-18 (13b728f)

  • 變更: force push: 更新內容
  • 作者: xiaojunjun
  • 修改檔案:
    • assets/thumbs/Billiards.png
    • assets/thumbs/basketball.png
    • assets/thumbs/chess.png
    • assets/thumbs/chinese-chess.png
    • assets/thumbs/hide-and-seek-at-night.png
    • assets/thumbs/hide-and-seek.png
    • assets/thumbs/ping-pong.png
    • assets/thumbs/soccer.png
    • assets/thumbs/table-tennis.png
    • assets/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.README
    • pages/profile.html
    • pages/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.html
    • pages/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.html
    • pages/profile.html
    • pages/store.html

📅 2025-12-17 (2538d69)

  • 變更: Revert: restore leading-slash asset/page links for GitHub Pages compatibility
  • 作者: xiaojunjun
  • 修改檔案:
    • index.html
    • pages/friends.html
    • pages/profile.html
    • pages/store.html

📅 2025-12-17 (d6f2d67)

  • 變更: Fix: use relative paths for internal assets (avoid /assets /pages leading-slash 404s)
  • 作者: xiaojunjun
  • 修改檔案:
    • index.html
    • pages/friends.html
    • pages/profile.html
    • pages/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.js
    • assets/ui.css
    • assets/ui.js
    • games/hide-and-seek-night-mode-and-with-gun/index.html
    • games/hide-and-seek-night-mode-and-with-gun/script.js
    • games/table-tennis/index.html
    • index.css
    • index.html
    • index.js
    • pages/friends.css

📅 2025-12-14 (016bf19)

  • 變更: big update of gun_has
  • 作者: Galin12341
  • 修改檔案:
    • games/hide-and-seek-night-mode-and-with-gun/index.html
    • games/hide-and-seek-night-mode-and-with-gun/script.js
    • games/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.html
    • games/hide-and-seek-night-mode/script.js
    • games/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_Store
    • games/hide-and-seek/index.html
    • games/hide-and-seek/script.js
    • skyBoxTest/index.html
    • skyBoxTest/script.js
    • skyBoxTest/style.css

📅 2025-11-18 (81b24a7)

  • 變更: Merge pull request #3 from kaigiii/dev_Chinese_chess
  • 作者: Galin12341

📅 2025-11-10 (cfa601c)

  • 變更: 更新本地更改:排行榜樣式和邏輯優化
  • 作者: xiaojunjun
  • 修改檔案:
    • games/soccer/script.js
    • pages/leaderboard.css
    • pages/leaderboard.js

📅 2025-11-10 (dd8b16d)

  • 變更: 調整排行榜遊戲標籤樣式:對齊首頁遊戲卡片風格,圓角矩形、大圖標、光暈效果
  • 作者: xiaojunjun
  • 修改檔案:
    • pages/leaderboard.css

📅 2025-11-10 (66cca64)

  • 變更: 排行榜:實現遊戲標籤滑動切換,一次顯示5個標籤,左右按鈕切換
  • 作者: xiaojunjun
  • 修改檔案:
    • pages/leaderboard.css
    • pages/leaderboard.html
    • pages/leaderboard.js

📅 2025-11-10 (3b90ee7)

  • 變更: 更新排行榜和文檔:添加西洋棋遊戲
  • 作者: xiaojunjun
  • 修改檔案:
    • pages/leaderboard.html
    • pages/leaderboard.js

📅 2025-11-10 (dcd75c8)

  • 變更: 西洋棋:隱藏用戶狀態顯示、完善自動提交邏輯、按鈕置中
  • 作者: xiaojunjun
  • 修改檔案:
    • games/chess/index.html
    • games/chess/script.js
    • games/chess/style.css

📅 2025-11-10 (c549d54)

  • 變更: Chess: 調整排行榜按鈕至右上角,移除面板內連結,與其他遊戲一致
  • 作者: xiaojunjun
  • 修改檔案:
    • games/chess/index.html
    • games/chess/style.css

📅 2025-11-10 (0f54b4a)

  • 變更: 調整西洋棋 UI:套用共用樣式與版型,對齊其他遊戲
  • 作者: xiaojunjun
  • 修改檔案:
    • games/chess/index.html
    • games/chess/style.css

📅 2025-11-10 (e183235)

  • 變更: 新增遊戲:西洋棋(含自動提交分數與首頁連結)
  • 作者: xiaojunjun
  • 修改檔案:
    • games/chess/index.html
    • games/chess/script.js
    • games/chess/style.css
    • index.html

📅 2025-11-10 (49d52b2)

  • 變更: remove bat test file ,modify readme.md
  • 作者: Galin12341
  • 修改檔案:
    • start-backend.bat
    • start-frontend.bat
    • test-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)

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors