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

Question

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

这是我编写的 HTML 和 CSS 代码：

div {
    background: #000;
    float: left;
    height: 29vw;
    margin: 1%;
    width: 23%;
    }

    div:nth-child(3n-1){
    background:white;
    margin-left:0;
     }

    <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>

白色代表：跨栏黑色代表：实际路径

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

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

Answer 1

How can I do that in Javascript??

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

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

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

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

<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>

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

Obtain binary values of the maze color in Javascript

html

javascript

css

maze