Random Dungeon Generator

More info on this can be found on my site: http://bigbadwofl.me/random-dungeon-generator/

by Gwyn Milcote

HTML

<div id='container'>

<p>Original room-generator code by 'bigbadwaffle' on jsfiddle. The website 'bigbadwofl.me' is gone now. I've edited into a playable minigame.</p>

<h2>Dungeon Exploring</h2>
<!--
Min rooms: <input type='number' id='select-min-rooms' min='4' max='20' value='10'>
<br>
Max rooms: <input type='number' id='select-max-rooms' min='5' max='30' value='20'>
<br>
Min room size: <input type='number' id='select-min-size' min='2' max='10' value='5'>
<br>
Max room size: <input type='number' id='select-max-size' min='6' max='30' value='15'>
<br>
Width: <input type='number' id='select-width' min='20' max='100' value='64'>
<br>
Height: <input type='number' id='select-height' min='20' max='100' value='64'>
<br>
-->
<button id='generate-btn'>Generate New Map</button> 
 --- 
Display: <select id='select-render'>
    <option value='dark'>Darkness</option>
    <option value='full'>Full reveal</option>
</select>

<div id='canvas-container'>
    <canvas id='dungeon-canvas'></canvas>
</div>

<div id='dungeon-controls'>
    <button class='dungeon-move-btn' data-dir='n'>North</button>
    <button class='dungeon-move-btn' data-dir='e'>East</button>
    <button class='dungeon-move-btn' data-dir='s'>South</button>
    <button class='dungeon-move-btn' data-dir='w'>West</button>
</div>


</div>

CSS

div, canvas, img, p, button {
    box-sizing: border-box;
}

#container {
    width: 800px;
    margin: 20px auto;
    text-align: center;
}

#canvas-container {
    background-color: #202020;
    /*border: 1px solid grey;*/
    padding: 10px;
}

JavaScript

function randomNumber(n1, n2){
    if(n1 == n2){ return n1; }
    let min = n1, max = n2;
    if(n1 > n2){ min = n2; max = n1; }
    return Math.floor(Math.random() * (max - min + 1) + min);
}

function randomArray(array){
    return array[Math.floor(Math.random() * array.length)];
}

class DungeonGen {
    
    constructor(){
        this.map = null;
        this.rooms = [];
        
        // Rendering
        this.canvas = document.getElementById("dungeon-canvas");
        this.ctx = this.canvas.getContext("2d");
        this.tileSize = 8;
        
        this.canvas.width = this.width * this.tileSize;
        this.canvas.height = this.height * this.tileSize;
        
        // Game
        this.playerX = null;
        this.playerY = null;
        this.visitedTiles = [];
        
        this.getInputs();
        this.generate();
        this.placePlayer(); // filledDark false
        this.render();        
    }
    
    getInputs(){
        /*
        this.minSize = Number( $("#select-min-size").val() );
        this.maxSize = Number( $("#select-max-size").val() );
        this.minRooms = Number( $("#select-min-rooms").val() );
        this.maxRooms = Number( $("#select-max-rooms").val() );
        this.width = Number( $("#select-width").val() );
        this.height = Number( $("#select-height").val() );
        if(this.maxSize < this.minSize){
            throw "Min size is larger than max...";
        }
        if(this.maxRooms < this.minRooms){
            throw "Min rooms is larger than max...";
        }
        if(this.height < (this.maxSize * 2.3)){
            throw "Height should be larger, to fit these rooms";
        }
        if(this.width < (this.maxSize * 2.3)){
            throw "Width should be larger, to fit these rooms";
        }
        */
        this.minSize = 5;
        this.maxSize = 15;
        this.minRooms = 10;
        this.maxRooms = 20;
        this.width = 64;
        this.height = 64;
    }
    
    // Generation
    
   ...