p5.collide2D向量版API指南：用createVector写出更优雅的碰撞代码

p5.collide2D向量版API指南：用createVector写出更优雅的碰撞代码

【免费下载链接】p5.collide2DA collision detection library for 2D geometry in p5.js项目地址: https://gitcode.com/gh_mirrors/p5/p5.collide2D

p5.collide2D 是一款面向 p5.js 的轻量级 2D 碰撞检测库，它的向量版 API 让你直接用createVector()创建的p5.Vector对象作为位置参数，让 2D 游戏的碰撞代码更简洁、更不易出错。本指南面向新手，用最短的篇幅讲清楚向量版 API 的使用方法、常用函数清单和实用技巧。

📌 p5.collide2D 是什么？

• 覆盖 18 类 2D 碰撞检测：点、圆、椭圆、矩形、线段、弧、三角形、多边形之间的组合
• 所有碰撞函数都返回true/false，拿到结果即可直接驱动游戏逻辑
• 自带collideDebug()调试模式，可在屏幕上直观画出碰撞点
• 零外部依赖，库体积极小，基于 CC BY-NC-SA 4.0 许可证

✅ 为什么值得换用向量版碰撞 API？

传统坐标式调用时，像矩形对矩形检测需要一口气传入 8 个参数：x, y, width, height, x2, y2, width2, height2。对象一旦动起来，参数很容易写错顺序。

向量版 API 把"位置"和"尺寸"各自打包成一个p5.Vector，参数直接砍半：

const rectA = createVector(200, 200); // 矩形A左上角 const sizeA = createVector(100, 150); // 矩形A宽高 const rectB = createVector(mouseX, mouseY); const sizeB = createVector(50, 75); const hit = collideRectRectVector(rectA, sizeA, rectB, sizeB);

好处很直接：

• 参数更少：再也不用数第几个参数是 x2 还是 y2
• 天然契合 p5.js 向量系统：物体的pos、vel本来就是向量，位移计算（add、sub、mult）可以直接复用
• 面向对象的写法更顺：把位置存进对象属性，检测时原样传入即可

🔧 快速上手向量版：三步搞定

1. 获取库文件：git clone https://gitcode.com/gh_mirrors/p5/p5.collide2D
2. 在 HTML 中引入：先加载 p5.js 核心库，再加载p5.collide2d.js（引入方式详见 README.md 中的说明）
3. 编写检测代码：用createVector()创建向量，调用带Vector后缀的碰撞函数

⚡ 向量版 API 使用规则：函数名加 Vector 后缀

整个向量版 API 只需记住一句话：在函数名后面加上Vector，原来填 x/y 的位置改传p5.Vector对象。

坐标版	向量版
collidePointCircle(x, y, cx, cy, d)	collidePointCircleVector(p, c, d)
collideLineLine(x1, y1, x2, y2, x3, y3, x4, y4)	collideLineLineVector(p1, p2, p3, p4)

注意：直径、宽高、buffer（缓冲距离）这类标量参数仍是普通数字。内部实现只是把向量的.x/.y拆开调用原函数，例如 p5.collide2d.js 中的collidePointPointVector，因此行为与原 API 完全一致，不影响项目中已有的旧代码。

📋 常用向量版碰撞函数速查表

函数名	检测内容
collidePointPointVector	点 vs 点（支持 buffer 缓冲）
collidePointCircleVector	点 vs 圆
collidePointEllipseVector	点 vs 椭圆
collidePointRectVector	点 vs 矩形
collidePointLineVector	点 vs 线段
collidePointArcVector	点 vs 弧
collidePointTriangleVector	点 vs 三角形
collideCircleCircleVector	圆 vs 圆
collideRectRectVector	矩形 vs 矩形
collideRectCircleVector	矩形 vs 圆
collideLineLineVector	线 vs 线（可返回交点坐标）
collideLineCircleVector	线 vs 圆
collideLineRectVector	线 vs 矩形
collidePointPolyVector	点 vs 多边形
collideCirclePolyVector	圆 vs 多边形
collideRectPolyVector	矩形 vs 多边形
collideLinePolyVector	线 vs 多边形
collidePolyPolyVector	多边形 vs 多边形

每个函数在 README.md 的文档中都附有向量用法的注释示例，可直接对照学习。

🎮 三个典型碰撞检测场景

场景一：鼠标子弹击中敌人（圆 vs 圆）

const bullet = createVector(mouseX, mouseY); const enemy = createVector(320, 180); if (collideCircleCircleVector(bullet, 20, enemy, 40)) { // 命中！在这里播放命中特效 }

场景二：按钮点击判定（点 vs 矩形）

const mouse = createVector(mouseX, mouseY); if (collidePointRectVector(mouse, buttonPos, buttonSize)) { // 点击了按钮 }

场景三：两个多边形物体是否重叠（多边形 vs 多边形）

多边形用p5.Vector数组表示顶点，检测时直接传入两个数组：

hit = collidePolyPolyVector(polyA, polyB, true);

true表示启用"完全包含"检测（详见下文技巧部分）。

🔍 用 collideDebug 可视化碰撞点

写游戏逻辑时最难调试的就是"到底哪里撞上了"。在setup()中开启调试模式：

function setup() { collideDebug(true); }

collideLineLine、collideLineCircle、collidePolyPoly等函数检测到碰撞时，会在碰撞点位置画一个小椭圆，定位问题一目了然。

💡 实用技巧与常见问题 FAQ

1. 点对线段检测太敏感？collidePointLineVector默认 buffer 为 0.1，传入更大的值（如 0.5）可以扩大命中范围。
2. 检测"形状 vs 三角形"怎么办？库没有专门的函数，把三角形定义为 3 个顶点的向量数组，再使用对应的多边形函数即可（圆/矩形/线/多边形均可）。
3. 完全在内部算碰撞吗？collideCirclePolyVector与collideRectPolyVector默认不检测"形状完全在多边形内部"的情况（为了省去二次遍历边缘的性能开销），末尾传true即可开启。
4. 坐标系前提：矩形相关函数默认rectMode(CORNER)（前两参数是左上角），圆和椭圆默认ellipseMode(CENTER)（前两参数是中心）。
5. 性能有差别吗？向量版只是对原函数的薄封装（参考 p5.collide2d.js 中collidePolyPolyVector的实现），几乎没有性能损耗，同一个项目里两种风格可以自由混用。

📁 项目文件资料

• p5.collide2d.js：完整库源码，18 个向量版函数全部在这里
• README.md：官方文档，每个函数均带坐标版与向量版的对照示例
• package.json：库版本与构建脚本信息

🏁 写在最后

p5.collide2D 的向量版 API 一句话总结：函数名加Vector，位置参数改用createVector()。它覆盖了点、圆、矩形、线段、弧、三角形、多边形等全部 2D 几何碰撞场景，是 p5.js 游戏开发中免费、轻量、零依赖的碰撞检测利器。建议从"点 vs 圆"或"圆 vs 圆"场景入手，配合collideDebug()调试，很快就能搭起自己的第一个碰撞系统 🚀

【免费下载链接】p5.collide2DA collision detection library for 2D geometry in p5.js项目地址: https://gitcode.com/gh_mirrors/p5/p5.collide2D