多边形之间的碰撞39

var Polygon = function () {
   this.points = [];
   this.strokeStyle = 'blue';
   this.fillStyle = 'white';
};

Polygon.prototype = new Shape();

Polygon.prototype.getAxes = function () {
   var v1 = new Vector(),
       v2 = new Vector(),
       axes = [];
      
   for (var i=0; i < this.points.length-1; i++) {
      v1.x = this.points[i].x;
      v1.y = this.points[i].y;

      v2.x = this.points[i+1].x;
      v2.y = this.points[i+1].y;

      axes.push(v1.edge(v2).normal());
   }

   v1.x = this.points[this.points.length-1].x;
   v1.y = this.points[this.points.length-1].y;

   v2.x = this.points[0].x;
   v2.y = this.points[0].y;

   axes.push(v1.edge(v2).normal());

   return axes;
};

Polygon.prototype.project = function (axis) {
   var scalars = [],
       v = new Vector();

   this.points.forEach( function (point) {
      v.x = point.x;
      v.y = point.y;
      scalars.push(v.dotProduct(axis));
   });

   return new Projection(Math.min.apply(Math, scalars),
                         Math.max.apply(Math, scalars));
};

Polygon.prototype.addPoint = function (x, y) {
   this.points.push(new Point(x,y));
};

Polygon.prototype.createPath = function (context) {
   if (this.points.length === 0)
      return;
      
   context.beginPath();
   context.moveTo(this.points[0].x,
                  this.points[0].y);
         
   for (var i=0; i < this.points.length; ++i) {
      context.lineTo(this.points[i].x,
                     this.points[i].y);
   }

   context.closePath();
};
   
Polygon.prototype.move = function (dx, dy) {
   var point, x;
   for(var i=0; i < this.points.length; ++i) {
      point = this.points[i];
      point.x += dx;
      point.y += dy;
   }
};

Polygon.prototype.move = function (dx, dy) {
   for (var i=0, point; i < this.points.length; ++i) {
      point = this.points[i];
      point.x += dx;
      point.y += dy;
   }
};

//Example.....................................................
//Example.....................................................
//Example.....................................................
var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    shapes = [],
    polygonPoints = [
        // The paths described by these point arrays
        // are open. They are explicitly closed by
        // Polygon.createPath() and Polygon.getAxes()

        [ new Point(250, 150), new Point(250, 250), new Point(350, 250) ],
        [ new Point(100, 100), new Point(100, 150), new Point(150, 150), new Point(150, 100) ],
        [ new Point(400, 100), new Point(380, 150),new Point(500, 150), new Point(520, 100) ]
    ],

    polygonStrokeStyles = [ 'blue', 'yellow', 'red'],
    polygonFillStyles   = [ 'rgba(255,255,0,0.7)',
        'rgba(100,140,230,0.6)',
        'rgba(255,255,255,0.8)' ],

    mousedown = { x: 0, y: 0 },
    lastdrag = { x: 0, y: 0 },
    shapeBeingDragged = undefined;

// Functions

function windowToCanvas(e) {
    var x = e.x || e.clientX,
        y = e.y || e.clientY,
        bbox = canvas.getBoundingClientRect();

    return { x: x - bbox.left * (canvas.width  / bbox.width),
        y: y -   * (canvas.height / bbox.height)
    };
};

function drawShapes() {
    shapes.forEach( function (shape) {
        shape.stroke(context);
        shape.fill(context);
    });
}

function detectCollisions() {//每个图形都要判断
    var textY = 30,
        numShapes = shapes.length,
        shape,
        i;

    if (shapeBeingDragged) {
        for(i = 0; i < numShapes; ++i) {
            shape = shapes[i];

            if (shape !== shapeBeingDragged) {
                if (shapeBeingDragged.collidesWith(shape)) {//碰撞检测
                    context.fillStyle = shape.fillStyle;
                    context.fillText('collision', 20, textY);
                    textY += 40;
                }
            }
        }
    }
}
// Event handlers................................................

canvas.onmousedown = function (e) {
    var location = windowToCanvas(e);

    shapes.forEach( function (shape) {
        if (shape.isPointInPath(context, location.x, location.y)) {
            shapeBeingDragged = shape;
            mousedown.x = location.x;
            mousedown.y = location.y;
            lastdrag.x = location.x;
            lastdrag.y = location.y;
        }
    });
}

canvas.onmousemove = function (e) {
    var location,
        dragVector;

    if (shapeBeingDragged !== undefined) {
        location = windowToCanvas(e);
        dragVector = { x: location.x - lastdrag.x,
            y: location.y - lastdrag.y
        };

        shapeBeingDragged.move(dragVector.x, dragVector.y);

        lastdrag.x = location.x;
        lastdrag.y = location.y;

        context.clearRect(0,0,canvas.width,canvas.height);
        drawShapes();
        detectCollisions();
    }
}

canvas.onmouseup = function (e) {
    shapeBeingDragged = undefined;
}

for (var i=0; i < polygonPoints.length; ++i) {
    var polygon = new Polygon(),
        points = polygonPoints[i];

    polygon.strokeStyle = polygonStrokeStyles[i];
    polygon.fillStyle = polygonFillStyles[i];

    points.forEach( function (point) {
        polygon.addPoint(point.x, point.y);
    });

    shapes.push(polygon);
}

// Initialization................................................

context.shadowColor = 'rgba(100,140,255,0.5)';
context.shadowBlur = 4;
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.font = '38px Arial';

drawShapes();

context.save();
context.fillStyle = 'cornflowerblue';
context.font = '24px Arial';
context.fillText('Drag shapes over each other', 10, 25);
context.restore();

//html................................................
   <body>
      <canvas id='canvas' width='600' height='400'>
         Canvas not supported
      </canvas>

    <script src = '../../shared/js/shapes.js'></script>
    <script src = 'example.js'></script>
  </body>