JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <title>jRPGrid - The Final</title>
        <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" language="javascript" src="sys/jquery-ui-1.8.2.custom.min.js"></script>
        <script type="text/javascript" language="javascript" src="sys/jRPGrid-rc.js"></script>
        <link rel="stylesheet" media="screen" href="css/jRPGrid.css" type="text/css" />
    </head>
    <body>
        <div id="jRPGrid">
            <ul id="container">
            
            </ul>
        </div>
    </body>
</html>

CSS

* { padding: 0; margin: 0; font-family: Arial; font-size: 12px; }

/***/
div#jRPGrid {
    width: 800px;
    height: 1000px;
    min-height: 2000px;
    margin: 25 auto;
}
div#jRPGrid ul#container {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 5;
    width: 800px;
    height: 2000px;
    min-height: 4000px;
}

div#jRPGrid ul#container li.node {
    float: left;
    width: 80px;
    height: 80px;
    min-height: 80px;
    list-style-type: none;
    border: 0px solid #000;
    position: relative;
    z-index: 10;
}
div#jRPGrid ul#container li.node span {
    font-size: 52px;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    color: #fff;
    font-weight: bold;
    text-align: center;
    -moz-opacity:.20;
    filter:alpha(opacity=20);
    opacity:.20;
    cursor: default;
}

div#jRPGrid ul#container li#character {
    display: block;
    list-style-type: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 38px;
    height: 38px;
    min-height: 38px;
    margin: 1px;
    background-color: #fff;
    z-index: 15;
}

JavaScript

// jRPGrid RC

$(document).ready(function() {
    
    var gridContainer = $('#container');
    var gridArray = [ 
        2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        2,2,2,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        0,0,0,2,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        0,0,0,0,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        0,0,0,0,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
    ];

    function loadMap() {
        var i = 0;
        while (i <= gridArray.length) {
            var gridHTML = $(gridContainer).html();
            $(gridContainer).html(gridHTML+'<li class="node"></li>');
            i++;
        }
        $('li.node').each(function() {
            $(gridArray).each(function (i, val) {
                if (val == '0') { gridTile = 'grass.jpg' };
                if (val == '1') { gridTile = 'mud.jpg' };
                if (val == '2') { gridTile = 'sand.gif' };
                $($('ul#container :nth-child('+i+')')).css({ 'background-image': 'url(img/tiles/'+gridTile });
            });
        });
    }
    
    function spawnCharacter() {
        var gridHTML = $(gridContainer).html();
        $(gridContainer).prepend('<li id="character">[:]</li>');
    }
    
    function makeInteractive() {
        $('#character').draggable({ 
            grid: [40, 40],
            containment: gridContainer
        });
        $('li.node span').droppable({
            drop: function(event, ui) {
                var whatAmI = $(this).html();
                //alert("dropped on "+whatAmI); //alert
                if (whatAmI == 44) { loadMap(); }
            }
        });
    }
    
    loadMap();
    spawnCharacter();
    makeInteractive();
});