How to add multiple bouncing divs with different starting points using Jquery

Question

This is what I have so far:

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

https://jsfiddle.net/86xyxvyn/

I am trying to add multiple divs to this sketch so that each one bounces around the black box independently. Ideally, each word would also have a unique starting position (not just in the upper left hand corner).

Answer 1

With a few modifications you can get wanted result. One way to do it would be to set the speed for each div, using data attribute. Then you apply you mover function to each div, using their individual speed and position to set new speed and test bouncing. Instead of using setTimeout, you can use setInterval. Like this:

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>

The js. It's almost exactly what you had, except I've replaced each vx and vy by the data specific to each. And the call to mover is made in a each() call that iterates each 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);

And you can set starting point in the css directly.

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

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

See fiddle: https://jsfiddle.net/qwLpf1vr/