Javascript 像素完美碰撞排斥/旋转响应

我正在用HTML5做一个游戏，画布

我使用16x16个精灵，在精灵对象之间使用圆形来定义碰撞

它们也可以在游戏中轮换

现在我想知道，有没有办法检测/计算像素完美的碰撞排斥/响应，这样当两个精灵碰撞时，它们（完全对齐）/（实际上碰撞）彼此

谢谢

---

如果您不理解，请留下评论。

像素完美碰撞很容易完成，但cpu功耗非常昂贵

这就是你要做的事情：

每个精灵都有可以访问的像素数据，现在假设上面的精灵是您的精灵，您可以通过for循环列出精灵中不透明的每个像素，并对照其他精灵中的每个像素进行检查，下面是一些伪代码：

for(i = 0; i < totalPixelsInSprite; i++){

if( pixelIsNotTransparent ){

 for(z = 0; z < totalPixelsInOtherSprite; z++){
    if( (pixelco_ordinate == otherSpritePixelCo_Ordinate) && (otherSpritePixelIsOpaque)){
      // add some code to handle the collision
    }
 }

}
}

（i=0；i{ 如果（像素不透明）{ 对于（z=0；z 有关如何访问像素的详细信息，请访问此网站：

因此，这个想法基本上是获得每个不透明像素的位置，然后对照其他精灵中的每个不透明像素进行检查。实际的“检查”只是查看第一个精灵中的像素是否与第二个精灵中的像素具有相同的坐标

---

这里需要进行优化，这是一个非常粗糙的像素碰撞示例，首先您应该检查精灵的矩形是否碰撞，然后进行此检测如果矩形发生碰撞，这将节省cpu电源。

一旦发生宽相位碰撞检测（即使用网格/圆），切换到窄相位。如果可以访问单个像素值，则可以简单地使用“像素掩码”-沿移动向量移动实体，直到出现基于掩码的碰撞（即，来自不同实体的任何像素占用相同的空间），然后将其取消。抱歉，我想我真的不明白..你是要求矩形碰撞还是圆形矩形碰撞？我要求像素完美碰撞，精灵没有预定义的形状？是的，是的，是的，这就是碰撞，但我想要碰撞和碰撞的排斥/响应，你看，当两个球碰撞时，它们彼此反弹，这就是我想对精灵做的。它们的坐标有x和y变量，运动速度有vx和vy变量。所以我还想知道，如果精灵发生碰撞，vx和vy会发生怎样的变化。啊，如果像素碰撞不是不可能的话，那就更难了，这就是为什么很多人避开像素检测，而是使用精灵周围近似形状的多边形。多边形碰撞也非常困难，需要理解向量数学，这就是为什么许多人坚持聪明地使用矩形碰撞。好吧，我等着瞧，但我仍然使用我的圆碰撞-游戏中有旋转精灵，而像素碰撞对旋转精灵不起作用，如果你说的是那个游戏的话，你使用的圆圈碰撞是可以的。圆圈碰撞对于游戏来说是最简单也是最好的。你确定这是不可能的，难道你不能在旋转后计算画布像素而不是计算精灵像素吗？