为什么彩球继续沿着页面边缘向下移动

Question

我有以下JavaScript;意图是圆圈会在屏幕上反弹，而不是所有边缘。

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

然而，在解决了这种方式使边缘有弹性，或试图（它在http://cats.stornge.com处）时，我没有看到一个球从窗户的一边反弹，如果你看你的滚动条，你可以看到它们落在窗户的原始底部之外。

    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);

我很想知道如何在原始视口的边界处创建这个代码集的弹性墙。

Answer 1

当更改margin-top和margin-left时，窗口的宽度和高度也开始变化。

我通过将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);