Question

我对前端开发很新。我正在尝试使用HTML，CSS和Javascript构建迷宫求解器。有一个起点和终点，我正在尝试使用最短路径算法来找到它们之间的最短距离。

这是我写的HTML和CSS代码：

＆＃13;

div {
    background: #000;
    float: left;
    height: 29vw;
    margin: 1%;
    width: 23%;
    }

    div:nth-child(3n-1){
    background:white;
    margin-left:0;
     }

＆＃13;

    <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

＆＃13;

白色代表：障碍黑色代表：实际路径

我想获得我创建的4x4迷宫的二进制表示，其中黑色代表1而白色代表0。我怎么能在Javascript中做到这一点？

结果应该是基于颜色的4x4矩阵。

Answer 1

如何在Javascript中完成？

如果你说要测试每个div的背景颜色并将黑色映射到1并将白色映射到0，那么在我看来你会向后看这整个事情：创建矩阵会更好首先在JS中使用适当的类从矩阵构建html来设置颜色（而不是使用:nth-child(3n-1)之类的东西）。然后你可以轻松地替换另一种绘图技术，例如画布元素。

无论如何，从您现有的html / css开始，您可以使用.getComputedStyle()方法，如下所示：

＆＃13;

var divs = document.querySelectorAll("section div");

var matrix = [].map.call(divs, function(v) {
  var b = window.getComputedStyle(v).backgroundColor;
  return b === "rgb(0, 0, 0)" ? 1 : 0;
}).reduce(function(p, c, i) {
  if (i % 4 === 0) p.push([]);
  p[p.length-1].push(c);
  return p;
}, []);

console.log(matrix);

＆＃13;

section div {
  background: #000;
  float: left;
  height: 10px;
  margin: 2px;
  width: 23%;
}
div:nth-child(3n-1) {
  background: white;
  margin-left: 0;
}

＆＃13;

<section>
  <div></div> <div></div> <div></div> <div></div>
  <div></div> <div></div> <div></div> <div></div>
  <div></div> <div></div> <div></div> <div></div>
  <div></div> <div></div> <div></div> <div></div>
</section>

＆＃13;

在Javascript中获取迷宫颜色的二进制值

1 个答案: