Jquery/JavaScript Collision Detection

console.clear();
$('document').ready(function() {

  var collided = false;
  var collidedWith = null;
  var $ship = $('.ship');
  var $walls = $('.wall')
  
  var $totalHeight = $('.inner').height(); //of walls
  var $maxHeight = Math.ceil(Math.ceil($totalHeight / 3) - (Math.ceil($totalHeight / 3) * 30) / 100); //30% of total wall height

  $('.wall').each(function(i, obj) {
    $(this).height($maxHeight);
    $('.wall.four').css({
      'height': $wallGap
    });
  })

  var $wallGap = Math.ceil($totalHeight / 3) - $maxHeight;
  var $wallOneTop = 0;
  var $wallTwoTop = $maxHeight + $wallGap;
  var $wallThreeTop = ($maxHeight * 2) + ($wallGap * 2);
  var $wallFourTop = -$('.wall.four').height() - $wallGap;

  $('.wall.one').css({
    'top': $wallOneTop
  });
  $('.wall.two').css({
    'top': $wallTwoTop
  });
  $('.wall.three').css({
    'top': $wallThreeTop
  });
  $('.wall.four').css({
    'top': $wallFourTop
  });


  function moveWall(wallObj) {
    var $currentTop = wallObj.position().top;
    var $limitTop = $('.inner').height();

    if ($currentTop >= $limitTop) {
      var $rand = Math.floor(Math.random() * ($maxHeight - $wallGap + 1) + $wallGap);
      wallObj.height($rand);
      var $top = -(wallObj.height());
    } else {
      var $top = (wallObj.position().top) + 5;
    }
    //    var $collide = checkCollision(wallObj);
    wallObj.css({
      'top': $top
    });
    // return $collide;
  }

  var $wallTimer = setInterval(function() {
    $walls.each(function(i, obj) {
      moveWall($(this));
      if (collided) {
        clearInterval($wallTimer);
      }
    })
  }, 40);


  function checkCollision() {
    var $shipWidth = $ship.width();
    var $shipHeight = $ship.height();
    var $shipLeft = $ship.position().left;
    var $shipRight = $shipLeft + $shipWidth;
    var $shipTop = $ship.position().top;
    var $shipBottom = $shipTop + $shipHeight;
    
    $('.wall').each(function(i) {

      var $wall = $(this);
      var $wallWidth = $wall.width();
      var $wallHeight = $wall.height();
      var $wallLeft = $wall.position().left;
      var $wallRight = $wallLeft + $wallWidth;
      var $wallTop = $wall.position().top;
      var $wallBottom = $wallTop + $wallHeight;

      if (
        $shipLeft < $wallRight &&
        $shipRight > $wallLeft &&
        $shipTop < $wallBottom &&
        $shipBottom > $wallTop
      ) {
        console.log("dhumm!");
        collided = true;
        collidedWith = $wall
        $wall.addClass('crashed')
        $ship.addClass('crashed')
        $ship.stop();
        return false;
      }
    })
  }







  $('.outer .inner').click(function() {
    var $ship;
    $ship = $('.ship');
    $shipLeft = $ship.position().left;
    $shipRight = $shipLeft + $ship.width();

    $inner = $('.inner');
    $innerLeft = $inner.position().left;
    $innerRight = $innerLeft + $inner.width();


    if (($shipLeft < $inner.width() - $ship.width())) {
      $ship.animate({
        "left": $inner.width() - $ship.width()
      }, {
        "duration": 500,
        "easing": "linear",
        "progress": checkCollision,
      });
    } else if (($shipRight >= $inner.width())) {
      $ship.animate({
        "left": '0'
      }, {
        "duration": 500,
        "easing": "linear",
        "progress": checkCollision,
      });
    }

  });


});

.outer {
  background: #fff;
  border: 20px solid #efefef;
  width: 400px;
  height: 600px;
  display: inline-block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
}

.outer .inner {
  background: #fff;
  height: 100%;
  width: 100%;
  margin: auto;
  position: relative;
  overflow: hidden;
}

.outer .inner .wall {
  width: 5px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
}
.outer .inner .wall.crashed {
  background: red;
}


.outer .inner .ship {
  width: 15px;
  height: 15px;
  background: orange;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.outer .inner .ship.crashed {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer">
  <div class="inner">
    <div class="wall one"></div>
    <div class="wall two"></div>
    <div class="wall three"></div>
    <div class="wall four"></div>

    <div class="ship"></div>
  </div>
</div>

Javascript collision detection system don't ignore blocked collisions

You have to treat horizontal and vertical collisions independently.

I've made some minor changes to your JS-fiddle: http://jsfiddle.net/Kf6cv/1/
it should work now, what I did is I split up your one check into two:

if (nextposy + height(circle) > rect.y &&
    circle.x + width(circle) > rect.x &&
    circle.x < rect.x + rect.width &&
    nextposy < rect.y + rect.height) {
    if (circle.y + height(circle) < rect.y) {
       cls("top");
    }
    if (circle.y > rect.y + rect.height) {
        cls("bottom");
    }
}

if (nextposx + width(circle) > rect.x &&
    nextposx < rect.x + rect.width &&
    circle.y + height(circle) > rect.y &&
    circle.y < rect.y + rect.height) {
    if (circle.x + width(circle) < rect.x) {
        cls("left");
    }
    if (circle.x > rect.x + rect.width) {
        cls("right");
    }
}

The reason for this is that if check both directions at once, it will prevent the movement(or make it bounce) for both directions(like the red figure in your picture) - even if it COULD move into one direction. The order of checking horizontal/vertical usually doesn't matter, it usually only matters if your "hero" approaches the other object 100% edge-to-edge. But what you could to is to first check the direction with the higher velocity, so if |velX| > |velY| then you first check for a horizontal collision.

Also I'd say it is safer to apply the new position directly after checking, right now it does two independend checks and then applies the movement of both directions - I'm not to sure about it but I could imagine that this might lead to some issues later.

JavaScript: Collision detection

The first thing to have is the actual function that will detect whether you have a collision between the ball and the object.

For the sake of performance it will be great to implement some crude collision detecting technique, e.g., bounding rectangles, and a more accurate one if needed in case you have collision detected, so that your function will run a little bit quicker but using exactly the same loop.

Another option that can help to increase performance is to do some pre-processing with the objects you have. For example you can break the whole area into cells like a generic table and store the appropriate object that are contained within the particular cells. Therefore to detect the collision you are detecting the cells occupied by the ball, get the objects from those cells and use your collision-detecting function.

To speed it up even more you can implement 2d-tree, quadtree or R-tree.

Collision detection with JavaScript. (Check if 2 Block Level elements are touching)

You can use the Jquery collision plugin like this:

var x = $("#div1").collision(".div2");

Related Topics