JSFiddle - React, Tailwind, and code Playground

by Trevor Dowdle

JavaScript

var world = [];


function newTile(x, y, size, rotX, rotY, rotZ, tranX, tranY, tranZ, color) {

    var tile = document.createElement('div');
    tile.className = "tile";
    tile.style.width = size+"px";
    tile.style.height = size+"px";
    tile.style.webkitTransform = 
        "rotateX("+rotX+"deg)"+
        "rotateY("+rotY+"deg)"+
        "rotateZ("+rotZ+"deg)"+
        "translateX("+tranX+"px)"+
        "translateY("+tranY+"px)"+
        "translateZ("+tranZ+"px)";
    tile.style.transform = 
        "rotateX("+rotX+"deg)"+
        "rotateY("+rotY+"deg)"+
        "rotateZ("+rotZ+"deg)"+
        "translateX("+tranX+"px)"+
        "translateY("+tranY+"px)"+
        "translateZ("+tranZ+"px)";
    if (x == 0 && y == 0) {
        color="rgba(255,255,0,0.5)";
        pathStart = tile;
        pathCur = tile;
    }
    tile.style.backgroundColor = color;

    tile.data = {
        x:x,
        y:y,
        blacklist:0
    }

    tile.onclick = function() {
        worldOri(null,null,null, -this.data.x*128 - 64, null, -this.data.y*128 - 64);
    };

    //if (debug) tile.textContent = x+", "+y;

    //document.getElementById('world').appendChild(tile);
    world[x] = [];
    world[x][y] = tile;
}

newTile(2,6,128,90,0,0,2*128,0,6*128, "rgba(255,125,0,0.5)");

alert(world[2][6].style.backgroundColor);
world[2][6].style.backgroundColor = "rgba(255,0,0,0.5)";
alert(world[2][6].style.backgroundColor);