javascript - 为什么彩色球越过页面边缘继续下降

Question

我有以下 JavaScript；目的是圆圈会在屏幕上反弹，离开所有边缘。

我找到了一个存储窗口高度和宽度的变量，因为我认为未能从屏幕底部反弹可能是因为节点正在逐渐扩展，所以我最初对 jQuery(window).height() 的检查毫无意义.

然而，在解决了这种使窗口在边缘有 flex 的方法之后，或者尝试过(在 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);

我很想看看如何在原始视口(viewport)的边界处制作此代码集的弹力墙。

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