Javascript 画布html5中的冲突检测

我有这个碰撞检测功能，但它不适合我。 当圆圈碰到横杆时，它应该放在横杆底部，游戏结束。 这是我的JSFIDLE：

正如你所看到的，一个问题正在发生，球被卡在空气中而不是杆的底部，我认为这个功能不能正常工作

 function collides(rx, ry, rw, rh, cx, cy, cradius) {
            var x = Math.abs(cx - rx);
            var y = Math.abs(cy - ry);
            if (x > rw / 2 + cradius) { return (false); };
            if (y > rh / 2 + cradius) { return (false); };
            if (x <= rw / 2) { return (true); };
            if (y <= rh / 2) { return (true); };
            var dx = x - rw / 2;
            var dy = y - rh / 2
            return (dx * dx + dy * dy <= cradius * cradius);
        }

功能冲突（rx、ry、rw、rh、cx、cy、cradius）{
var x=数学绝对值（cx-rx）；
var y=数学绝对值（cy-ry）；
如果（x>rw/2+cradius）{return（false）；}；
如果（y>rh/2+cradius）{return（false）；}；
如果（x）当我运行此测试时，球位于页面底部，当我击中空格键时，球会上下跳动。你使用的浏览器是什么？我使用的是FFyes，游戏的目标是：当你击中其中一个空格键时，球应该放在空格键的底部，你已经点击了！我发布了你正在使用的代码ng昨晚很晚了，由于我的疲劳，它有一个拼写错误和一个遗漏。现在修复了…非常抱歉！请查看原始帖子获得修复的答案（再次，抱歉）：非常感谢您提供了这个精彩的答案