如何在JavaScript中使用不超过3行的代码连接两个块？类似于onet connect游戏的东西

正在为类似onet的游戏开发一个JavaScript原型。我需要使用不超过3条线连接两个模块

这就是我要做的

这些线可以将两个块连接在一起，也可以在需要3条线连接时将它们分开。它不能连接有另一个块“阻塞”的块或对角的块

我尝试过使用寻路方法，但它没有像预期的那样工作，因为它寻找最短的路径，但在这种情况下，它必须考虑到在可能的情况下，只需要3圈就可以到达目的地。）

我曾考虑过使用泛洪填充方法，但在本例中我无法使其工作。我甚至在网上找到了一个有趣的解释

有人能帮我找到一个起点算法吗

---

谢谢，

如果网格为4x4，每个正方形从上到下、从左到右编号，如下所示：

 0  1  2  3
 4  5  6  7
 8  9 10 11
12 13 14 15

您希望匹配任意两个方块

x

和

y

，其中

y

大于

x

，并且：

y - x == 1 3 && (x+1) % 4 > 0 //for horizontally adjacent squares 
y - x == 4 //for vertically adjacent squares
y - x == 3 && (y+1) % 4 == 0 //for squares at opposite ends of a row

更新：测试用例

let grid=document.querySelector（“.grid”）
对于（i=0；i{
el.addEventListener（“单击”，（e）=>{
让dId=e.target.dataset.id
如果（！x）{
x=有
e、 target.classList.add（“x”）
}如果（！y）{
y=有
e、 target.classList.add（“y”）
checkIfWinner（x，y）
}
})
})
document.getElementById（“重置”）.onclick=（）=>{
控制台清除（）
x=null
y=null
squares.forEach（el=>{el.classList.remove（“x”）；el.classList.remove（“y”）}）
}
函数checkiWinner（x，y）{
设高=x>y？x:y
设低=x>y？y:x
如果（（高-低==1&&（parseInt（低）+1）%4>0）| |高-低==4 | |（高-低==3&&（parseInt（高）+1）%4==0））{
控制台日志（“获胜者”）
}否则{
console.log（“重试”）
}
}

.grid{
显示：内联网格；
网格模板列：重复（4,1fr）；
网格间距：4px；
}
.grid>div{
边框：实心2倍灰色；
高度：30px；
宽度：30px；
}
h3{边距：0 0 5px}
.x{背景色：道奇蓝}
.y{背景色：橙色}

单击任意两个正方形
重置

如果网格为4x4，每个正方形从上到下、从左到右编号，如下所示：

 0  1  2  3
 4  5  6  7
 8  9 10 11
12 13 14 15

您希望匹配任意两个方块

x

和

y

，其中

y

大于

x

，并且：

y - x == 1 3 && (x+1) % 4 > 0 //for horizontally adjacent squares 
y - x == 4 //for vertically adjacent squares
y - x == 3 && (y+1) % 4 == 0 //for squares at opposite ends of a row

更新：测试用例

let grid=document.querySelector（“.grid”）
对于（i=0；i{
el.addEventListener（“单击”，（e）=>{
让dId=e.target.dataset.id
如果（！x）{
x=有
e、 target.classList.add（“x”）
}如果（！y）{
y=有
e、 target.classList.add（“y”）
checkIfWinner（x，y）
}
})
})
document.getElementById（“重置”）.onclick=（）=>{
控制台清除（）
x=null
y=null
squares.forEach（el=>{el.classList.remove（“x”）；el.classList.remove（“y”）}）
}
函数checkiWinner（x，y）{
设高=x>y？x:y
设低=x>y？y:x
如果（（高-低==1&&（parseInt（低）+1）%4>0）| |高-低==4 | |（高-低==3&&（parseInt（高）+1）%4==0））{
控制台日志（“获胜者”）
}否则{
console.log（“重试”）
}
}

.grid{
显示：内联网格；
网格模板列：重复（4,1fr）；
网格间距：4px；
}
.grid>div{
边框：实心2倍灰色；
高度：30px；
宽度：30px；
}
h3{边距：0 0 5px}
.x{背景色：道奇蓝}
.y{背景色：橙色}

单击任意两个正方形
重置

感谢您的快速回复。我喜欢你的解决方案，但有两个问题。第一，它连接水平或垂直。第二，如果可能的话，应该画线。它应该是这样工作的»这个水平和垂直工作。画线很容易，我会研究

：：before

和

：：after

的伪代码。另一个问题是它不能连接两个有障碍的区块。例如，如果您单击第4块，然后单击第7块，它应该会验证它，因为第5块和第6块是线路到达那里的障碍。感谢您的快速回复。我喜欢你的解决方案，但有两个问题。第一，它连接水平或垂直。第二，如果可能的话，应该画线。它应该是这样工作的»这个水平和垂直工作。画线很容易，我会研究

：：before

和

：：after

的伪代码。另一个问题是它不能连接两个有障碍的区块。例如，如果单击块4，然后单击块7，则应验证它，因为块5和块6是线路到达那里的障碍。