将球移动到 Div 的边界内

Question

我查看了有关如何使用 jquery 移动球的示例，但这些示例并不是我要找的。我只是想改变球在 div 框的内边缘周围移动。到目前为止，我的球在禁区外射门，不会在禁区内打圈。有什么建议吗？

应该执行此操作的主要功能在我的功能中：

function moveMe() {
// Read the current left position of the ball
var currentLeftPos = parseInt($("#ball").css('left'));

// define the new position
var newLeftPos = currentLeftPos + velocity_y;

// If the left position is greater than or equal to the maximum distance allowed or
//   less than or equal to zero, then change the direction.

if( newLeftPos >= maxLeft || newLeftPos <= 0)
    velocity_y *= -1; // multiply the value by -1

// update the position
$("#ball").css('left', newLeftPos + 'px');

var i = 1;
var interval = setInterval( increment, 1000);
$('#sec-played').text(interval);
function increment(){
i = i % 360 + 1;
}
}

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

有更新的新程序https://jsfiddle.net/W4Km8/4857/

Answer 1

您处理边界条件的方式不够稳健。如果球发现自己超出任一边界超过 velocity_y 个像素，则速度将在每一帧上保持反转，并且球将卡在外部 space 中振动（您可以实际看到发生在你的演示，如果你使 window 足够大）。一种更可靠的方法是用

代替边界检查

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

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

至于球最初是如何飞出边界这么远的，那是由于一个有趣的类型转换错误。您最初将 velocity_y 设置为 string "5"（从文本输入中读取）而不是 number 5，所以当您将它添加到 currentLeftPos 时，您将获得字符串添加 - 位置变为 "5"，然后是 "55"，然后是 "555"。那时你将 velocity_y 乘以 -1，使其变成一个数字，错误就消失了。要解决此问题，只需替换

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

和

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

第一次就成功了。

将球移动到 Div 的边界内

Move ball inside border of Div

html

jquery

setinterval