Javascript 拖动到网格中

我正在尝试创建一个可以将盒子拖入网格的游戏。仅当栅格中的空间为空时，才能拖动长方体

我想知道是否有一种方法可以使网格与将被拖入网格的框一起处于活动状态。此外，当鼠标释放到空网格空间附近时，框将捕捉并放置

我已经开始使用线创建网格

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

var canvasBg=document.getElementById（'canvas'）； var ctxBg=canvasBg.getContext（'2d'）； var ctx=canvas.getContext（'2d'）； //网格的高度和宽度 var gridWidth=canvasBg.width//500px var gridHeight=canvasBg.height//500px //绘制网格

---

（var i=0；i回答您的第一个问题：

您可以创建一个名为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);
}

for（var b=0；b

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

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

功能检查可用性（playerX、playerY）{
var playerRow=playerY%50；
var playerCol=playerX%50；
var available=true；
对于（var b=0；b

关于你关于dot的第二个问题。

---

画布上绘制的所有内容都是由您绘制的，因此您应该知道圆点的位置，只需在代码中使用这些信息即可。

非常感谢您花时间回答。非常感谢您花时间回答。我已经放弃了答案，它允许我绘制两个框，我喜欢这种方式您添加了框。此外，由于这些框是对象，我可以允许播放器拖放它们（我对JavaScript还是新手，但我现在有一个清晰的想法）。以及允许网格可用性的功能。您回答了我的问题，正是我需要的，非常感谢。嗨，对不起，我只是想知道您是否可以再次帮助我。我想用这些盒子创建一个迷宫，以便玩家可以在没有盒子的空间中移动，并提供一个碰撞功能来阻止玩家移动p除了墙外，还有可能有多个玩家，并由键盘上的不同键控制。谢谢：）这个问题已经达到了目的，不应该用来问新问题。如果您的代码遇到更多问题，我建议您在web上搜索问题的答案。如果你找不到他们，开始一个新问题，我和这个社区的其他人会很乐意帮助=）谢谢，我开始了一个新问题：）