JSFiddle - React, Tailwind, and code Playground

by Chandana Thota

HTML

<script src="http://yckart.github.io/jquery.overlaps.js/jquery.overlaps.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div id='object1'>

</div>

<div id='object2'>

</div>

CSS

#object1{
  height:20px;
  width:20px;
  border: solid;
  background-color:red;
  position: absolute;
}

#object2{
  height:20px;
  width:20px;
  border: solid;
  background-color:blue;
  position: absolute;
  top:90px;
  left:200px;
}

JavaScript

$(document).keydown(function(e) {

  //Move arrow keys
  if (e.keyCode === 37) {
    $("#object1").animate({
      left: "-=5"
    }, 0);
  }
  if (e.keyCode === 38) {
    $("#object1").animate({
      top: "-=5"
    }, 0);
  }
  if (e.keyCode === 39) {
    $("#object1").animate({
      left: "+=5"
    }, 0);
  }
  if (e.keyCode === 40) {
    $("#object1").animate({
      top: "+=5"
    }, 0);
  }



  var colliders_selector = "#object1";
  var obstacles_selector = "#object2";
  var hits = $(colliders_selector).collision(obstacles_selector);
  alert(hits);



});