在前端开发领域，物理引擎是一个相对小众的话题，它通常都是作为游戏开发引擎的附属工具而出现的，独立的功能演示作品常常给人好玩但是无处可用的感觉。仿真就是在计算机的虚拟世界中模拟物体在真实世界的表现（动力学仿真最为常见）。仿真能让画面中物体的运动表现更符合玩家对现实世界的认知，比如…

最近做了一个 H5 小游戏，游戏的玩法是小汽车抢停车位，需要手指拖拽小汽车躲避障碍快速进入停车位。 游戏复杂的部分可能就是小红车和障碍物的碰撞检测，因为地图不是固定的，会有不同的游戏地图。刚开始想把障碍物切成一块一块的，然后给几种排列方式，但需要测量很多数据，觉得还是有些复杂。…

“碰乜鬼嘢啊，碰走晒我滴靓牌”。想到 “碰” 就自然联想到了 “麻将” 这一伟大发明。当然除了“碰”，洗牌的时候也充满了各种『碰撞』。

注：1、本文只讨论2d图形碰撞检测。2、本文讨论圆形与圆形，矩形与矩形、圆形与矩形碰撞检测的向量实现 2D游戏中，通常使用矩形、圆形等来代替复杂图形的相交检测。因为这两种形状的碰撞检测速度是最快的。其中矩形包围盒又可以分为轴对齐包围盒（AABB, Axis Aligned Bo…

这次的H5游戏是做在支付宝小程序中的，支付宝小程序官方并没有建议使用什么样的方式亦或是什么样的物理引擎去开发游戏相关内容，当然它也提供了Canvas的能力，如果使用原生canvas的能力去做，你就不可避免的需要处理图层，纹理，精灵图，Ticker，元素碰撞，动画时间轴，资源加载…

在 Collision Detection ：Transformation 中介绍了动态的碰撞检测，至此 CollisionDetection 项目的主要内容差不多都涉及了。在查询资料的时候，还接触到一些其它的检测方法，现在来看一下另外一种检测方法： Separating Ax…

下文将由易到难的顺序介绍上述各种碰撞检测方法：外接图形判别法 > 其他 > 光线投射法 > 分离轴定理。

说明：只开源第一版代码。 何为第一版，就是用webpack+babel打包的版本。 这个是参考JetLua提供的pixi开发框架以及colloc微信小游戏的版本。 感谢作者分享的pixi.js开发微信小游戏。 因为都是使用webpack+babel打包，导致打包后文件里npm第…

宝，下雨了。什么雨？红包雨呀，笨！本期带大家了解一款轻量级且接口友好的 HTML5 2D 互动引擎 Tiny.js。