# RunVision

**Repository Path**: zccbbg/run-vision

## Basic Information

- **Project Name**: RunVision
- **Description**: 是一个基于浏览器摄像头的体感跑步小游戏。玩家只需要站在摄像头前原地跑，游戏会通过人体姿态识别检测腿部运动频率，并把动作转换成角色速度，和电脑选手进行一场短跑比赛。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2026-05-03
- **Last Updated**: 2026-05-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 极速开跑

一个基于浏览器摄像头的人体跑步识别小游戏。玩家站在摄像头前原地跑，游戏会根据腿部关键点的运动频率换算玩家速度，并和电脑角色进行赛跑。比赛结束后根据距离判断 `Win` 或 `Lose`。

## 功能

- 调用浏览器摄像头识别玩家动作
- 使用人体姿态识别判断原地跑步频率
- 玩家角色和电脑角色实时赛跑
- 点击一个按钮完成开启摄像头、开始比赛、倒计时、重新开始
- 比赛前有 `3、2、1` 倒计时
- 比赛结束后显示大号 `WIN` / `LOSE` 动效
- 比赛结束后自动关闭摄像头
- 可通过滑杆调整电脑速度

## 启动方式

这是一个纯静态网页项目，不需要安装依赖，也没有构建步骤。

推荐用本地静态服务打开：

```powershell
cd "C:\Users\zccbb\Documents\New project"
python -m http.server 5173
```

然后在浏览器访问：

```text
http://localhost:5173
```

不推荐直接双击 `index.html` 打开。摄像头 API 通常要求页面运行在 `localhost` 或 HTTPS 环境下。

## 玩法

1. 点击 `开启摄像头`。
2. 浏览器弹出权限请求时，允许摄像头。
3. 摄像头开启成功后，按钮会变成 `开始比赛`。
4. 点击 `开始比赛`，等待 `3、2、1` 倒计时。
5. 倒计时结束后，面对摄像头原地跑。
6. 比赛结束后会显示 `WIN` 或 `LOSE`，并自动关闭摄像头。
7. 想再玩一局，点击 `重新开启摄像头`。

## 技术实现

摄像头调用使用浏览器原生 API：

```js
navigator.mediaDevices.getUserMedia(...)
```

人体姿态识别使用 MediaPipe Pose Landmarker：

```js
@mediapipe/tasks-vision
```

游戏主要识别这些人体关键点：

- 髋部
- 膝盖
- 脚踝

通过左右腿交替抬起的变化频率计算步频，再把步频换算成玩家速度。电脑速度由页面上的滑杆控制。

## 文件结构

```text
.
├── index.html   # 页面结构
├── styles.css   # 游戏界面、赛道、角色和动效样式
├── game.js      # 摄像头、姿态识别、比赛逻辑
└── README.md    # 项目说明
```

## 常见问题

### 摄像头开启失败

可以检查以下情况：

- 是否通过 `http://localhost:5173` 打开页面
- 是否直接双击了 `index.html`
- 浏览器是否拒绝了摄像头权限
- 摄像头是否被会议软件、相机应用或其他网页占用
- 电脑是否有可用摄像头

### 识别不明显

可以尝试：

- 站远一点，让摄像头拍到上半身和腿部
- 保证光线充足
- 正面对着摄像头
- 原地跑时抬膝更明显一些

### 电脑太快或太慢

使用页面右侧的 `电脑速度` 滑杆调整难度。