# 反应速度测试

**Repository Path**: LeaBoz/ReactionTest

## Basic Information

- **Project Name**: 反应速度测试
- **Description**: 1. 初始状态：

页面显示欢迎信息和游戏规则。

统计信息区域为空。

2. 开始测试：

点击屏幕开始测试。

背景变为红色，显示“请耐心等待背景变为绿色...”。

3. 结束测试：

背景变为绿色后，立即点击屏幕。

显示本次反应时间、评价和统计信息。

4. 多次测试：

每次测试结束后，统计信息会更新最快、最慢和平均反应时间。

玩家可以无限次测试，所有点击信息都会被记录。
- **Primary Language**: HTML
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-22
- **Last Updated**: 2025-02-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 反应速度测试游戏说明

## 概述
这是一个简单的反应速度测试游戏，玩家需要在屏幕背景变为绿色时尽快点击屏幕。游戏会记录每次的反应时间，并计算最快、最慢和平均反应时间。

## 功能特点
1. **游戏规则**：
   - 初始页面为白色背景，显示游戏规则。
   - 点击屏幕后，背景变为红色，随机等待1至3秒后变为绿色。
   - 当背景变为绿色时，玩家需尽快点击屏幕。
   - 点击后，页面显示本次反应时间，并更新统计信息。

2. **统计信息**：
   - 记录玩家的最快反应时间、最慢反应时间和平均反应时间。
   - 统计信息显示在屏幕底部，格式为：`最快：200ms | 最慢：500ms | 平均：320.50ms`。

3. **无限次测试**：
   - 玩家可以无限次测试，所有点击信息都会被记录。
   - 统计信息会一直累积，直到玩家刷新页面。

4. **用户反馈**：
   - 根据反应时间提供不同的反馈：
     - 小于200ms：`太快了！你是不是提前点击了？`
     - 200ms-300ms：`太棒了！你的反应速度非常快！`
     - 300ms-500ms：`不错！继续保持！`
     - 大于500ms：`可以再快一点哦！`

## 代码结构

### HTML 部分
- **页面结构**：
  - 包含一个 `div` 用于显示游戏提示信息（`#message`）。
  - 包含一个 `div` 用于显示统计信息（`#stats`）。

- **样式**：
  - 使用 `flex` 布局将内容居中显示。
  - 统计信息固定在屏幕底部，使用 `white-space: nowrap` 确保不换行。

### JavaScript 部分
- **变量**：
  - `startTime`：记录背景变为绿色的时间。
  - `timeoutId`：用于存储 `setTimeout` 的ID，以便取消计时器。
  - `isTestRunning`：标记测试是否正在进行。
  - `reactionTimes`：数组，用于存储每次的反应时间。

- **函数**：
  - `startTest()`：开始测试，背景变为红色，随机等待1至3秒后变为绿色。
  - `endTest()`：结束测试，计算反应时间并更新统计信息。
  - 事件监听器：监听屏幕点击事件，根据当前状态调用 `startTest()` 或 `endTest()`。

## 使用方法
1. 打开页面，阅读游戏规则。
2. 点击屏幕任意位置开始测试。
3. 等待背景变为绿色后，立即点击屏幕。
4. 查看本次反应时间和统计信息。
5. 重复点击屏幕，继续测试。

## 示例运行流程
1. **初始状态**：
   ```
   欢迎来到反应速度测试！
   
   点击屏幕开始测试，当背景变为绿色时，立即点击屏幕。
   
   准备好了吗？点击屏幕任意位置开始！
   ```

2. **开始测试**：
   - 背景变为红色，显示：
     ```
     请耐心等待背景变为绿色...
     
     别急，变色后再点击哦！
     ```

3. **结束测试**：
   - 背景变为绿色后，立即点击屏幕。
   - 显示本次反应时间和反馈：
     ```
     反应时间：356ms
     
     太棒了！你的反应速度非常快！
     
     点击屏幕任意位置，重新开始测试
     ```
   - 更新统计信息：
     ```
     最快：200ms | 最慢：500ms | 平均：320.50ms
     ```

4. **多次测试**：
   - 每次测试结束后，统计信息会更新。
   - 玩家可以无限次测试。