JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <title>Politimon - The Political YouTuber Pokemon-Style Game</title>
    <link rel="stylesheet" type="text/css" href="css/politimon-0.0.1.css">
</head>
<body>

<div id="viewport">
    <div id="map">
        <div id="character"></div>
    </div>
</div>

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/politimon-0.0.1.js"></script>

</body>
</html>

CSS

body {
    margin: 20px;
    background: black;
    color: white;
}

#viewport {
    width: 640px;
    height: 480px;
    border: 2px solid #3567b0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

#map {
    background: green;
    width: 800px;
    height: 800px;
    position: relative;
}

#character {
    width: 20px;
    height: 40px;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

$(document).ready(function () {
    var character = $('#character');
    var movement;
    var move_keys = {
        87: {top: "-=1"}, // up
        83: {top: "+=1"}, // down
        65: {left: "-=1"}, // left
        68: {left: "+=1"} // right
    };
    var moving;
    var move_timer;

    $(this).keydown(function (e) {
        e.preventDefault();
        
        if (moving !== e.keyCode) {
            moving = e.keyCode;
            movement = move_keys[e.keyCode];
           	clearInterval(move_timer);
            move_timer = setInterval(startMoving, 1);
        }
    });

    $(this).keyup(function (e) {
        e.preventDefault();

				if(moving === e.keyCode) {
	        moving = false;
	        clearInterval(move_timer);
        }
    });

    function startMoving() {
        if (movement !== undefined) {
            character.css(movement);
        }
    }
});