Canvas 将画布框绑定到网格，并检查冲突

我有一张300x300的画布，上面有4个15 x 15的正方形

我想做两件事。。。。 首先

当我通过单击创建新的红色框时，检查是否与粉红色框发生冲突

这是最重要的。我只是想知道什么时候红方块和粉红方块重叠，以及哪个是粉红方块

我想做的第二件不那么重要的事

将所有放置的“像素”限制为网格。因此，它们不能重叠，而只能附着在15x15网格上。 或者我想要的任何尺寸

---

检查你的小提琴控制台，你忘了插入generateRenderMap代码。是的，我知道……我想删除所有这些……但现在什么都不做……好的。不幸的是，我现在没有时间再进一步了，但看看这把小提琴，它可能会帮助你：这是完美的游戏炼金术士！谢谢如果你想把它写下来作为答案，我会接受的：看看这把小提琴，试着按下按钮，当两个以上的邻居都坐满的时候再试试。

        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();