Konva haveIntersection js

Question

i´m newbie konvas libray user, I try made a simple game, i need detect when dragout the box from the shape and show alert "louser", the problem is the shapes irregular because the functio for detection event work good a rectangle shapes, but in inrregular shapes dont respect the border form, i hope can be helpme an detect when the box dragout the irregualar shape and respect the border, thankeyou, the code is below

Konva Drag and Drop Multiple Shapes Demoview raw
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@7.2.2/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Drag and Drop Collision Detection Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();
      stage.add(layer);

   
     
        var RectA = new Konva.Rect({
          x: 380,
          y:100,
          width: 30,
          height: 30,
          fill: 'grey',
          name: 'fillShape',
          draggable: true,       
          stroke: 'red',
          hitStrokeWidth: 30,
        });
        
        
        
       
        
        var RectB = new Konva.Line({
          x: 350,
          y: 80,
          points:[0, 0, 50, 0, 50, 100, 0, 100],
          fill: 'grey',
          closed: true,
          name: 'fillShape',
          draggable: false,       
          stroke: 'red',
          hitStrokeWidth: 10,
          tension: 1,
        });

        layer.add(RectB);
        layer.add(RectA);
        
      
      layer.draw();

      RectA.on('dragmove', function (e) {
        var target = e.target;
        
        var targetRect = e.target.getClientRect();
        layer.children.each(function (RectB) {
          // do not check intersection with itself
          if (RectB === target) {
            return;
          }
          if (haveIntersection(RectB.getClientRect(), targetRect)) {
           
          //  RectB.findOne('.fillShape').fill('red');
            
          } else {
          
           alert("louse");
           // RectB.findOne('.fillShape').fill('grey');
          }
          // do not need to call layer.draw() here
          // because it will be called by dragmove action
        });
      });

      function haveIntersection(r1, r2) {
      
      
      
        return !(
          r2.x > r1.x + r1.width ||
          r2.x + r2.width < r1.x ||
          r2.y > r1.y + r1.height ||
          r2.y + r2.height < r1.y
        );
      }
      
         layer.draw();
    </script>
  </body>
</html>

score 0 · Answer 1 · answered Mar 03 '21 at 10:15

My recommendation would be to use Hitboxes.

The basic idea is to mark off your complex structure with rectangles and then look at each rectangle to see whether there was a colition. You can check the individual rectangles with your function below.

Hitboxes aren't perfect with most structures, but if you use enough it's a very accurate estimate.

Also, "professional" games do the same.

Konva haveIntersection js

1 Answers1