1

次の JavaScript があります。その意図は、円が画面上ですべての端から跳ね返ることです。

ウィンドウの高さと幅を格納する変数に移動しました。画面の下部から跳ね返らないのは、ノードが徐々に拡大している可能性があるためと考えたため、jQuery(window).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);

このコード セットを元のビューポートの境界に弾力のある壁にする方法を知りたいです。

4

1 に答える 1

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);
于 2013-05-08T22:28:58.283 に答える