javascript - 如何在 Javascript 中将数组显示为视觉对象(例如迷宫)

Question

所以，我正在用 javascript 制作一个迷宫。我不知道如何以图形方式显示数组(例如 1 和 0)。最好的方法是向您展示代码:

      var maze=  [ 
[0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,0,1,0,0,0],
[0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,0,1,0,0,1],
[0,0,1,1,1,0,0,1,1,0,0,1,0,0,0,0,1,0,0,1],
[0,0,1,0,1,0,0,1,1,0,0,1,0,0,0,0,1,0,0,1],
[0,0,1,0,1,1,0,1,0,0,0,1,1,1,0,0,1,0,0,0],
[0,0,1,1,0,1,1,0,0,0,0,0,0,1,0,0,1,1,1,1],
[0,0,0,1,1,0,1,1,1,1,1,1,0,0,0,0,0,1,0,1],
[0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,1],


 ];        

0 代表墙，1 代表空地，2 代表迷宫的尽头，如何使用 仅 javascript 将其显示为迷宫？我应该让每个 0 成为一个单独的矩形吗？我怎样才能做到这一点？ 请不要开玩笑，因为我才刚刚开始。

这是引用代码(这是关于“使用 chrome 编码”，因为它最容易使用，因为我不需要导入任何东西)。

//PART 1 : THE CHARACTER
//Where is the character???
charX=10;
charY=10;


//Draw char

function drawChar(){
  draw.circle(charX, charY, 5, "black");
}
//Loop happens at 40 milliseconds
setInterval (loop, 40);
//loop that clears screen
function loop(){
    draw.rectangle(0,0, window.innerWidth, window.innerHeight,"white");
  drawChar();
  
}
//Move Character

document.addEventListener("keydown",  moveChar);
function moveChar (e) {
  if(e.keyCode ==37){
    //Left arrow
    charX=charX-50;
  }
  if(e.keyCode== 38){
    //Up arrow
    charY=charY-50;
  }
  if(e.keyCode == 39){
    //right arrow
    charX=charX+50;
      
  }
  if(e.keyCode == 40){
    //down arrow
    charY=charY +50;
  }
//PART 1 DONE :-)
  //PART 2: Walls
  //map of maze
  var maze=  [ 
  [0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,0,1,0,0,0],
  [0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,0,1,0,0,1],
  [0,0,1,1,1,0,0,1,1,0,0,1,0,0,0,0,1,0,0,1],
  [0,0,1,0,1,0,0,1,1,0,0,1,0,0,0,0,1,0,0,1],
  [0,0,1,0,1,1,0,1,0,0,0,1,1,1,0,0,1,0,0,0],
  [0,0,1,1,0,1,1,0,0,0,0,0,0,1,0,0,1,1,1,1],
  [0,0,0,1,1,0,1,1,1,1,1,1,0,0,0,0,0,1,0,1],
  [0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,1],


  ];
 

  //How can we display this graphically, with the 0 being a wall, and 1 being an empty space?

Answer 1

span {
  white-space: pre;
  display: inline-block;
  width: 24px;
}

<script>
  var maze = [
    [0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0],
    [0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1],
    [0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1],
    [0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1],
    [0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0],
    [0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1],
    [0, 0, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 1],
    [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1],
  ];

  maze.forEach(function(arr, index) {
    arr.forEach(function(path, i) {
      var span = document.createElement("span");
      if (path === 0) {
        span.textContent = " ";
        span.style.backgroundColor = "#000";
      }
      if (path === 1) {
        span.textContent = " ";
        span.style.backgroundColor = "yellow";
      }
      if (path === 2) {
        span.textContent = "end";
        span.style.backgroundColor = "green";
        span.style.color = "gold";
      }
      document.body.appendChild(span)
    });
    document.body.appendChild(document.createElement("br"))
  })
</script>