# Playing Classic Game with Body Gestures using Pose Detection

## 專案簡介
本專案結合 **Mediapipe** 與 **OpenCV**，開發數個利用肢體動作進行遊戲操控的系統。通過姿態檢測技術，實時捕捉玩家的動作並將其轉換為遊戲中的操作指令，例如跳躍、蹲下以及左右閃避。此系統旨在提供更直觀的互動方式，實現肢體動作與數位遊戲的無縫結合。

## Implementation Resources(硬體資源)
- 有鏡頭的電腦
- CPU運算能力: i5 4210u UP

---

## 遊戲列表與技術概覽
| 遊戲 | 使用技術 | 開發語言 | 部署方式 |
|------------|---------------------------|---------------|----------------------|
| Flappy Bird | Flask, Mediapipe, OpenCV, PyAutoGUI | Python | 本地伺服器部署 |
| Ping-Pong | Socket, Mediapipe, Express | JavaScript | 本地伺服器（Node.js）|
| Subway Surfers | Flask, Mediapipe, OpenCV, PyAutoGUI | Python | 本地伺服器部署 |

---

## 環境要求
### For Flappy Bird & Subway Surfers
- **Python**: 3.7 UP
- **[Mediapipe](https://github.com/google-ai-edge/mediapipe)**: 用於肢體辨識模型來即時偵測與追蹤玩家動作。
- **[Open-CV](https://github.com/opencv/opencv)** : 用於影像處理
- **[PyAutoGUI](https://github.com/asweigart/pyautogui)** : 用指令操作鍵盤
- **[Gesture Mapping](https://github.com/dang-hai/GestureMap)**: 將特定手勢（如舉手、下蹲）映射到遊戲內的動作。
- **Seamless Integration**: 可與正在運行的遊戲配合，檢測姿勢模擬鍵盤輸入。
- **mySQL**: 紀錄 flappy bird 的英雄榜。

### For Ping-pong

- **[Mediapipe]**
- **cors**: 2.8.5
- **express**: 4.21.2
- **nodemon**: 3.1.9
- **socket.io**: 4.8.1

---

## 架構

---
## 遊戲的詳細介紹與使用方式
### Flappy Bird & Subway Surfers Installation
1. Clone the repository:

   git clone https://github.com/Kaiwhat/BobyGamer.git
   cd BodyGamer/flappy 或 subway

2. Install the required dependencies:

   pip install -r requirements.txt

Ensure the following libraries are included in `requirements.txt`:
- mediapipe
- opencv-python
- pyautogui
- flask
3. Test the environment:

   python3 app.py

### 手勢控制
1. **姿勢檢測**：
- Mediapipe 識別身體關鍵點（肩膀、嘴巴）。
- 處理檢測到的關鍵點以判斷手勢。
2. **手勢映射**：
- 使用 `gesture_mapping.py` 中的自定義邏輯將特定手勢映射到遊戲操作。
3. **鍵盤模擬**：
- 檢測到的手勢通過 `pyautogui` libary 觸發對應的鍵盤輸入。

---

### Flappy Bird：
#### 資料庫匯入：
- 下載XAMPP，可用以下網址下載 https://www.apachefriends.org/zh_tw/download.html
- 新增資料庫：
開啟XAMPP Control Panel，按MySQL的Admin
建立新的資料庫，名字為flappy_bird
按匯入：
選擇下載的flappy_bird.sql檔案，按匯入

- 遊戲執行：
執行`python3 app.py` //注意路徑要是該檔案的資料夾(flappy bird的資料夾)
輸入`localhost:5000`
以下為範例：

- 遊玩方式：
跳躍時肩膀的兩個點超過藍色的線，畫面中的鳥就會跳一下，通過水管就可得分，超過最高分，就可以把自己的名字輸入進我們的英雄榜

- Start Game！！！

### Subway Surfers：
1. Press F5 to run `/BobyGamer/subway/app.py`
2. Once the program starts, click the displayed localhost URL`127.0.0.1` to access the game page.
3. When the camera turns on, put your hands together and hold still until the system captures the anchor point.


4. Once everything is set, start the game!

---

### Ping Pong
#### Installation
1. Clone the repository:

   git clone https://github.com/Kaiwhat/BobyGamer.git
   cd BodyGamer/ping-pong

2. Install the required dependencies:

   cd backend
   npm init -y
   npm -i express cors nodemon socket.io

Ensure the following libraries are included in `package.json`:
- express
- cors
- nodemon
- socket.io
3. Test the backend environment:

   npm run dev

4. Test the frontend environment:

   cd frontend
   live-server

---

#### 手勢控制
1. **姿勢檢測**：
- Mediapipe 識別出手的特徵。
- 處理檢測到的關鍵點以判斷手勢。
2. **手勢映射**：
- 使用 `pose` 中的自定義邏輯將特定手勢映射到遊戲操作。
3. **鍵盤模擬**：
- 檢測到的手勢通過 `press_left()`, `press_right()` 觸發對應的鍵盤輸入。

---
### Hand Command
#### Installation

1. Clone the repository:

   git clone https://github.com/Kaiwhat/BobyGamer.git
   cd BodyGamer

2. Run the program:

   python3 cam_command.py

3. Wait for camera preview show up and make the following poses

---

## Usage
1. 允許 http 網站打開攝影機
- step 1.
- step 2.

3. 打開 google chrome 的實驗性功能，在 chrome 網址打上：

   chrome://flags/#unsafely-treat-insecure-origin-as-secure

4. 在 Insecure origins treated as secure 打上 http://serverIP，然後 enable
5. 最後 Relaunch，左上角會跳出使用攝影機的請求
6. 啟動遊戲，進入遊戲畫面。
7. 執行以下動作以控制遊戲：
- **水管鳥**:
- **跳躍**: 遊戲中跳躍
- **地鐵跑酷**:
- **跳躍**: 遊戲中跳躍
- **蹲下**: 遊戲中蹲下
- **往左平移**: 遊戲中左閃
- **往右平移**: 遊戲中右閃
- **乒乓球**:
- **左/右手觸碰鏡頭畫面邊框**: 球拍左/右移動
- **身體指令**:
- **OK手勢**：執行 **_sl_** 指令
- **鳥手勢**：開啟 **_Flappy Bird_** 網頁伺服器
- **握球拍手勢**：開啟 **_Ping Pong_** 網頁伺服器

---

Enjoy playing Subway Surfers with your body movements! 🚀

## 連機版
### 伺服器架設
- server
- Ubuntu 20.04
- CPU：1 顆
- 記憶體：2G
- 硬碟空間：40GB
#### 1. 設定域名指向伺服器
- 為了能夠使用 https 連線，因此需在 cloudflare 上新增 DNS 紀錄
- 
- 設定 SSL/TLS 加密模式
- 使用 **自訂 SSL/TLS** **完整 (嚴格)**
- 啟用加密端對端並在原點憑證上強制驗證。使用 Cloudflare 的原點 CA 為您的原點產生憑證。
#### 2. 設定憑證
- 使用 **Let's Encrypt** 取得憑證
**安裝 Certbot**

sudo apt update
sudo apt install certbot python3-certbot-nginx

**生成 SSL 憑證**

sudo certbot --nginx -d <剛剛新增的網域名稱>

#### 3. 在 nginx 設定檔中新增 proxy 紀錄
Nginx 設定範例

# HTTP 重定向到 HTTPS
server {
    listen 80;
    listen [::]:80;
    server_name <剛剛新增的網域名稱>;

    # 重定向所有 HTTP 流量到 HTTPS
    return 301 https://$host$request_uri;
}

# HTTPS 服務設定

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name <剛剛新增的網域名稱>;

    # 設定 SSL 憑證路徑
    ssl_certificate /etc/letsencrypt/live/<剛剛新增的網域名稱>/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/<剛剛新增的網域名稱>/privkey.pem;

    # 設定 SSL 協議
    ssl_protocols TLSv1.2 TLSv1.3; # 強制使用 TLS 1.2 和 1.3
    ssl_ciphers 'TLS_AES_128_GCM_SHA256:TLS_AES_256_GCM_SHA384:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384'; # 設定強加密套件
    ssl_prefer_server_ciphers on; # 讓伺服器優先使用指定的加密套件

    # SSL 預設選項
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    # Flask WebSocket proxy 設定
    location /socket.io/ {
        proxy_pass http://< server ip 位置 >:8080; # 假設遊戲 run 在 8080 port
        proxy_http_version 1.1; # WebSocket 需要 HTTP 1.1 支援
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_redirect off;
    }

    # Flask HTTP proxy 設定
    location / {
        proxy_pass http://<server ip 位置>:8080; # 假設遊戲 run 在 8080 port
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_redirect off;
    }
}

#### 4. 讓服務 run 在指定的 prot 上(假設 8080 port)
#### 5. 上 browser 輸入剛剛新增的網域名稱開始遊玩

## 遇到問題
- 用 http 無法開啟鏡頭
解決方法：https://blog.csdn.net/qq_43530326/article/details/130974058 (也可查看 Usage )
- flappy bird 與 subway 遊戲，如果架到 server 上，server 無法控制我們自己的的鍵盤
解決方法：自己寫一個 flappy bird 遊戲，
- 架上 Server 後端運算再傳到前端會延遲
解決方法：改在前端做運算

## 未來展望
- 把 subway surf 也上架到我們的伺服器
- 將 flappy bird 的 clock 統一
- 能把遊戲加上音效，更有臨場感
- 修一些遊戲上的小細節，像是讓 flappy bird 可以拍翅膀等
- ping-pong 連線對戰問題
- 新增更多手勢對應開啟部分程式或輸入，例如:sudo apt install...
- 提高手勢指令辨識度的準確性

## 分工表
| 組員 | 工作內容 |
| :---: | :---: |
| 吳楷賀 | 乒乓球遊戲製作、撰寫 readme|
| 陳子晴 | 水管鳥遊戲製作、Mediapipe 影像辨識、撰寫 readme|
| 廖志賢 | 地鐵跑酷遊戲製作、撰寫 readme|
| 楊立楚 | 用手勢或身體打指令、撰寫 readme|
| 葉芷妤 | 伺服器設定、架設、撰寫 readme|

## 感謝名單
- BlueT
- 柏偉學長
- Josh學長
- Reg 學長
- Chat GPT

## Reference
https://youtu.be/Z2EGhplFOHs?feature=shared

https://github.com/web-tunnel/lite-http-tunnel

https://blog.csdn.net/qq_43530326/article/details/130974058

https://www.youtube.com/watch?v=P_Mtzj-oLdk

https://github.com/ImKennyYip/flappy-bird?tab=readme-ov-file