在简单的Javascript块破坏游戏中改进碰撞检测

时间:2018-04-04 09:53:10

标签: javascript canvas collision-detection

所以我有一个简单的阻挡破坏游戏(玩家控制球拍弹跳球应该击中并摧毁游戏块,简单的东西)。

或多或少已完成,但我正在寻找改进碰撞检测的方法。

我使用的碰撞检测在大多数情况下运行得很好,但有时当球撞到块的角落时,碰撞检测工作无法预测,我试图摆脱这种行为。

这基本上是我的碰撞检测确定球需要弹回的方向:

                    if (xdistancefromcenter < ydistancefromcenter)
                    {
                        dy = -dy;
                    }
                    else
                    {
                        dx = -dx;
                    }

dx和dy是球速度的变量,x / y distancefromcenter是在函数中较早计算的,用于确定球与其碰撞的块中心的x和y距离

这很简单,我尝试用一​​个更复杂的解决方案替换它,通过考虑球接近方块的方向来预先确定它可以反弹的可能方向然后我添加了要求我检查哪个象限的语句球最接近的方格。我不确定我是否只是在这个解决方案的逻辑阶段失败了,或者它变得太过庞大,但是这个解决方案比我试图实现它的初始解决方案更糟糕。

这是一个方向的代码片段(Ball以正dy和dx行进),其他方向是用相同的逻辑完成的:

                    else if (dy > 0 && dx > 0)
                    {
                        if (which_y_side = 2)
                        {
                            dx = -dx;
                        }
                        else
                        {
                            if (which_x_side = 2)
                            {
                                dy = -dy;
                            }
                            else if (xdistancefromcenter < ydistancefromcenter)
                            {
                                dy = -dy;
                            }
                            else
                            {
                                dx = -dx;
                            }
                        }

无论如何,我自己设法解决了两个问题:

  • 球的速度不能超过一定范围或游戏运行的画布刷新率使得无法进行碰撞检测作为精确计算

  • 我必须在碰撞检测中添加一个变量,确保画布在允许另一次碰撞之前至少刷新一次,因为游戏可能认为它必须立即与两个块碰撞造成坏行为

无论如何,这是一个有效的JSFiddle链接代码,以便您可以获得更好的图片。

与碰撞相关的所有内容都应出现在“CollisionDetection”函数中。

JSFiddle链接:https://jsfiddle.net/unkk5mLd/

(对不起,您可能需要稍微缩放JSFiddle,因为画布对于JSFiddle中的窗口来说太大了)

就数学而言,球被认为是一个正方形(虽然因为它太小了,所以它并不重要)。

“whichxside”和“whichyside”变量是碰撞检测的第二个实现中的残余物我展示了一个例子(代码片段#2),我目前没有在“实时版本”中使用它们

0 个答案:

没有答案