JSFiddle - React, Tailwind, and code Playground

How to make two DIVs/Elements collide? (not go through other elements)

by Akram kamal

HTML

<img width="16" height="16" class="ball" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"
/>
<div class=moving>
  I move up and down
</div>
<div class="moving bottom right">
  I move up and down
</div>

CSS

.ball {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 150px;
  top: 40px;
}

div {
  background: pink;
  position: absolute;
}

.paused {
  animation-play-state: paused;
}

.moving {
  animation-duration: 3s;
  animation-name: moving;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.bottom {
  animation-name: moving-bottom;
}

.right {
  right: 0;
}

@keyframes moving {
  from {
    top: 5%;
  }
  to {
    top: 95%;
  }
}

@keyframes moving-bottom {
  from {
    top: 95%;
  }
  to {
    top: 5%;
  }
}

.spin-away {
  animation-duration: 5s;
  animation-name: spin-away;
  animation-fill-mode: forwards;
}

@keyframes spin-away {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    width: 0;
    left: 150px;
    top: 40px;
  }
}

JavaScript

var change = {
  37: {
    left: "-=1"
  },

  38: {
    top: "-=1"
  },

  39: {
    left: "+=1"
  },

  40: {
    top: "+=1"
  },
}
$(document).on({
  keydown: keydown,
  keyup: keyup
})
setInterval(function() {
  $(".ball").collides(".moving", function() {
    console.log("collision", arguments)
    snd.play()
    $(".moving").addClass("paused")
    this.addClass("spin-away")
    setTimeout(function(){
    	$("[style]").removeAttr("style")
      $(".spin-away").removeClass("spin-away")
      $(".paused").removeClass("paused")
    },4000)
  })
}, 100)
var movement = []

function keydown(e) {
  var key = e.which
  var animation = change[key];
  if (!movement[key]) { // watch out for repeating keys!
    movement[key] = setInterval(keepGoing, 1)
  }
  //  console.log("down", key, movement[key])
  function keepGoing() {
    $(".ball").css(animation)
  }

}

function keyup(e) {
  var key = e.which
  movement[key] = clearInterval(movement[key])
    //  console.log("up", key, movement[key])

}
$.fn.collides = function(divs, callback) {
  var $div1 = this;
  var $divs2 = $(divs);
  var x1 = $div1.offset().left;
  var y1 = $div1.offset().top;
  var h1 = $div1.outerHeight(true);
  var w1 = $div1.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;

  $divs2.each(function(i, div2) {
    var $div2 = $(div2);
    var x2 = $div2.offset().left;
    var y2 = $div2.offset().top;
    var h2 = $div2.outerHeight(true);
    var w2 = $div2.outerWidth(true);
    var b2 = y2 + h2;
    var r2 = x2 + w2;

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return;
    callback.call($div1, i, div2);

  })

}

var snd = new...