Javascript 为什么彩色的球不断地从书页边缘落下

我有以下JavaScript；这样做的目的是，圆圈将在屏幕上反弹，脱离所有边缘

我使用了一个存储窗口高度和宽度的变量，因为我认为无法从屏幕底部反弹可能是因为节点正在逐渐扩展，所以我最初对jQuery（window）.height（）的检查是没有意义的

然而，在解决了使窗口在边缘反弹的这种方法之后，或者尝试了（它在），我没有看到球从窗口的一个边缘反弹，如果你观察滚动条，你可以看到它们在落下时远远超出了窗口的原始底部

    var viewport_height = jQuery(window).height()
    var viewport_width = jQuery(window).width();
    var available_images = ['red.png', 'orange.png', 'yellow.png',
      'green.png', 'blue.png', 'purple.png', 'brown.png', 'black.png',
      'grey.png']; //, 'white.png'];
    var bodies = [];
    for(var i = 0; i < 3; ++i)
        {
        body = {id: i, velocity_y : Math.random(),
          velocity_x: Math.random() * 10 - 5,
          position_x: Math.random() * viewport_width - 100,
          position_y: Math.random() * viewport_height - 100};
        document.write('<img id="' + i + '" src="' + available_images[Math.floor(Math.random() * available_images.length)] + '" style="z-index: ' + i + '" />');
        bodies[bodies.length] = body;
        }
    function iterate()
        {
        for(var index = 0; index < bodies.length; ++index)
            {
            bodies[index].velocity_y += .1;
            bodies[index].position_x += bodies[index].velocity_x;
            bodies[index].position_y += bodies[index].velocity_y;
            var position = jQuery('#' + index).position();
            if (position.top + 100 > viewport_height)
                {
                bodies[index].velocity_y = - bodies[index].velocity_y;
                bodies[index].position_y = viewport_height - 100;
                }
            if (position.top < 0)
                {
                bodies[index].velocity_y = - bodies[index].velocity_y;
                bodies[index].position_y = 0;
                }
            if (position.left > viewport_width - 100)
                {
                bodies[index].velocity_x = -bodies[index].velocity_x;
                bodies[index].position_x = viewport_width - 100;
                }
            jQuery('#' + index).css('margin-top',
              bodies[index].position_y + 'px');
            jQuery('#' + index).css('margin-left',
              bodies[index].position_x + 'px');
            }
        }

    setInterval(iterate, 30);

var viewport\u height=jQuery（窗口）.height（）
var viewport_width=jQuery（window）.width（）；
var available_images=['red.png'、'orange.png'、'yellow.png'，
“green.png”、“blue.png”、“purple.png”、“brown.png”、“black.png”，
'grey.png']；/，'白色.png']；
var主体=[]；
对于（变量i=0；i<3；++i）
{
body={id:i，velocity_y:Math.random（），
速度x:Math.random（）*10-5，
位置x:Math.random（）*视口宽度-100，
位置y:Math.random（）*视口高度-100}；
文件。写（“”）；
身体[身体.长度]=身体；
}
函数iterate（）
{
对于（var指数=0；指数视口高度）
{
Bodys[index]。速度_y=-Bodys[index]。速度_y；
实体[索引]。位置y=视口高度-100；
}
如果（位置顶部<0）
{
Bodys[index]。速度_y=-Bodys[index]。速度_y；
实体[索引]。位置_y=0；
}
如果（position.left>视口宽度-100）
{
物体[索引]。速度_x=-物体[索引]。速度_x；
实体[索引]。位置x=视口宽度-100；
}
jQuery（“#”+index）.css（'margin-top'，
实体[索引]。位置_y+‘px’；
jQuery（“#”+index）.css（'margin-left'，
实体[索引]。位置_x+‘px’；
}
}
setInterval（迭代，30）；

---

我想了解如何使此代码在原始视口的边界处设置有弹性的墙。

更改“上边距”和“左边距”时，窗口的宽度和高度也开始更改

我通过将

css（）

调用设置margin top和margin left为

offset（）

来实现这一点。我还添加了另一个if语句，以确保球也从左侧反弹：

 var viewport_height = jQuery(window).height()
    var viewport_width = jQuery(window).width();
    var available_images = ['red.png', 'orange.png', 'yellow.png',
      'green.png', 'blue.png', 'purple.png', 'brown.png', 'black.png',
      'grey.png']; //, 'white.png'];
    var bodies = [];
    for(var i = 0; i < 3; ++i)
        {
        body = {id: i, velocity_y : Math.random(),
          velocity_x: Math.random() * 10 - 5,
          position_x: Math.random() * viewport_width - 100,
          position_y: Math.random() * viewport_height - 100};
        document.write('<img id="' + i + '" src="http://cats.stornge.com/' + available_images[Math.floor(Math.random() * available_images.length)] + '" style="z-index: ' + i + '" />');
        bodies[bodies.length] = body;
        }
    function iterate()
        {
        for(var index = 0; index < bodies.length; ++index)
            {
            bodies[index].velocity_y += .1;
            bodies[index].position_x += bodies[index].velocity_x;
            bodies[index].position_y += bodies[index].velocity_y;
            var position = jQuery('#' + index).position();
            if (position.top + 100 > viewport_height)
                {
                bodies[index].velocity_y = - bodies[index].velocity_y;
                bodies[index].position_y = viewport_height - 100;
                }
            if (position.top < 0)
                {
                bodies[index].velocity_y = - bodies[index].velocity_y;
                bodies[index].position_y = 0;
                }
            if (position.left > viewport_width - 100)
                {
                bodies[index].velocity_x = -bodies[index].velocity_x;
                bodies[index].position_x = viewport_width - 100;
                }
            if (position.left < 0)
                {
                bodies[index].velocity_x = -bodies[index].velocity_x;
                bodies[index].position_x = 0;
                }
                jQuery('#' + index).offset({top: bodies[index].position_y, left: bodies[index].position_x });
            }
        }

   setInterval(iterate, 30);

