JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="settings">
  <form>
    <label for="width">Width %</label>
    <input id="width" type="text"/>
    <label for="height">Height %</label>
    <input id="height" type="text"/>
    <label for="numRoom">Number Rooms</label>
    <input id="numRoom" type="text"/>
    <button onclick="setting();" type='button'>Generate</button>
  </form>
</div>
<div id="game"></div>

CSS

.cell{
        width: 18px;
        height: 18px;
        background: white;
    }
    .floor{
        background: black;
    }
    .wall{
        background: grey;
    }
    body {
    background: black;
}
table {
    border-spacing: 0;
}
    div#game {
    display: flex;
    justify-content: center;
}
.settings {
    width: 175px;
    color: white;
}

JavaScript

class Map{
        constructor(width, height){
            this._field = document.querySelector('#game');
            this._width = width;
            this._height = height;
            this._x = Math.ceil(Math.random()*30+15);
            this._y = Math.ceil(Math.random()*30+15);
            this._html = new HTML;
            this._html.createTable( this._field, this._width, this._height, this._x, this._y);
 
        }
    }
    class Type {
        CellWall(arr, x, y){
            for(let a=0; a < x; a++){
                        arr[a][0].classList.add('wall');
                        arr[a][y-1].classList.add('wall');
                    }
 
            for(let b = 0; b < y; b++){
                        arr[0][b].classList.add('wall');
                        arr[x-1][b].classList.add('wall');
                    }
                    
        }
       
    }
 
    class HTML {
        createTable(field, width, height, x, y){
            field.style.width=width+'%';
            field.style.height=height+'%';
            let arr = [];
            let table=document.createElement('table');
            for(let i = 0; i < x; i++){
                arr[i]=[];
                let tr = document.createElement('tr');
                for(let j = 0; j < y; j++){
                    let td=document.createElement('td');
                    arr[i][j]=td;
                    td.classList.add('cell');
                    tr.appendChild(td);   
                   }
                table.appendChild(tr);
}
 
 
     field.appendChild(table); 
     let type = new Type;   
     type.CellWall(arr, x, y);
        }
    }
    setting = () => {
        let form = document.forms[0],
         width = +form.elements[0].value,
         height = +form.elements[1].value,
         numRoom = +form.elements[2].value;
 
         for(let z=0; z < numRoom; z++){
            new Map(width, height);
         }
        
}