JSFiddle - React, Tailwind, and code Playground

by mauricederegt

HTML

<div id="roller" tabindex="1">
    <div id="plane"></div>
    <div id="splash">
        <div></div>
    </div>
</div>

CSS

body {
    background: #000;
}
#roller {
    background: grey;
    position: absolute;
    width: 600px;
    height: 400px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    top: 50%;
    left: 50%;
    margin: -200px 0 0 -300px;
    z-index: 10000;
}
.tile {
    position: absolute;
    width: 100px;
    height: 100px;
}
.tile1 {
    background-color: tomato;
    border: 0px solid red;
}
.tile2 {
    background-color: lightblue;
    border: 0px solid blue;
}
.tile3 {
    background-color: MediumAquaMarine;
}
.tile4 {
    background-color: AntiqueWhite;
}
#level {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}
#back {
    position: absolute;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    top: 10px;
    right: 10px;
}
#splash {
    position: absolute;
    top: 0;
    left: 0;
    width: 600px;
    height: 400px;
    background-color: lightgrey;
    overflow: hidden;
}
#splash div {
    margin: 280px 50px 0;
    text-align: center;
}
#splash div a {
    color: #000;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #666;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 5px;
    display: inline-block;
}
#splash div a:hover {
    background-color: #666;
}

JavaScript

var roller = function () {
//tile object
    var tile = function (type, i, j, indx, x, y, z) { //NEW added: z
    this.x = x;
    this.y = y;
    this.z = z; //NEW added
    this.type = type;
    this.active = true;
    this.ends = false;

    this.getHTML = function () {
        return '<div class="tile tile' + this.type + '" style="left:' + this.x + 'px; top:' + this.y + 'px; z-index:' +this.z +' "></div>'; //NEW added: z-index:' +this.z +'
    };
};
var plane = function () {
    var el,
    back,
    oldTileX,
    oldTileY,
    level = 0,
    tileWidth = 100,
    tileHeight = 100,
    blankWidth = 50,
    blankHeight = 50,
        tiles = [];
    return {
        init: function (newLevel) {
            el = document.getElementById('plane');
            back = document.getElementById('roller');
        },
        loadLevel: function (newLevel) {
            level = newLevel;
	 layer = []; //NEW added
            tiles = [];
            var html = [];
            var currentX = 0;
            var currentY = 0;
	  var currentZ = 1; //NEW added:

            for (var i = 0, lngi = levels[level].length; i < lngi; i++) {
	 	for (var z = 0, lngz = levels[level][i].length; z < lngz; z++) { //NEW added
                for (var j = 0, lngj = levels[level][i].length; j < lngj; j++) {
                    if (levels[level][i][z][j] > 0) { //NEW added: [l]
                        var curIndex = tiles.length;
                        tiles[curIndex] = new tile(levels[level][i][z][j], i, z, j, curIndex, currentX, currentY, currentZ); //NEW added: [z], z, currentZ
                        html.push(tiles[curIndex].getHTML());
                        currentX += tileWidth;
                    }
                    else if(levels[level][i][z][j] === 0) { //NEW added: [z]
                        currentX += blankWidth;
                    }
                }
                //Start a new row
                currentY += 50;
                currentX = 0;
            }
	 //Start a new...