JSFiddle - React, Tailwind, and code Playground

by erackson

HTML

<canvas id="myCanvas"  width="1200" height="768"></canvas>

CSS

#myCanvas{width:1000px; height:1000px}
body{margin-top:0px !important;}

JavaScript

window.onload = function() {

    var canvas = document.getElementById("myCanvas");

    var context = canvas.getContext("2d");

    var tile1 = new Image();

    var tile2 = new Image();

    var tile3 = new Image();

    tile1.onload = tile2.onload = tile3.onload = function() {

        var i, j, cont = 0;

        var grass = new Array(16, 4, 7);

        var floor = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10,

        31, 32, 33, 34, 35, 36, 37, 38, 39, 40,

        61, 62, 63, 64, 65, 66, 67, 68, 69, 70,

        91, 92, 93, 94, 95, 96, 97, 98, 99, 100,

        11, 21, 41, 51, 71, 81, 20, 30, 50, 60, 80, 90);

        for (i = 4; i > 0; i--)
        {

            for (j = 0; j < 4; j++)
            {

                cont++;

                context.drawImage(tile1, (i + j) * tile1.width / 2, (5 * tile1.height / 2) + (j - i) * tile1.height / 2);

                if (grass.indexOf(cont) > -1)

                context.drawImage(tile2, (i + j) * tile1.width / 2, (5 * tile1.height / 2) + (j - i) * tile1.height / 2 - (tile2.height - tile1.height));

            }

        }

    };

    tile1.src = "http://www.joelrlneto.xpg.com.br/canvas/tile001.png";

    tile2.src = "http://www.joelrlneto.xpg.com.br/canvas/tile002.png";

    tile3.src = "http://www.joelrlneto.xpg.com.br/canvas/floor1.png";

};