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

很抱歉，如果没有太多内容，感谢您阅读，我们将非常感谢您的反馈。

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

如果画布中有一个圆点或一个小圆圈，是否可以找到此圆点/圆圈的位置，是否可以执行游戏所需的操作，允许框的一角连接到点/圆，然后允许该框放置在点所在的画布中。

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

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

每当玩家移动一个盒子时，你就会跟踪玩家所在的行和列。

如果玩家在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;
}

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

拖入网格

1 个答案: