Bad Dungeon Generator

Generates dungeons. Not very good ones tho. (I made it while code jamming with a friend)

by asemahle

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.3/chance.min.js"></script>
<div class="container">
    <div class="content">
        <h1>Dungeon Generator</h1>
        <p>
         This is a dungeon generator but it isn't very good. (I made it while code jamming with a friend)
        </p>

        <div style="background-color: grey; width: 100%; padding: 24px; text-align: center">
            <canvas id="map" width="500" height="500" style="margin: auto; background-color: white; width: 500px; height: 500px"></canvas>
        </div>


        <div class="btn-group" role="group" >
            <button id="btn-generate" type="button" class="btn btn-default">Generate Dungeon!</button>
        </div>

    </div>
</div>

JavaScript

var MapGenerator = function() {
  this.lastcoord = 0;
  this.lastdir = 0;
  this.lastbrush = 0;
};
MapGenerator.prototype = {
  generateMap: function(w, h, complexity) {
    let map = [];
    for (let i = 0; i < h; i++) {
      map.push([]);
      for (let j = 0; j < w; j++) {
        map[i].push(0);
      }
    };

    let pos = [w/2, h/2];
    let brush = chance.integer({min:1, max: 5});
    for (let i = 0; i < complexity; i++) {
      brush = Math.ceil(Math.abs(chance.normal({mean: 0, dev: 1})));

      let val = chance.integer({min: 1, max: 8});
      if (val == 1) {
        pos[0] ++;
        this.lastcoord = 0;
        this.lastdir = 1;
        this.lastbrush = brush;
      } else if (val == 2) {
        pos[0] --;
        this.lastcoord = 0;
        this.lastdir = -1;
        this.lastbrush = brush;
      } else if (val == 3) {
        pos[1] ++;
        this.lastcoord = 1;
        this.lastdir = 1;
        this.lastbrush = brush;
      } else if (val == 4) {
        pos[1] --;
        this.lastcoord = 1;
        this.lastdir = -1;
        this.lastbrush = brush;
      } else {
        pos[this.lastcoord] += this.lastdir;
        brush = this.lastbrush;
      }

      pos[0] = Math.abs(pos[0] % h);
      pos[1] = Math.abs(pos[1] % w);

      for (let x=0; x < brush; x++) {
        for (let y=0; y < brush; y++){

          if (pos[0]+y > 1 && pos[0]+y < h-1 && pos[1]+x > 1 && pos[1]+x < w - 1){
            map[pos[0]+y][pos[1]+x] = 1;
          }

        }
      }
    }
    return map;
  },
};
    
$(document).ready(function(){
	let generate = function() {
  	let mg = new MapGenerator();
    let map = mg.generateMap(100,100,1000);
    let canvas = document.getElementById('map');
    let ctx = canvas.getContext("2d");

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.fillColor = 'black';
    for(let y = 0; y < 100; y ++) {
      for (let x = 0; x < 100; x ++) {
        if (map[y][x] == 0) {
          ctx.fillRect(y * 5, x * 5, 5, 5);
       ...