var viewport\u height=jQuery（窗口）.height（）
var viewport_width=jQuery（window）.width（）；
var available_images=['red.png'、'orange.png'、'yellow.png'，
“green.png”、“blue.png”、“purple.png”、“brown.png”、“black.png”，
'grey.png']；/，'白色.png']；
var主体=[]；
对于（变量i=0；i<3；++i）
{
body={id:i，velocity_y:Math.random（），
速度x:Math.random（）*10-5，
位置x:Math.random（）*视口宽度-100，
位置y:Math.random（）*视口高度-100}；
文件。写（“”）；
身体[身体.长度]=身体；
}
函数iterate（）
{
对于（var指数=0；指数视口高度）
{
Bodys[index]。速度_y=-Bodys[index]。速度_y；
实体[索引]。位置y=视口高度-100；
}
如果（位置顶部<0）
{
Bodys[index]。速度_y=-Bodys[index]。速度_y；
实体[索引]。位置_y=0；
}
如果（position.left>视口宽度-100）
{
物体[索引]。速度_x=-物体[索引]。速度_x；
实体[索引]。位置x=视口宽度-100；
}
如果（位置左<0）
{
物体[索引]。速度_x=-物体[索引]。速度_x；
实体[索引]。位置_x=0；
}
jQuery（'#'+index）.offset（{top:bodies[index].position_y，left:bodies[index].position_x}）；
}
}
setInterval（迭代，30）；

更改页边距顶部和左侧时，窗口的宽度和高度也开始更改

我通过将

css（）

调用设置margin top和margin left为

offset（）

来实现这一点。我还添加了另一个if语句，以确保球也从左侧反弹：

 var viewport_height = jQuery(window).height()
    var viewport_width = jQuery(window).width();
    var available_images = ['red.png', 'orange.png', 'yellow.png',
      'green.png', 'blue.png', 'purple.png', 'brown.png', 'black.png',
      'grey.png']; //, 'white.png'];
    var bodies = [];
    for(var i = 0; i < 3; ++i)
        {
        body = {id: i, velocity_y : Math.random(),
          velocity_x: Math.random() * 10 - 5,
          position_x: Math.random() * viewport_width - 100,
          position_y: Math.random() * viewport_height - 100};
        document.write('<img id="' + i + '" src="http://cats.stornge.com/' + available_images[Math.floor(Math.random() * available_images.length)] + '" style="z-index: ' + i + '" />');
        bodies[bodies.length] = body;
        }
    function iterate()
        {
        for(var index = 0; index < bodies.length; ++index)
            {
            bodies[index].velocity_y += .1;
            bodies[index].position_x += bodies[index].velocity_x;
            bodies[index].position_y += bodies[index].velocity_y;
            var position = jQuery('#' + index).position();
            if (position.top + 100 > viewport_height)
                {
                bodies[index].velocity_y = - bodies[index].velocity_y;
                bodies[index].position_y = viewport_height - 100;
                }
            if (position.top < 0)
                {
                bodies[index].velocity_y = - bodies[index].velocity_y;
                bodies[index].position_y = 0;
                }
            if (position.left > viewport_width - 100)
                {
                bodies[index].velocity_x = -bodies[index].velocity_x;
                bodies[index].position_x = viewport_width - 100;
                }
            if (position.left < 0)
                {
                bodies[index].velocity_x = -bodies[index].velocity_x;
                bodies[index].position_x = 0;
                }
                jQuery('#' + index).offset({top: bodies[index].position_y, left: bodies[index].position_x });
            }
        }

   setInterval(iterate, 30);

var viewport\u height=jQuery（窗口）.height（）
var viewport_width=jQuery（window）.width（）；
var available_images=['red.png'、'orange.png'、'yellow.png'，
“green.png”、“blue.png”、“purple.png”、“brown.png”、“black.png”，
'grey.png']；/，'白色.png']；
var主体=[]；
对于（变量i=0；i<3；++i）
{
body={id:i，velocity_y:Math.random（），
速度x:Math.random（）*10-5，
位置x:Math.random（）*视口宽度-100，
位置y:Math.random（）*视口高度-100}；
文件。写（“”）；
身体[身体.长度]=身体；
}
func