2D Continuous Collision Detection Visualizer

基于 HTML5 Canvas 的连续碰撞检测与墙面滑行算法可视化工具。

项目背景

本项目源于一个基于 Go 语言开发的 2D 太空杀游戏的服务端移动系统。为支持 AI 机器人，移动和碰撞逻辑全部在服务端实现。为最大限度降低同步与计算频率，项目采用了时间确定性计算策略，并融合连续碰撞检测和墙面滑行算法，显著提升了移动的流畅性与准确性。

可视化工具

为了验证算法正确性并易于分析，本项目将 Go 服务端的核心算法移植为 JavaScript，并实现了交互式可视化编辑器。

本项目实现的移动系统具备以下特性：

• 时间确定性：给定 t0 时刻的状态（位置、角度、速度），可计算任意 t 时刻的精确位置
• 连续碰撞检测：检测整条移动路径，避免高速物体穿透障碍物
• 墙面滑行：玩家斜向碰撞时沿墙面滑动，提供流畅的移动体验
• 性能优化：通过空间分割和包围盒优化，支持大量障碍物的实时计算

功能特性

交互式编辑器

• 编辑工具：矩形、多边形、顶点编辑、移动、选择
• 视图控制：滚轮缩放、中键拖拽平移、右键旋转玩家朝向
• 场景管理：JSON 格式保存和加载
• 预设场景：6 个典型场景演示不同的碰撞情况

可视化调试

• 轨迹渲染：用不同颜色区分正常移动（蓝）、碰撞（红）、滑行（黄）
• 碰撞标记：显示每个碰撞检测点和碰撞半径
• 向量分解：展示墙面滑行时的向量投影计算
• 时间轴：播放动画或拖拽到特定时间点查看位置

性能监控

• FPS 和帧耗时
• 轨迹计算时间
• 采样点数量和碰撞检测次数
• 实时性能统计

快速开始

直接在浏览器中打开 index.html 即可。

项目结构

demo/
├── index.html              # 主页面
├── css/
│   └── style.css          # 编辑器样式
└── js/
    ├── vector2d.js        # 2D 向量运算
    ├── collision.js       # 碰撞检测（点在多边形、圆与多边形、路径碰撞）
    ├── wallslide.js       # 墙面滑行算法
    ├── movement.js        # 移动引擎（核心）
    ├── renderer.js        # Canvas 渲染
    ├── presets.js         # 预设场景
    ├── main.js            # 主程序
    ├── debug/
    │   └── profiler.js    # 性能分析
    ├── editor/
    │   ├── viewport.js    # 视口管理
    │   ├── tools.js       # 编辑工具
    │   └── serializer.js  # 场景序列化
    └── utils/
        └── spatial-grid.js # 空间网格

许可证

MIT License

---

Created for educational purposes to demonstrate game physics algorithms.