javascript - 拖入网格

Question

我正在尝试创建一个可以将框拖入网格的游戏。只有在网格中的空间为空时才能拖动方框。

我想知道网格是否有办法激活将被拖入网格的框。此外，当在空白网格空间附近释放鼠标时，方框会捕捉并放置。

我从使用线条创建网格开始。

var canvasBg = document.getElementById('canvas');
var ctxBg = canvasBg.getContext('2d');
var ctx = canvas.getContext('2d');

// height and width of grid
var gridWidth = canvasBg.width;     //500px
var gridHeight= canvasBg.height;    //500px

//draw grid
    for (var i = 0; i <= gridWidth; i+= 50) {
        ctx.beginPath();
        ctx.moveTo(50 + i,0);
        ctx.lineTo(50 + i, gridHeight);
        ctx.stroke();
    }

    for (var i = 0; i <= gridHeight; i+= 50) {
        ctx.beginPath();
        ctx.moveTo(0,50 + i);
        ctx.lineTo(gridWidth, 50 + i);
        ctx.stroke();
    }

很抱歉，如果接下来的内容不多，感谢您的阅读，我们将不胜感激任何反馈。

由于这个问题被忽略了，我需要一个答案，所以我一直在尝试寻找其他解决方案，我想我找到了一个但不确定。

如果 Canvas 上有一个点或一个小圆圈，是否可以找到这个点/圆圈的位置，是否可以按照游戏的意图进行，让盒子的一 Angular 连接到点/圆，然后将该框放置在点所在的 Canvas 中。

感谢您的阅读，任何答案都会有很大帮助。

Answer 1

回答你的第一个问题:

您可以创建一个名为 Box 的新对象来模拟已获取的网格位置

function Box (row,col) {
    this.row = row;
    this.col = col;
    this.color = "#000000";
}

只需为您的盒子声明一个变量:

var boxes = new Array();

并在您的游戏中添加一些盒装:

boxes[boxes.length] = new Box(3,5);
boxes[boxes.length] = new Box(5,8);

下面是绘制方框的方法:

for (var b = 0; b < boxes.length; b++) {
    ctx.fillStyle = boxes[i].color;
    ctx.fillRect(boxes[b].row*50, boxes[b].col*50, 50, 50);
}

每当玩家移动方 block 时，您都会跟踪玩家所在的行和列。

如果玩家拿着 x=321 处的盒子，y=48 则表示第 1 行和第 5 列。

为了检查那个网格是否空闲，你可以使用这个函数

function checkAvailability(playerX, playerY) {
    var playerRow = playerY%50;
    var playerCol = playerX%50;
    var available = true;
    for (var b = 0; b < boxes.length; b++) {
        if (playerRow == boxes[i].row && playerCol == boxes[i].col) {
            available = false;
            break;
        }
    }
    return available;
} 

关于您关于圆点的第二个问题。 Canvas 上绘制的所有内容都是您绘制的，因此您应该知道点的位置，只需在您的代码中随意使用该信息即可。