Skip to content

Instantly share code, notes, and snippets.

@YellowAfterlife

YellowAfterlife/simple-iso.html

Created January 7, 2016 14:56
Download ZIP

Revisions

  1. YellowAfterlife created this gist Jan 7, 2016.
    120 changes: 120 additions & 0 deletions simple-iso.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,120 @@
    <html><head>

    </head><body>
    <div style="text-align: center">
    <canvas width="640" height="360" id="canvas">

    </canvas>
    <br>Click to change tiles.
    </div>
    <script type="text/javascript">(function() {
    var canvas = document.getElementById("canvas");
    var width = canvas.width;
    var height = canvas.height;
    var context = canvas.getContext("2d");
    // Initialize grids:
    var tile = [];
    var obj = [];
    var cols = 8;
    var rows = 8;
    for (var y = 0; y < rows; y++) {
    tile[y] = [];
    obj[y] = [];
    for (var x = 0; x < cols; x++) {
    var t = 2;
    if (Math.random() < .3) t = 1;
    else if (Math.random() < .3) t = 3;
    tile[y][x] = t;
    var o = 0;
    if (Math.random() < .3) o = 1;
    obj[y][x] = o;
    }
    }
    // Isometric variables and helper functions:
    var IsoW = 40; // cell width
    var IsoH = 20; // cell height
    var IsoX = width / 2;
    var IsoY = 20;
    function IsoToScreenX(localX, localY) {
    return IsoX + (localX - localY) * IsoW;
    }
    function IsoToScreenY(localX, localY) {
    return IsoY + (localX + localY) * IsoH;
    }
    function ScreenToIsoX(globalX, globalY) {
    return ((globalX - IsoX) / IsoW + (globalY - IsoY) / IsoH) / 2;
    }
    function ScreenToIsoY(globalX, globalY) {
    return ((globalY - IsoY) / IsoH - (globalX - IsoX) / IsoW) / 2;
    }
    // Draws an isometric tile at the given coordinates
    function DrawIsoTile(x, y, color) {
    context.fillStyle = color;
    context.beginPath();
    context.moveTo(x, y);
    context.lineTo(x - IsoW, y + IsoH);
    context.lineTo(x, y + IsoH * 2);
    context.lineTo(x + IsoW, y + IsoH);
    context.closePath();
    context.fill();
    }
    // Draw event:
    var frame = 0;
    setInterval(function() {
    frame += 1;
    context.clearRect(0, 0, width, height);
    for (var y = 0; y < rows; y++)
    for (var x = 0; x < cols; x++) {
    var t = tile[y][x];
    var rx = IsoToScreenX(x, y);
    var ry = IsoToScreenY(x, y);
    // draw tile (if any):
    switch (t) {
    case 1: DrawIsoTile(rx, ry, "#C59E77"); break;
    case 2: DrawIsoTile(rx, ry, "#94BA57"); break;
    case 3: DrawIsoTile(rx, ry, "#9DD5E2"); break;
    }
    // draw object (if any):
    switch (obj[y][x]) {
    case 1:
    var oz = 5 + Math.sin(frame / 7 + x - y) * 2;
    // shadow:
    context.save();
    context.translate(rx, ry + 20);
    context.scale(1, 0.5);
    context.fillStyle = "rgba(0, 0, 0, 0.5)";
    context.beginPath();
    context.arc(0, 0, 9 / (1 + oz / 20), 0, Math.PI * 2, false);
    context.closePath();
    context.fill();
    context.restore();
    // outlined circle:
    for (var step = 0; step < 2; step++) {
    context.fillStyle = step > 0 ? "#FFFFFF" : "#000000";
    context.beginPath();
    context.arc(rx, ry + 20 - oz - 10, 11 - step, 0, Math.PI * 2, false);
    context.closePath();
    context.fill();
    }
    break;
    }
    }
    }, 50);
    // Click event:
    canvas.addEventListener("mousedown", function(e) {
    e.preventDefault();
    // get mouse coordinates from the event:
    var mx = e.offsetX, my = e.offsetY;
    // find local coordinates from them:
    var ix = Math.floor(ScreenToIsoX(mx, my));
    var iy = Math.floor(ScreenToIsoY(mx, my));
    // if those are within the grid, change the clicked tile:
    if (ix >= 0 && iy >= 0 && ix < cols && iy < rows) {
    var d = tile[iy][ix];
    d += 1;
    if (d > 3) d = 0; // (wrapping)
    tile[iy][ix] = d;
    }
    });
    })();</script>
    </body></html>