javascript - 当乒乓 Racket 移动时， Canvas 球会朝错误的方向弹跳

Question

我想从一张纸条开始。我尝试使用 jsfiddle 但由于某种原因 HTML5 Canvas 不起作用。因此，作为解决方法，我使用了 http://jsbin.com/gugihuwegopa/1/ .要使用此站点进行编辑，请单击窗口右上角的编辑按钮。无论如何，我的问题是，当 Racket 不动时，球会正确地从四面八方反弹(nomove 变量与此无关，它只是用“w”键让它消失).但是，当我用鼠标将 Racket 移向球时，球卡在 Racket 内。我认为这是因为它没有足够快地更新桨的位置，以至于球最终落在里面，而我的代码继续导致球在里面弹跳。 (直到将桨快速移开并且它松开)。是的，我试过将 cxt.fillRect 放在 cxt.arc() 之前。有时球也会穿过 Racket 。我认为解决这个问题的方法是在我的两个 if 语句中考虑球的方向:

if(y+ymove>=w && y+ymove<=w+h && x>=s && x<=s+l ) ymove*=-1; //top and bottom
if(x+xmove>=s && x+xmove<=s+l && y+ymove<=w+h && y+ymove>=w ) xmove*=-1; //left and right

我尝试过的其他一些方法包括:

    if(y+ymove>=w && y+ymove<=w+h && x>=s && x<=s+l && centerY+17.5 < y+ymove+5 && centerX+12.5 < x+xmove+5) ymove*=-1; //top and bottom, extra +5 for radius
    if(x+xmove>=s && x+xmove<=s+l && y+ymove<=w+h && y+ymove>=w && centerX+12.5 < x+xmove+5 && centerY+17.5 < y+ymove+5) xmove*=-1; //left and right

所以基本上，无论我如何移动 Racket ，我只需要球正确弹跳即可。随意编辑所有你想要的，即使这意味着添加更多的 if 语句。我要问的是绝对没有 JQuery。提前致谢。

Answer 1

我建议您对代码进行更友好的处理以获得帮助，删除注释并仅保留您需要修复的部分。

关于你的问题，你可以做的一件事是使用一个标志，如果球击中 Racket ，将标志设置为 True，进行一次重定向并停止检查碰撞，直到标志为假。

当然应该有更好的解决方法，但这只是一个开始。