Wie mehrere Prellen divs mit verschiedenen Ausgangspunkten hinzufügen mit JQuery

Question

Dies ist, was ich bisher habe:

var vx = 3; 
var vy = 2; 

function hitLR(el, bounding) { 
    if (el.offsetLeft <= 0 && vx < 0) { 
     console.log('LEFT'); 
     vx = -1 * vx; 
    } 
    if ((el.offsetLeft + el.offsetWidth) >= bounding.offsetWidth) { 
     console.log('RIGHT'); 
     vx = -1 * vx; 
    } 
    if (el.offsetTop <= 0 && vy < 0) { 
     console.log('TOP'); 
     vy = -1 * vy; 
    } 
    if ((el.offsetTop + el.offsetHeight) >= bounding.offsetHeight) { 
     console.log('BOTTOM'); 
     vy = -1 * vy; 
    } 
} 

function mover(el, bounding) { 
    hitLR(el, bounding); 
    el.style.left = el.offsetLeft + vx + 'px'; 
    el.style.top = el.offsetTop + vy + 'px'; 
    setTimeout(function() { 
     mover(el, bounding); 
    }, 50); 
} 

setTimeout(function() { 
    mover($('.bouncer')[0], $('.bouncyHouse')[0]); 
}, 50); 

so

https://jsfiddle.net/86xyxvyn/

Ich versuche, mehrere divs zu dieser Skizze hinzufügen, dass jeder prallt um die Black Box unabhängig voneinander. Im Idealfall hätte jedes Wort auch eine eindeutige Startposition (nicht nur in der oberen linken Ecke).

Answer 1

Mit ein paar Änderungen können Sie gewünschte Ergebnis erhalten. Eine Möglichkeit wäre, die Geschwindigkeit für jede div mit dem Attribut data einzustellen. Dann wenden Sie die Funktion mover auf jedes Div auf, indem Sie ihre individuelle Geschwindigkeit und Position verwenden, um eine neue Geschwindigkeit einzustellen und das Prellen zu testen. Anstatt setTimeout zu verwenden, können Sie setInterval verwenden. Wie folgt:

div class="bouncyHouse"> 
       <!-- using data-vx and data-vy allows to set different speed for each div--!> 
       <div class="bouncer" data-vx='2' data-vy='-3'> 
        <span>space</span> 
       </div> 
       <div class="bouncer" data-vx='-2' data-vy='2'> 
        <span>space</span> 
       </div> 
       <div class="bouncer" data-vx='5' data-vy='2'> 
        <span>space</span> 
       </div> 
      </div> 

Die js. Es ist fast genau das, was Sie hatten, außer dass ich jeweils vx und vy durch die spezifischen Daten ersetzt habe. Und der Aufruf zum Mover erfolgt in einem each() Aufruf, der jede bouncing div.

function hitLR(el, bounding) { 
    console.log($(el).data('vx'), $(el).data('vy')) 
    if (el.offsetLeft <= 0 && $(el).data('vx') < 0) { 
     console.log('LEFT'); 
     $(el).data('vx', -1 * $(el).data('vx')) 
    } 
    if ((el.offsetLeft + el.offsetWidth) >= bounding.offsetWidth) { 
     console.log('RIGHT'); 
     $(el).data('vx', -1 * $(el).data('vx')); 
    } 
    if (el.offsetTop <= 0 && $(el).data('vy') < 0) { 
     console.log('TOP'); 
     $(el).data('vy', -1 * $(el).data('vy')); 
    } 
    if ((el.offsetTop + el.offsetHeight) >= bounding.offsetHeight) { 
     console.log('BOTTOM'); 
     $(el).data('vy', -1 * $(el).data('vy')); 
    } 
} 

    function mover(el, bounding) { 
     hitLR(el, bounding); 
     el.style.left = el.offsetLeft + $(el).data('vx') + 'px'; 
     el.style.top = el.offsetTop + $(el).data('vy') + 'px'; 

    } 

    setInterval(function() { 
     $('.bouncer').each(function(){ 

      mover(this, $('.bouncyHouse')[0]); 
     }); 
    }, 50); 

Und Sie können Startpunkt in der CSS direkt festlegen.

.bouncer { 
    position: absolute; 
    width: 200px; 
    color:white; 
} 

.bouncer:nth-child(2) 
{ 
    top: 30px; 
    left: 100px; 
} 
.bouncer:nth-child(3) 
{ 
    top: 50px; 
    left: 200px; 
} 

Siehe Geige: https://jsfiddle.net/qwLpf1vr/