---
# System prepended metadata

title: Playing Classic Game with Body Gestures using Pose Detection

---


# 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

---

## 架構
![image](https://github.com/user-attachments/assets/0e320176-1129-4dd9-812f-f1a853d5c44a)


---
## 遊戲的詳細介紹與使用方式
### Flappy Bird & Subway Surfers Installation
1. Clone the repository:
   ```bash
   git clone https://github.com/Kaiwhat/BobyGamer.git
   cd BodyGamer/flappy 或 subway
   ```
2. Install the required dependencies:
   ```bash
   pip install -r requirements.txt
   ```
   Ensure the following libraries are included in `requirements.txt`:
   - mediapipe
   - opencv-python
   - pyautogui
   - flask
3. Test the environment:
   ```bash
   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
![image](https://hackmd.io/_uploads/BJoIgLYI1x.png)
建立新的資料庫，名字為flappy_bird
![螢幕擷取畫面 2025-01-06 173818](https://hackmd.io/_uploads/rJK92mF8kl.png)
按匯入：
![螢幕擷取畫面 2025-01-06 173837](https://hackmd.io/_uploads/r1F9hQtU1x.png)
選擇下載的flappy_bird.sql檔案，按匯入
![螢幕擷取畫面 2025-01-06 174028](https://hackmd.io/_uploads/HkK9hmFIJe.png)

- 遊戲執行：
執行`python3 app.py` //注意路徑要是該檔案的資料夾(flappy bird的資料夾)
輸入`localhost:5000`
以下為範例：
![螢幕擷取畫面 2025-01-02 145659](https://hackmd.io/_uploads/SyFPt3mL1e.png)

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

![image](https://hackmd.io/_uploads/BJWzXL5I1g.jpg)

4. Once everything is set, start the game!

---

### Ping Pong
#### Installation
1. Clone the repository:
   ```bash
   git clone https://github.com/Kaiwhat/BobyGamer.git
   cd BodyGamer/ping-pong
   ```
2. Install the required dependencies:
   ```bash
   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:
   ```bash
   npm run dev
   ```

4. Test the frontend environment:
   ```bash
   cd frontend
   live-server
   ```

---

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

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

1. Clone the repository:
   ```bash
   git clone https://github.com/Kaiwhat/BobyGamer.git
   cd BodyGamer
   ```

2. Run the program:
   ```bash
   python3 cam_command.py
   ```
3. Wait for camera preview show up and make the following poses

---

## Usage
1. 允許 http 網站打開攝影機
  - step 1.
    ![image](https://github.com/user-attachments/assets/60db5236-a05f-4a8f-914d-273a53745faf)
  - step 2.
    ![image](https://github.com/user-attachments/assets/3c647c32-7640-4483-a192-11c22765102d)

3. 打開 google chrome 的實驗性功能，在 chrome 網址打上：
   ```
   chrome://flags/#unsafely-treat-insecure-origin-as-secure
   ```
4. 在 Insecure origins treated as secure 打上 http://serverIP，然後 enable
![image](https://hackmd.io/_uploads/HJ7uXbK81e.png)
5. 最後 Relaunch，左上角會跳出使用攝影機的請求
6. 啟動遊戲，進入遊戲畫面。
7. 執行以下動作以控制遊戲：
- **水管鳥**:
   - **跳躍**: 遊戲中跳躍
- **地鐵跑酷**:
   - **跳躍**: 遊戲中跳躍
   - **蹲下**: 遊戲中蹲下
   - **往左平移**: 遊戲中左閃
   - **往右平移**: 遊戲中右閃
- **乒乓球**:
   - **左/右手觸碰鏡頭畫面邊框**: 球拍左/右移動
- **身體指令**:
   - **OK手勢**：執行 **_sl_** 指令
   - **鳥手勢**：開啟 **_Flappy Bird_** 網頁伺服器
   - **握球拍手勢**：開啟 **_Ping Pong_** 網頁伺服器
     
     ![image](https://github.com/user-attachments/assets/41076220-01dc-49fe-9ba1-3da28f39f4de)
---

Enjoy playing Subway Surfers with your body movements! 🚀

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

**生成 SSL 憑證**
```bash
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


