Collision detection algorithm in Javascript

First thing when debugging these problems is to reduce your code to a small example.
Once you have that, then you can go into more complicated things.

Below is your code with working collision:

var stage = new Konva.Stage({
  width: 400,
  height: 200,
  container: 'container'
});
var layer = new Konva.Layer();
stage.add(layer);

layer.on('dragmove', function(e) {
  var target = e.target;
  var targetRect = e.target.getClientRect();
  layer.children.each(function(obj) {
    if (obj === target) {
      return;
    }
    if (haveIntersection(obj.getClientRect(), targetRect)) {
      alert("Intersection")
    }    
  });
});

function haveIntersection(r1, r2) {
  return !(
    r2.x > r1.x + r1.width/2 ||
    r2.x + r2.width/2 < r1.x ||
    r2.y > r1.y + r1.height/2 ||
    r2.y + r2.height/2 < r1.y
  );
}

// This will draw the image on the canvas.
function drawImage(source, konvaImage) {
  layer.add(konvaImage);
  var image = new Image();
  image.src = source;
  image.onload = function() {
    konvaImage.image(image);
    layer.draw();
  }
}


//1yen
var ichiYenImg = new Konva.Image({
  x: 20,
  y: 20,
  width: 100,
  height: 100,
  draggable: true
});
var sourceImg1 = "https://illustrain.com/img/work/2016/illustrain09-okane5.png";
drawImage(sourceImg1, ichiYenImg);

//piggy bank 1yen
var ichiYenpiggyImg = new Konva.Image({
  x: 300,
  y: 100,
  width: 100,
  height: 100,
  draggable: false
});
var sourceImg7 = "https://user-images.githubusercontent.com/31402838/63416628-a322b080-c3b4-11e9-96e8-e709ace70ec1.png";
drawImage(sourceImg7, ichiYenpiggyImg);

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
</head>

<body>
  <div id="stage-parent">
    <div id="container"></div>
  </div>
</body>

</html>

The key here is the function haveIntersection there we assume that the collision boxes are squares 1/2 the with and height of the objects.

The conditions inside that functions are:

Is the RIGHT edge of r1 to the RIGHT of the LEFT edge of r2? OR
Is the LEFT edge of r1 to the LEFT of the RIGHT edge of r2? OR
Is the BOTTOM edge of r1 BELOW the TOP edge of r2? OR
Is the TOP edge of r1 ABOVE the BOTTOM edge of r2?

There are more details here:
http://jeffreythompson.org/collision-detection/rect-rect.php

Collision detection algorithm in Javascript

Related

Recent Posts