JS Create Maze

Create maze by JavaScript.

by Tinytsunami

HTML

<div id="demo">
  <canvas width="100px" height="100px"></canvas><br /> maze size = <input max="200" min="10" type="number" value="30" /><br /> probability of wall = <input max="1" min="0" step="0.01" type="number" value="0.7" /><br /> probability of road = <input max="1"
    min="0" step="0.01" type="number" value="0.5" /><br /> animation delay = <input max="5000" min="0" step="1" type="number" value="200" />ms<br />
  <button>Create</button><br />
  <button>Generate Text</button><br />
  <div>no text</div>
</div>

CSS

body {
  color: #ffffff;
  background: #20262e;
  font-family: monospace, sans-serif;
}

#demo canvas {
  border: 1px solid #ffffff;
}

#demo input[type="number"] {
  width: 50px;
  color: #ffffff;
  background: #20262e;
  outline: none;
  border: none;
  border-bottom: 1px solid #ffffff;
}

#demo button {
  color: #ffffff;
  background: #20262e;
  border: 1px solid #ffffff;
  outline: none;
  margin-top: 5px;
}

#demo button:hover {
  color: #20262e;
  background: #ffffff;
  border: 1px solid #ffffff;
}

#demo>div {
  margin-top: 5px;
}

JavaScript

(function(){
  /* get elements */
  let root = document.getElementById('demo');
  let canvas = root.getElementsByTagName('canvas')[0];
  let context = canvas.getContext('2d');
  let mazeSizeNode = root.getElementsByTagName('input')[0];
  let probabilityWallNode = root.getElementsByTagName('input')[1];
  let probabilityLoadNode = root.getElementsByTagName('input')[2];
  let animationDelayNode = root.getElementsByTagName('input')[3];
  let createNode = root.getElementsByTagName('button')[0];
  let generateTextNode = root.getElementsByTagName('button')[1];
  let textShowNode = root.getElementsByTagName('div')[0];

  /* initialize letiables */
  let maze; // maze
  let clock; // interval object
  let wait = false; // interval is running
  let blockSize = 10; // canvas draw block's size

  /* get random number in [min, max) */
  let rand = function(min, max) {
    let value = Math.random() * 1000;
    value = value % (max - min);
    value = value + min;
    return Math.floor(value);
  };

  /* create empty map array(2-dim) */
  let createMap = function(width, height) {
    // initialize maze
    let map = new Array(width);
    for (let i = map.length - 1; i >= 0; i--) {
      map[i] = new Array(width);
      for (let j = map[i].length - 1; j >= 0; j--) {
        map[i][j] = '';
      }
    }
    // create outside wells
    for (let i = 0; i < width; i++) {
      map[i][0] = 'P';
      map[i][height - 1] = 'P';
    }
    for (let i = 0; i < height; i++) {
      map[0][i] = 'P';
      map[width - 1][i] = 'P';
    }
    return map;
  };

  /* refresh canvas */
  let refresh = function(maze, colors) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = maze.length - 1; i >= 0; i--) {
      for (let j = maze[i].length - 1; j >= 0; j--) {
      	context.fillStyle = "#20262e";
        switch (maze[i][j]) {
          case 'S': context.fillStyle = colors.s; break;
          case 'E': context.fillStyle = colors.e; break;
          case 'P':...