# car-front

**Repository Path**: hngcadmin/car-front

## Basic Information

- **Project Name**: car-front
- **Description**: 这是一个纯前端可交互原型，按客户需求实现驾驶舱视角、Beginner/Advanced HUD、键盘驾驶反馈、鼠标调节反馈、胎温状态机和警告动画。不包含后台、数据采集、localStorage 存储、JSON/CSV 导出。

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-24
- **Last Updated**: 2026-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 赛车模拟器 HUD 高保真前端原型

这是一个纯前端可交互原型，按客户需求实现驾驶舱视角、Beginner/Advanced HUD、键盘驾驶反馈、鼠标调节反馈、胎温状态机和警告动画。不包含后台、数据采集、localStorage 存储、JSON/CSV 导出。

## 启动方式

推荐在当前目录启动静态服务：

```bash
python3 -m http.server 8080
```

然后在浏览器打开：

```text
http://localhost:8080
```

如果 `8080` 端口被占用，可以换一个端口，例如：

```bash
python3 -m http.server 8123
```

对应打开：

```text
http://localhost:8123
```

也可以直接双击 `index.html` 打开，但用本地服务演示更稳定。

## 演示流程

1. 打开页面后先展示驾驶舱赛道背景和 Beginner HUD。
2. 按住 `W`，速度、RPM、油量和快捷键高亮会实时变化。
3. 按 `Shift` 升挡，按 `Ctrl` 降挡，Beginner 和 Advanced 的挡位同步更新。
4. 按住 `S` 重刹，前轮胎温上升；超过阈值后 Beginner 状态条变红，右上角过热警告闪烁。
5. 切换到 `Advanced HUD`，查看圈速、Delta、位置、油量、速度、挡位、RPM、胎温矩阵和底盘控件。
6. 高速时按住 `A` 或 `D`，外侧轮胎温度独立升高。
7. 点击 `DIFF` / `BRAKE` 的左右箭头，数值实时变化并出现蓝色高亮反馈。
8. 如需重新演示初始状态，刷新页面即可重置速度、胎温、挡位和底盘参数。

底部快捷键栏也可以直接用鼠标点击或触摸操作，适合客户现场演示；实体键盘和屏幕按键两种方式都会触发同一套 HUD 反馈。

## 文件说明

- `index.html`：页面结构和 HUD 信息层级。
- `styles.css`：高保真视觉样式、毛玻璃面板、状态色、响应式适配和动画。
- `script.js`：键盘/鼠标交互、车辆数值模拟、胎温阈值判断、模式切换。
- `assets/cockpit-shanghai.png`：驾驶舱赛道背景图。

## 交付范围

已实现：

- HTML 页面、驾驶舱背景、HUD 容器和模式切换。
- 深灰半透明面板、毛玻璃、白色主文本、蓝/红/绿状态色、字号层级。
- Beginner HUD：速度、挡位、车辆健康状态、过热警告降维显示。
- Advanced HUD：圈速、Delta、位置、油量、速度、挡位、RPM、胎温矩阵、BRAKE/DIFF 控件。
- 键盘交互：`W` 加速、`S` 刹车、`A/D` 转向、`Shift/Ctrl` 换挡。
- 鼠标交互：`DIFF/BRAKE` 左右箭头调节、数值更新、蓝色高亮反馈。
- 状态机逻辑：胎温阈值、危险态、Beginner/Advanced 状态映射、Delta 红绿显示。
- 动画体验：状态过渡、按键反馈、警告闪烁、数值动态变化。

未包含：

- 数据采集。
- 前端缓存或 localStorage。
- JSON/CSV 导出。
- 后台服务或数据库。