JSFiddle - React, Tailwind, and code Playground

by valllabh

HTML

<body id="sense">
    
    <h2><center>Use your 'asdw' keys to move the map around</center></h2>
    
    <div id="box">
        
        <img id="map" src="http://www.toronto.ca/culture/victoria-square/images/ch0/Victoria-Square-map-t.gif" alt="" />
        
        
    </div>
    
</body>

JavaScript

$(document).ready(function() {
    var longitude = 0;
    var latitude = 0;

    $('body#sense').bind('keydown', function(e) {
         console.log(e.which);

        if (e.which == 65 || e.which == 97) {
            // Left
            if (longitude != 0) {
                longitude = longitude + 10;
                $('img#map').css('margin-left', longitude);
            }
        }
        else if(e.which == 68 || e.which == 100) {
            // Right
            if (longitude > -200) {
                longitude = longitude - 10;
                $('img#map').css('margin-left', longitude);
            }
        }
    });
});