Question

所以，我正在使用javascript创建一个迷宫。我不知道如何以图形方式显示数组（例如1＆0; s和0＆＃39; s）。最好的方法是向您展示代码：

      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作为一个单独的矩形吗？我怎样才能做到这一点？我刚开始时请不要取笑。

这是参考的代码（这是＆＃34;使用chrome＆＃34;编码，因为它最容易使用，因为我没有必要导入任何东西）。

＆＃13;
＆＃13;
//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?
＆＃13;
＆＃13;
＆＃13;

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

如何在Javascript中将数组显示为视觉效果（例如，用于迷宫）

1 个答案: