瓷砖所在的网格中的位置

Question

如果我创建了一个虚拟网格32x32作为<div>示例：

我想用一个黑盒子填充其中一块瓷砖on click我到目前为止：

var _proto = {
    id:0,
    x:0,
    y:0
}

var objects = [];

$(".test").on("mousedown", function(e) {

    var offset = $(this).offset();
    var prex2 = 0, prey2 = 0;

    prex2 = _proto.x = e.pageX-offset.left;
    prey2 = _proto.y = e.pageY-offset.top;
    _proto.id = (_objects.length)?_objects[_objects.length-1].id+1:0;

    // Add to grid (not sure how to get proper cordinates)
    $("<div style='display:absolute;width:32px;height:32px;background:black'></div>")
        .css("top","")
        .css("left","")
        .appendTo("#maindiv");

});

我的坐标为prex2，prey2位于用户点击的位置，但我怎么知道将它放在网格中的哪个位置？我确定有一个简单的数学方程式，但我无法弄明白。

Answer 1

这是几个月前我正在制作的地图编辑器的片段。它可能会帮助您解决自己的代码。

mapBlanket.addEventListener("mousedown", function(e) {
    var sideWidth = document.getElementById("mapSide").offsetWidth;
    var headHeight = document.getElementById("system").offsetHeight + 32;
    var clickX = e.pageX - mapBlanket.offsetLeft - sideWidth + mapBlanket.parentNode.scrollLeft;
    var clickY = e.pageY - mapBlanket.offsetTop - headHeight + mapBlanket.parentNode.scrollTop;
    var tileX = clickX - (clickX % map.grid);
    var tileY = clickY - (clickY % map.grid);
    if (paintOn == 5) {
        eventThis(tileX, tileY);
    } else if (paintOn < 5) {
        paintThis(tileX, tileY);
    }
    ...
}

作为参考，map.grid是32，与你的相同。我只是在文件顶部的一个对象中定义了一个好位置。