Simple RL level-generation test

by Anton

HTML

<div id="map"></div>
<p><button id="next">Next stage</button></p>

CSS

#map {
    background-color: #555;
    padding: 20px;
}

.row {
    display: block;
    height: 10px;
    margin: 0 0 1px;
}

.cell {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 1px;
}

.cell.floor {
    background-color: #ccc;
}

.cell.wall {
    background-color: #222;
}

JavaScript

var levelSize = 20,
    map = [];

// Generate
for(var i = 0; i < levelSize; i++) {
    map[i] = [];
    for(var j = 0; j < levelSize; j++) {
        map[i][j] = Math.random() <= 0.45;
    }
}

render(map);

$('#next').on('click', function() { map = process(map); render(map); });


function render(map) {
    var html = '';
    
    for(var i = 0; i < levelSize; i++) {
        html += '<div class="row">';

        for(var j = 0; j < levelSize; j++) {
            html += '<div class="cell ' + (map[i][j] === true ? 'floor' : 'wall') + '"></div>';
        }

        html += '</div>'; // end of row
    }

    $('#map').html(html);
}

function process(map) {
	var resMap = [];
    
    for(var i = 0; i < levelSize; i++) {
        resMap[i] = [];
        for(var j = 0; j < levelSize; j++) {
            resMap[i][j] = false;
        }
    }
    
    return resMap;
}