Javascript detect EXACTLY which element is overlapping an element

Question

Currently, I'm designing a platformer game concept. Of course, this involves moving and whatnot. Right now, I'm attempting to make a square jump onto a platform. I have a min_bottom which the square rests on, but I have a small problem. I can't figure out which element is overlapped by the square. Do you have answer to this? The idea is to set the mmin_bottom variable to the bottom value of a platform, but this only works with the first .block element. Note: I'm using classes so that is a bit harder. Controls are space to jump, right to right, left to left.

If you need any information, please comment me.

var PAUSE_TIME = 100;
var runningr = false;
var runningl = false;
var runningj = false;
/* 50 is the bottom, edit the 2nd number */
var min_bottom = setMinBottom(0);

var spp = 500 / 20;

var log = {
  'log': function(s) {
    $('.log').append(s + '<br>');
  }
};



/* Collision Thingy:
 * http://stackoverflow.com/questions/5419134/how-to-detect-if-two-divs-touch-with-jquery */

function collision($div1, $div2) {
  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;
  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 false;
  return true;
}

function setMinBottom(integer) {
  return 50 + integer;
}

(function() {
  $.fn.keyone = function(keyCode, action, fn) {
    this.one(action, function(e) {
      if (e.keyCode == keyCode) {
        fn();
      }
    });
  };
})(jQuery);

window.setInterval(function() {
  if (collision($('.square-wrapper'), $('.block'))) {
    log.log(true);

    min_bottom = setMinBottom(100);
  }
}, 50);

$(document).on('keyup', function(e) {
  switch (e.keyCode) {
    case 39:
      runningr = false;
      $('.square-wrapper').css('left', $('.square-wrapper').css('left'));
      break;
    case 37:
      runningl = false;
      $('.square-wrapper').css('left', $('.square-wrapper').css('left'));
      break;
    case 32:
      break;
    default:
      runningr = false;
      runningl = false;
      runningj = false;
      break;
  }
});

$(document).on('keydown', function(e) {

  /* CSS Method */

  // log.log(e.keyCode + ' Pressed!');

  switch (e.keyCode) {
    case 39:

      if (!runningr) {

        runningr = true;

        log.log('Go Right');

        $('.square-wrapper').css('left', Number($('.square-wrapper').css('left').replace(/[^-\d\.]/g, '')) + 10000);

        // $(document).keyone(39, 'keyup', function() {
        // $('.square-wrapper').css('left', $('.square-wrapper').css('left'));
        // });
      }
      break;
    case 37:

      if (!runningl) {

        runningl = true;

        log.log('Go Left');

        $('.square-wrapper').css('left', Number($('.square-wrapper').css('left').replace(/[^-\d\.]/g, '')) - 10000);

        // $(document).keyone(37, 'keyup', function() {
        // $('.square-wrapper').css('left', $('.square-wrapper').css('left'));
        // });
      }
      break;
    case 32:

      if (!runningj) {

        runningj = true;

        log.log('Jump!');

        // $('.square-wrapper').css('transition', 'bottom 300ms cubic-bezier(0.000, 0.000, 0.440, 1.000)');
        $('.square-wrapper').addClass('jumpup');

        $('.square-wrapper').css('bottom', Number($('.square-wrapper').css('bottom').replace(/[^-\d\.]/g, '')) + 125);

        setTimeout(function() {
          // $('.square-wrapper').css('transition', 'bottom 300ms cubic-bezier(0.440, 0.000, 1.000, 1.000)');

          $('.square-wrapper').removeClass('jumpup');
          $('.square-wrapper').addClass('jumpdown');

          var bottom = Number($('.square-wrapper').css('bottom').replace(/[^-\d\.]/g, '')) - 125;

          $('.square-wraper').css('transition-duration', '30s, ' + bottom * spp + 'ms');

          $('.square-wrapper').css('bottom', min_bottom);
          setTimeout(function() {
            $('.square-wrapper').removeClass('jumpdown');
            runningj = false;
          }, 200);
        }, 200);
      }

      break;
  }

});

