<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  </head>

  <body>
    <a-scene>
    </a-scene>
  </body>
  <script>
    /*
1. Make the sky black
2. Create a  floor with corridors using this map: 1 = wall, 0 = space
Floor = [
        [0, 0, 0, 0, 0, 0, 0, 0],
        [1, 1, 1, 1, 0, 1, 0, 1],
        [0, 0, 0, 1, 0, 1, 0, 0],
        [0, 0, 0, 0, 0, 1, 0, 0],
        [0, 1, 1, 1, 1, 1, 0, 0],
        [0, 1, 0, 0, 0, 0, 0, 0],
        [0, 1, 1, 0, 1, 0, 1, 0],
        [0, 0, 0, 0, 1, 0, 1, 0]
]
*/

    // 1. Make the sky black
    const scene = document.querySelector('a-scene');
    scene.setAttribute('background', 'color: black');

    // 2. Create a  floor with corridors using this map: 1 = wall, 0 = space
    const floor = [
      [0, 0, 0, 0, 0, 0, 0, 0],
      [1, 1, 1, 1, 0, 1, 0, 1],
      [0, 0, 0, 1, 0, 1, 0, 0],
      [0, 0, 0, 0, 0, 1, 0, 0],
      [0, 1, 1, 1, 1, 1, 0, 0],
      [0, 1, 0, 0, 0, 0, 0, 0],
      [0, 1, 1, 0, 1, 0, 1, 0],
      [0, 0, 0, 0, 1, 0, 1, 0]
    ];

    // Create the floor
    for (let i = 0; i < floor.length; i++) {
      for (let j = 0; j < floor[i].length; j++) {
        if (floor[i][j] === 1) {
          const wall = document.createElement('a-box');
          wall.setAttribute('position', `${i} 0 ${j}`);
          wall.setAttribute('color', 'white');
          scene.appendChild(wall);
        }
      }
    }

  </script>

</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.