在Div的边界内移动球

Question

我已经查看了如何使用jquery移动球的示例，但这些示例并不完全是我想要的。我只是想改变球来移动div盒的内边缘。到目前为止，我的球在禁区内射门，并且不会在禁区内循环。有什么建议吗？

应该执行此操作的主要功能在我的功能范围内：

rspec path/to/spec.rb:line_no

以下是我的完整运行代码：https://jsfiddle.net/qYdwR/2511/

更新https://jsfiddle.net/W4Km8/4857/

的新计划

Answer 1

处理边界条件的方式并不健全。如果球发现自身超过任何一个边界的velocity_y像素，那么速度将在每一帧上保持反转，并且球将在外太空中卡住振动（如果你在实验中你可以看到实际发生的那种情况）使窗户足够大）。更强大的方法将用

替换您的边界检查

if(newLeftPos > maxLeft) velocity_y = -Math.abs(velocity_y);
else if (newLeftPos < 0) velocity_y = +Math.abs(velocity_y);

你还应该确保速度不能超过(maxLeft-0)，并且为了完整性你还可以进行算术以使弹跳恰好发生在边界处（目前球将从不确定点反弹）稍微超出界限。）

关于球如何到达边界以外的地方，这是由于一个有趣的类型转换错误。您最初将velocity_y设置为字符串 "5"（从文本输入中读取）而不是数字 5，因此当您将其添加到currentLeftPos时，您将获得字符串添加 - 位置变为"5"，然后变为"55"，然后变为"555"。此时，您将velocity_y乘以-1，使其成为一个数字，并且该错误消失。要解决此问题，只需替换

即可

var velocity_y = $('#dy').val();

与

var velocity_y = $('#dy').val() * 1;

这一切都是第一次。