将画布框绑定到网格，并检查碰撞

Question

我有一个画布（300x300），其中4个已经放置了15 x 15个正方形。

我想做两件事.... 第一...

单击

创建新红盒时，检查与粉红盒子的碰撞

这是最重要的。我只是想知道红色正方形与粉红色正方形重叠，哪个粉红色正方形。

我不太重要的第二件事......

将所有放置的'像素'限制为网格。所以它们不能重叠，而只是坚持15x15网格。 或者我想要的任何尺寸。

CHECK FIDDLE FOR EXMAPLE/CODE

        var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var canvasOffset = $("#canvas").offset();
    var offsetX = canvasOffset.left;
    var offsetY = canvasOffset.top;

    var red = 255;
    var green = 0;
    var blue = 0;

    var pixRes = 15;

    function handleMouseDown(e) {
        mouseX = parseInt(e.clientX - offsetX);
        mouseY = parseInt(e.clientY - offsetY);
        Player.enterMove(mouseX,mouseY, red, green, blue);
    }

    $("#canvas").mousedown(function (e) {
        handleMouseDown(e);
    });



var Player =
{

   moves : [],
   positions: [[118,103],[183,195],[137,261],[37,136]],
   positionMap: {},

   initPositions: function(){
     $.each(this.positions, function(i,val){
        setPixel(val[0],val[1], 255,0,255);
    });
},

 enterMove: function(x, y, red, green, blue)
 { 
this.moves.push([x,y]);
setPixel(x, y, red, green, blue);
this.checkHit(x,y);


},

 checkHit: function(x,y){
    //Do checking here



}

};
  var p = Player;
  p.initPositions();