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

Question

正在为类似单人游戏的 JavaScript 制作原型。我需要使用不超过 3 条线连接两个块。

这是我想要做的

当需要3条线连接时，线可以将两个块连接在一起或分开。它不能连接有另一个块的块 "blocking" 它或对角线。

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

我考虑过使用 floodfill 方法，但我无法在这个例子中使用它。我什至在网上找到了一个有趣的解释 https://www.youtube.com/watch?v=Zwh-QNlsurI

谁能帮我找到一个起点算法呢？

谢谢，

Answer 1

如果网格是 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")

for(i=0;i<16;i++){
   let sq = document.createElement("div")
   sq.classList.add("sq")
   sq.dataset.id = i
   grid.appendChild(sq)
}

let squares = document.querySelectorAll(".sq")
let x = null,y = null
squares.forEach(el => {
    el.addEventListener("click", (e) => {
        let dId = e.target.dataset.id
        if(!x){
            x = dId
            e.target.classList.add("x")
        }else if(!y){
            y = dId
            e.target.classList.add("y")
            checkIfWinner(x,y)
        }
    })
})

document.getElementById("reset").onclick = () => {
    console.clear()
    x=null
    y=null
    squares.forEach(el => {el.classList.remove("x"); el.classList.remove("y")})
}

function checkIfWinner(x,y){
    let high = x > y ? x : y
    let low = x > y ? y : x
    if( (high - low == 1 && (parseInt(low)+1) % 4 > 0) || high - low == 4 || (high - low == 3 && (parseInt(high)+1) % 4 == 0)){
        console.log("Winner")
    }else{
        console.log("Try Again")
    }
}

.grid{
   display:inline-grid;
   grid-template-columns: repeat(4,1fr);
   grid-gap: 4px;
}

.grid > div{
   border: solid 2px gray;
   height: 30px;
   width: 30px;
}

h3{margin:0 0 5px}
.x{background-color: dodgerblue}
.y{background-color: orangered}

<h3>Click any two squares<h3> 
<div class="grid"></div>
<button id="reset">Reset</button>

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

How do I connect two blocks using no more than 3 lines in JavaScript? Something like the onet connect game

javascript

connect

更新：测试用例