.bot-line {
  position: absolute;
  bottom: 50px;
  background black;
  border: 1pt solid black;
  width: inherit;
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
}
.window {
  height: 100%;
  width: 80%;
}
.square-wrapper {
  position: absolute;
  bottom: 50px;
  height: 30px;
  width: 30px;
  border: 2pt solid black;
  left: 50px;
  background: #00c5ff;
}
.square-inside {
  position: relative;
  top: 3px;
  height: 20px;
  width: 20px;
  border: 2pt solid black;
  left: 3px;
  background: #8cff52;
}
.move {
  transition: left 30s linear;
}
.jumpup {
  /*transition: left 30s linear, bottom 200ms cubic-bezier(0.000, 0.000, 0.000, 0.440);*/
  transition-property: left, bottom;
  transition-duration: 30s, 200ms;
  transition-timing-function: linear, cubic-bezier(0.000, 0.000, 0.000, 0.440);
}
.jumpdown {
  /*transition: left 30s linear, bottom 200ms cubic-bezier(0.440, 0.000, 1.000, 1.000);*/
  transition-property: left, bottom;
  transition-duration: 30s, 200ms;
  transition-timing-function: linear, cubic-bezier(0.440, 0.000, 1.000, 1.000);
}
.log {
  height: 100%;
  width: 20%;
  position: absolute;
  box-sizing: border-box;
  right: 0;
  top: 0;
  border: 3pt ridge #909090;
  padding: 5px;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">

  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
  Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Platfomer Test</title>
  <meta name="description" content="">
  <meta name="author" content="Samuel Li">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
  <!-- <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png"> -->
</head>

<body>

  <div class="window">
    <div class="bot-line"></div>
    <div class="square-wrapper move">
      <div class="square-inside"></div>
    </div>
    <div class="block" data-x="100" data-y="100" style="width: 100px; box-sizing: border-box; border: 2pt solid black; height: 4px;"></div>
    <div class="block" data-x="100" data-y="200" style="width: 100px; box-sizing: border-box; border: 2pt solid black; height: 4px;"></div>
  </div>

  <div class="log"></div>

  <script>
    $('.block').each(function() {
      var x = $(this).data('x');
      var y = 50 + $(this).data('y');
      console.log();
      $(this).css({
        position: 'absolute',
        left: x,
        bottom: y + $(this).height(),
      });
    });
    var log = window.log;
    log.log('Right to go Right');
    log.log('Left to go Left');
    log.log('Space to go space');
    log.log('Going down after going up not implemented yet');
  </script>

</body>

</html>

JSFiddle: http://jsfiddle.net/MashedPotatoes/8k4kfpwv/

Anybody, I could use some answers... – mashedpotats May 07 '15 at 22:29 — mashedpotats, May 07 '15 at 22:29

score 0 · Answer 1 · edited Apr 13 '17 at 12:18

You might be better off using a library like boxbox or PhysicsJS to handle interactions. You can use collision detection and the like to develop your platformer.

You can then use their API to develop something like: http://incompl.github.io/boxbox/boxbox/demos/platformer/demo.html

Now if you don't want to do it that way you are basically reinventing the wheel.
But you have to have references on each element you are tracking with coordinates to each of their corners. Then you just do a simple box collision test:

function Box(x,y,width, height) {
   this.x = x;
   this.y = y;
   this.width = width;
   this.height = height;
}

var BoxA = new Box(0,0,10,10);
var BoxB = new Box(5,0,20,20);

function DoBoxesIntersect(a, b) {
  return (abs(a.x - b.x) * 2 < (a.width + b.width)) &&
         (abs(a.y - b.y) * 2 < (a.height + b.height));
}

alert(DoBoxesIntersect(BoxA,BoxB)); //true

The comparison function is just modified from: here

Note: This is all code off the top of my head that may have typos but is suitable to illustrate the general idea.

Javascript detect EXACTLY which element is overlapping an element

1 Answers1