JSFiddle - React, Tailwind, and code Playground

by Mukesh Yadav

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bouncyHouse">
  <button type="button">Click Me!</button>

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

CSS

.bouncyHouse {
  height: 200px;
  width: 150%;
  background-color: black;
  position: relative;
}

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

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

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

JavaScript

function hitLR(el, bounding) {
  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';

}

function moveIt() {
  $('.bouncer').each(function() {
    mover(this, $('.bouncyHouse')[0]);
  });
}

moveInterval = setInterval(moveIt, 50);
$('button').on('click', function(){
	console.log(moveInterval);
	if( moveInterval != 0){
		clearInterval(moveInterval);
    moveInterval = 0;
  } else {
		moveInterval = setInterval(moveIt, 50);
  }
});