Detect if animated object touched another object in DOM

Question

I have a number of divs fixed in the dom in a circular shape, and another div orbiting around them

I want to know if the orbiting div touched any one of them to take specific action using javascript

the css code responsible for making the #token div orbit around .stations divs using keyframes

the javascript code makes the .stations divs in a circular shape

$("document").ready(function() {
  //arrange stations in a circle
  var block = $("#rotator .station").get(),
    increase = Math.PI * 2 / block.length,
    x = 0,
    y = 0,
    angle = 0;

  for (var i = 0; i < block.length; i++) {
    var elem = block[i];
    x = 240 * Math.cos(angle) + 150;
    y = 140 * Math.sin(angle) + 150;
    elem.style.position = 'absolute';
    elem.style.left = x + 'px';
    elem.style.top = y + 'px';
    var rot = 90 + (i * (360 / block.length));
    angle += increase;
  }

});

#rotator {
  width: 350px;
  height: 350px;
  margin: 20px auto;
  font-size: 10px;
  line-height: 1;
  transform-origin: 50% 50%;
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

#token {
  animation: orbit 10s linear infinite;
  background-color: red;
  position: relative;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
}

.station {
  background-color: #e1e1e1;
  width: 50px;
  height: 50px;
  position: relative;
  left: 200px;
  margin-left: 456px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rotator">
  <div id="token">Token</div>
     <div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
</div>

score 3 · Accepted Answer · answered May 04 '18 at 10:30

You can achieve this by a little bit edit on this answer by gfullam.

Here detectOverlap uses two elements position to check if there is a collision.

in checkCollision(), it sends token element and stations one by one to detectOverlap() for every 10 miliseconds.

the key function on this code is getBoundingClientRect() You can check this link for more information.

var detectOverlap = (function () {
    function getPositions(elem) {
        var pos = elem.getBoundingClientRect();
        return [[pos.left, pos.right], [pos.top, pos.bottom]];
    }

    function comparePositions(p1, p2) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function (a, b) {
        var pos1 = getPositions(a),
            pos2 = getPositions(b);
        return comparePositions(pos1[0], pos2[0]) && comparePositions(pos1[1], pos2[1]);
    };
})();


function checkCollision() {
    var stations = [];
    stations = $(".station");
    var elem = document.getElementById("token"); 
    var elemList = Array.prototype.slice.call(stations);
    for(var i = 0; i< stations.length; i++)
    {
      if (detectOverlap(elem, elemList[i])) {
          window.alert("CollisionNow");
          
      } else 
      {
          
      }
    }
     setTimeout("checkCollision();", 10);
}


$("document").ready(function() {
  //arrange stations in a circle
  var block = $("#rotator .station").get(),
    increase = Math.PI * 2 / block.length,
    x = 0,
    y = 0,
    angle = 0;

  for (var i = 0; i < block.length; i++) {
    var elem = block[i];
    x = 240 * Math.cos(angle) + 150;
    y = 140 * Math.sin(angle) + 150;
    elem.style.position = 'absolute';
    elem.style.left = x + 'px';
    elem.style.top = y + 'px';
    var rot = 90 + (i * (360 / block.length));
    angle += increase;
  }
  
  checkCollision();

});

#rotator {
  width: 350px;
  height: 350px;
  margin: 20px auto;
  font-size: 10px;
  line-height: 1;
  transform-origin: 50% 50%;
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}


#token {
  animation: orbit 10s linear infinite;
  background-color: red;
  position: relative;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
}

.station {
  background-color: #e1e1e1;
  width: 50px;
  height: 50px;
  position: relative;
  left: 200px;
  margin-left: 456px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rotator">
  <div id="token">Token</div>
     <div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
</div>

Detect if animated object touched another object in DOM

1 Answers1

Linked