← 返回首頁
🚀

jhm5-4

Cloudflare Worker 專案展示

現代化的全端應用程式集合
使用 Cloudflare Workers + KV 打造

按右鍵繼續 →

📋 專案概述

  • 6 個完整的 Web 應用程式
  • 使用 Cloudflare Workers 提供靜態資源
  • 整合 Cloudflare KV 實現資料持久化
  • 純前端應用與全端應用的完美結合
  • 所有介面使用繁體中文
  • 自訂網域：jhm5-4.oooooooo.io
  • 簡潔、極簡、現代化的設計風格

⚙️ 技術堆疊

後端技術

  • Cloudflare Workers
  • TypeScript
  • Cloudflare KV
  • RESTful API

前端技術

  • 純 HTML/CSS/JavaScript
  • 響應式設計
  • LocalStorage API
  • Fetch API

🏗️ 專案架構

jhm5-4/ ├── src/ │ ├── index.ts # Worker 主程式 │ └── apps/ # API 端點模組 │ ├── todo-cloud.ts # 待辦事項 API │ └── mathgame.ts # 數學遊戲 API ├── public/ │ ├── index.html # 主頁 │ ├── style.css # 全域樣式 │ └── apps/ # 應用程式頁面 │ ├── tictactoe.html │ ├── todo-local.html │ ├── todo-cloud.html │ ├── mathgame.html │ ├── presentation.html │ └── tutorial.html ├── package.json └── wrangler.jsonc # Cloudflare 配置

⭕️❌ App 1: 井字遊戲

功能特色

  • 單人模式（AI 對戰）
  • 雙人模式
  • 使用 Minimax 演算法
  • 遊戲狀態儲存/載入
  • 勝利動畫效果

技術亮點

  • 完整的 AI 邏輯
  • 遊戲狀態管理
  • LocalStorage 持久化
  • 流暢的互動體驗

🤖 Minimax 演算法

為井字遊戲 AI 實作無敵的決策邏輯

function minimax(board, depth, isMaximizing) { // 檢查遊戲狀態 if (勝利) return 評分; if (平局) return 0; if (isMaximizing) { // AI 回合：找最大分數 return Math.max(...所有可能走法的分數); } else { // 玩家回合：找最小分數 return Math.min(...所有可能走法的分數); } }

📝 App 2: 本地待辦事項

功能特色

  • 新增/編輯/刪除待辦
  • 標記完成狀態
  • 篩選顯示
  • 清除已完成項目
  • 統計資訊

技術亮點

  • 純前端實作
  • LocalStorage 儲存
  • 即時更新 UI
  • 優雅的動畫效果

☁️ App 3: 雲端待辦事項

功能特色

  • 多使用者支援
  • 雲端資料同步
  • 跨裝置存取
  • 完整的 CRUD 操作
  • 即時同步狀態

技術亮點

  • Cloudflare KV 儲存
  • RESTful API 設計
  • 使用者隔離
  • 非同步操作處理

🔌 API 端點設計

模組化 API 架構

src/apps/todo-cloud.ts # 待辦事項 API 模組 src/apps/mathgame.ts # 數學遊戲 API 模組 src/index.ts # 主路由器 ├─> /api/todos/* → handleTodoAPI() └─> /api/mathgame/* → handleMathGameAPI()

API 端點

# Todo Cloud API GET /api/todos/{userId} # 取得待辦清單 PUT /api/todos/{userId} # 更新待辦清單 DELETE /api/todos/{userId} # 刪除待辦清單 # Math Game API GET /api/mathgame/scores # 取得排行榜 POST /api/mathgame/scores # 提交新分數 # KV Binding: JHM5_4_KV jhm5_4_todos_{userId} jhm5_4_mathgame_scores

🧮 App 4: 限時數學遊戲

功能特色

  • 三種難度級別
  • 限時挑戰
  • 連續答對加分
  • 四則運算題目
  • 全球排行榜

技術亮點

  • 動態題目生成
  • 計時器管理
  • 分數系統設計
  • KV 排行榜儲存

🎮 遊戲計分機制

分數計算

  • 答對一題：10 分
  • 連續答對加成：+2 分/連續
  • 答錯扣分：-5 分
  • 連續中斷：重新計算

難度設定

  • 😊 簡單：1-20 範圍，30 秒
  • 🤔 中等：1-50 範圍，45 秒
  • 😤 困難：1-100 範圍，60 秒

📊 資料流程圖

使用者 ──────> 前端應用 │ │ Fetch API ▼ Cloudflare Worker │ ├──> 靜態資源 (Assets) │ └──> API 路由 │ ▼ Cloudflare KV (資料儲存)

採用 Edge Computing 架構， 全球分散式部署，低延遲高效能

📐 開發規範

  • 程式碼風格：簡潔、極簡、乾淨
  • 專案名稱：jhm5-4
  • KV 命名規則：jhm5_4_*
  • 部署方式：直接部署到 Cloudflare
  • 介面語言：繁體中文
  • 設計風格：現代簡約極簡
  • 色彩運用：克制優雅
  • 特效原則：強化功能體驗

🚢 部署流程

1. 安裝依賴

npm install

2. 設定 KV Namespace

npx wrangler kv namespace create JHM5_4_KV npx wrangler kv namespace create JHM5_4_KV --preview # 更新 wrangler.jsonc 中的 namespace ID

3. 設定自訂網域

# 在 Cloudflare Dashboard 設定自訂網域 jhm5-4.oooooooo.io

4. 部署到 Cloudflare

npm run deploy

⚡ 效能優化

前端優化

  • 最小化 DOM 操作
  • CSS 動畫加速
  • 事件委派處理
  • LocalStorage 快取

後端優化

  • KV 快速讀寫
  • 邊緣運算部署
  • CORS 優化
  • 資料壓縮傳輸

🔒 安全性設計

  • CORS 跨域控制
  • 輸入驗證與過濾
  • 資料大小限制
  • 使用者資料隔離
  • 防止 XSS 攻擊
  • API 錯誤處理

採用 Cloudflare 的全球安全防護， 包含 DDoS 防護、SSL/TLS 加密等企業級安全特性

🔮 未來展望

功能擴充

  • 使用者認證系統
  • 社交分享功能
  • 即時多人對戰
  • 成就系統

技術升級

  • WebSocket 支援
  • PWA 離線功能
  • Durable Objects
  • Analytics 分析
✨

專案總結

jhm5-4 展示了如何使用 Cloudflare Workers 打造現代化的全端應用程式。從簡單的遊戲到雲端儲存， 涵蓋了前端互動、模組化 API、資料持久化等完整技術棧。

✨ 核心技術

模組化 API 設計 • KV 儲存
自訂網域部署 • 全端開發

簡潔 · 高效 · 現代

🙏

感謝觀看

jhm5-4
Cloudflare Worker 專案

🌐 https://jhm5-4.oooooooo.io

按 Esc 返回首頁或重新觀看

1 / 19