XXHolic

引子在 Collision Detection ：Transformation 中介绍了动态的碰撞检测，至此 CollisionDetection 项目的主要内容差不多都涉及了。在查询资料的时候，还接触到一些其它的检测方法，现在来看一下另外一种检测方法： Separating Axis Theorem 。OriginMy GitHub相关知识点矢量和标量简单的来说：矢量（vector）也称向量，有大小和方向的量，例如加速度、力。标量（scalar）只有大小（magnitude）的量，例

引子在 Collision Detection ：Triangle 中对三角形的碰撞检测从另外一种思路进行思考，到目前为止介绍的都是静态的检测，接着来看一下动态的碰撞检测。以下示例未做兼容性检查，建议在最新的 Chrome 浏览器中查看。OriginMy GitHubTransformation这是示例页面。基于 canvas 的 translate、 rotate、 scale 三种转换形成的动画，看看如何进行动态的碰撞检测。基于 canvas 的动画原理是每隔一段时间进行重绘，所以在

引子在 Collision Detection ：Polygon 中主要介绍了多边形相关的碰撞检测，接着来看看三角形的情况。三角形同样属于多边形，因此，多边形的方法对三角形都适用。在这里探讨一下另外一种思路。以下示例未做兼容性检查，建议在最新的 Chrome 浏览器中查看。OriginMy GitHubTriangle/Point这是示例页面。三角形与点的碰撞检测，可以从面积的角度进行切入，看下面的一张图：如果点在三角形内，那么与三角形顶点相连，切割成了三部分，这三部分的面积之和，如果

引子在 Collision Detection ：Line 中主要介绍了直线相关的碰撞检测，接着来看看更加复杂一些的多边形的情况。以下示例未做兼容性检查，建议在最新的 Chrome 浏览器中查看。OriginMy GitHubPolygon/Point这是示例页面。多边形与点的碰撞检测，需要每一条边与点进行检测，才能确定是否产生了碰撞：const points = []; // 多边形顶点坐标const pointsLen = points.length;let collision

引子在 Collision Detection ：Rectangle 中主要介绍了矩形相关的碰撞检测，接着来看看直线的情况。以下示例未做兼容性检查，建议在最新的 Chrome 浏览器中查看。OriginMy GitHubLine/Point这是示例页面。线与点的碰撞检测，观察下面一张图：从图中可以发现，当点在线上时，到两个端点的距离之和与线的长度相同。两点之间的距离，同样使用之前用到过的勾股定理。考虑到计算的精度误差，可以设置一个误差允许范围值，这样会感觉更加自然一些。/* * (

引子在 Collision Detection ：Point 中主要介绍了点的碰撞检测，接着来看看矩形的情况。以下示例未做兼容性检查，建议在最新的 Chrome 浏览器中查看。OriginMy GitHubRectangle/Point这是示例页面。绘制矩形可以通过四个点的坐标进行绘制，也可以通过一个顶点的坐标，结合矩形的宽高进行绘制：矩形与点的碰撞检测，只要点的坐标在矩形的坐标范围之内即可：/* * (px,py) 点的坐标 * (rx,ry) 矩形顶点的坐标 * rw 矩形

引子碰撞检测（Collision Detection）这个东西，之前找 canvas 相关资料的时候碰到过，有些好奇，就去尝试了解一下。OriginMy GitHub简介与碰撞检测有些类似的一个概念：命中检测（Hit-testing），也被广泛运用。在计算机图形编程中，命中检测是确定用户控制的光标（或触摸屏上的触摸点）是否与屏幕上绘制的给定图形对象（如形状）产生相交的过程。根据这个...

引子在 Collision Detection 中对碰撞检测作了简单的介绍。在查询资料时，在 Github 上发现了 CollisionDetection 这个项目。查看之后，发现关于碰撞检测的讨论，由浅入深，很适合学习。在其基础上，做了 JavaScript 版本的实现。以下示例未做兼容性检查，建议在最新的 Chrome 浏览器中查看。OriginMy GitHubPoint/Point这是示例页面。最早的碰撞检测是检测两个点的碰撞。为了检测它们是否接触，我们只需要检查它们的 X 和 Y