Blackjack — Web 版 21 點遊戲（技術向說明）

一個使用 HTML / CSS / JavaScript 開發的 21 點（Blackjack）網頁小遊戲，為課程作業，同時也作為個人練習 Web 前端與遊戲邏輯設計的 mini side project。

註：GitHub Pages 版本因載入圖片與資源方式，初次載入時可能會感覺圖片生成有些延遲。

---

🧱 技術重點總覽

• 純前端技術：原生 HTML / CSS / JavaScript + jQuery
• 遊戲邏輯完整實作：Blackjack 規則、莊家 AI、比點、下注系統
• 自訂洗牌與發牌演算法：使用 4 副牌（共 208 張）確保抽牌機率公平
• 瀏覽器端資料儲存：
  • localStorage / sessionStorage 記錄遊戲狀態、紀錄或時間資訊
• UI / UX 設計：
  • 籌碼介面、牌面顯示、操作按鈕（HIT / STAND / SPLIT / DOUBLE / SURRENDER）
  • 使用 setInterval 做提示或時間相關提醒
  • 隨機顯示廣告區塊，模擬實際遊戲網站行為
• 課程需求整合：將課堂規定的功能（jQuery 使用、多種 Storage、排序、表格顯示、廣告等）都融入在一個一致的 Blackjack 專案中

---

🕹 功能與遊戲機制（技術視角）

1. 遊戲規則與牌型計算

• 使用標準 Blackjack 計分方式：
  • 2~9 依牌面點數計算
  • 10 / J / Q / K 均為 10 點
  • A 可為 1 或 11，依目前手牌狀態自動調整為最有利數值
• 莊家 AI：
  • 莊家點數 ≤ 16 必須補牌
  • 莊家點數 ≥ 17 一律停牌
  • 若雙方皆為 21 點，莊家獲勝（house edge 設定）

這些規則都由 JavaScript 內的邏輯函式（例如計算手牌點數、判斷是否需要補牌）實作。

---

2. 玩家行為設計

支援常見 Blackjack 操作（由按鈕 + JS 事件綁定實現）：

• HIT（拿牌）：再次抽一張牌
• STAND（停牌）：不再拿牌，進入莊家回合
• SPLIT（分牌）：
  • 當前兩張牌點數相同時可分牌
  • 下注金額加倍，拆成兩手獨立計算
• DOUBLE（雙倍下注）：
  • 前兩張牌發完後可選擇加注，之後最多再拿一張牌
• SURRENDER（投降）：
  • 在尚未要牌前可以投降
  • 損失一半賭注，該局結束

---

3. 多副牌抽牌演算法（公平性設計）

遊戲總共使用 4 副牌，共 208 張。
專案中實作了一個「不重複抽牌且機率均等」的演算法，簡要說明如下（邏輯來自 README 中的描述，並以程式思維重新整理）：

1. 建立一個代表 1 ~ 208 的編號池，每個號碼對應牌堆中的一張牌。
2. 每次抽牌時：
   • 從目前剩餘範圍中隨機選一個索引
   • 根據過去已抽出的牌，調整實際對應到第幾副牌 / 第幾張牌
3. 每抽出一張牌，就從「可抽範圍」中移除，下一次抽牌的空間會減少 1。

這樣可以保證：

• 每次抽到某一張牌的機率都是 1 / (剩餘牌數)
• 不需要每次重新洗完整倉的陣列，就能模擬無放回抽樣

---

4. 瀏覽器端儲存：localStorage / sessionStorage

根據作業需求，專案中使用了：

• localStorage：
  • 保存較長期的資訊，例如：
    • 遊戲歷史紀錄
    • 最高籌碼紀錄
    • 累積遊玩時間
• sessionStorage：
  • 保存當前遊戲 Session 相關資料，例如：
    • 本局狀態
    • 上一局結果

並搭配：

• 以 表格形式 顯示歷史紀錄（例如每場的籌碼變化或遊玩時間）
• 依據 籌碼或遊玩時間排序 紀錄（作業要求的一部分）

這些都透過 JavaScript：

• 在事件（如一局結束）時更新 Storage
• 開啟頁面時讀取 Storage
• 將資料動態渲染到 HTML <table> 內

---

5. UI / UX 與互動設計

• 使用 jQuery：
  • 綁定按鈕事件（HIT / STAND / SPLIT / DOUBLE / SURRENDER / CHEAT）
  • 顯示 / 隱藏籌碼區塊、訊息區塊
  • 更新畫面上的牌面、籌碼數值
• 使用 setInterval：
  • 週期性提醒玩家進行操作
  • 例如長時間未操作時跳出提示，避免卡住畫面
• 隨機廣告顯示：
  • 以隨機機率顯示廣告區塊或文字
  • 模擬實際遊戲網站的廣告行為
• Cheat 按鈕：
  • 介面上有一個紅色「cheat」按鈕
  • 觸發後讓莊家直接拿到 21 點，作為 debug / 彩蛋功能

---

6. 檔案與專案結構

專案採用簡單、直覺的前端專案結構：

Blackjack/
├── assets/        # 卡牌圖片、圖示等靜態資源
├── src/           # 主要 JavaScript 程式碼（遊戲邏輯、事件綁定等）
├── style/         # CSS 樣式檔
├── index.html     # 進入點頁面，載入所有資源
└── README.md      # 專案說明

## 專案結構

- `index.html`：定義遊戲主畫面結構、按鈕、籌碼區、牌桌區等。
- `style/` 內的 CSS：負責版面排版、背景、籌碼與牌面風格。
- `src/` 內的 JS：
  - 牌堆與洗牌邏輯
  - 手牌計分與勝負判斷
  - 玩家 / 莊家回合流程控制
  - UI 更新（透過 DOM / jQuery）
  - `localStorage` / `sessionStorage` 讀寫、歷史紀錄表格顯示

---

## 🔧 開發與執行方式

### 1. 本機開發

此專案為純前端靜態網站，不需要後端環境，直接用瀏覽器即可執行。

```bash
git clone https://github.com/Aka2210/Blackjack.git
cd Blackjack

接著直接用瀏覽器開啟 index.html 即可：

• 方式一：直接雙擊 index.html
• 方式二：使用 VS Code + Live Server 或其他靜態伺服器打開

若要避免檔案路徑或 CORS 問題，建議使用簡單的開發伺服器（例如 VS Code Live Server）。

📈 我在這個專案中練習 / 展現的東西

• 使用 原生 HTML / CSS / JS + jQuery 完成一個可以實際遊玩的 Blackjack 小遊戲。
• 實作 多副牌抽牌演算法，確保抽牌機率公平（無放回抽樣）。
• 實作完整 Blackjack 規則與玩家操作：HIT / STAND / SPLIT / DOUBLE / SURRENDER。
• 使用 localStorage / sessionStorage：
  • 記錄遊戲歷史、時間或籌碼資訊。
  • 在頁面上以表格顯示並排序紀錄。
• 練習使用 setInterval 做時間相關提醒與 UI 更新。
• 設計完整 UI 流程：下注 → 發牌 → 玩家回合 → 莊家回合 → 結算 → 更新紀錄。
• 使用 GitHub Pages 部署，讓遊戲能透過網址直接遊玩。