JSFiddle - React, Tailwind, and code Playground

by valllabh

HTML

<body>
    <h2><center>Use your 'A S D W' keys to move the map around. Use 'Shift' for faster movement.</center></h2>
    <div id="box">
        <img src="http://www.toronto.ca/culture/victoria-square/images/ch0/Victoria-Square-map-t.gif" alt="" />
    </div>
</body>

CSS

body {
    position:relative;
}
#box {
    position:absolute; top:140px; left:215px;
    width:422px; height:346px;          
}

JavaScript

$('body').bind('keydown', function(e) {

    var css = $('#box').offset();

    var step = 3;

    if (e.shiftKey) {
        step = 20;
    }

    switch (e.which) {
    case 65:
        css.left = css.left - step;
        break;
    case 68:
        css.left = css.left + step;
        break;
    case 87:
        css.top = css.top - step;
        break;
    case 83:
        css.top = css.top + step;
        break;
    }

    if (e.which != 16) {
        $('#box').css(css);
    }
});