JSFiddle - React, Tailwind, and code Playground

by fparent

HTML

<div class="character"></div>

CSS

div {
  width: 100px;
  height: 100px;
  background-color: black;
  position: absolute;   
  top: 0;
  left: 0;
}

JavaScript

$(function() {
    var distance = 10;
    var speed = 100;


    $( 'body' ).on( 'keydown', function( e ) {
        var $target = $( '.character' );
        var top = $target.css( 'top' );
        var left = $target.css( 'left' );

        switch ( e.keyCode ) {
            case 37:  // [Left]
                $target.animate({ 'left': '-=' + distance }, speed);
            break;

            case 38:  // [Up]
                $target.animate({ 'top': '-=' + distance }, speed);
            break;

            case 39:  // [Right]
                $target.animate({ 'left': '+=' + distance }, speed);
            break;

            case 40:  // [Down]
                $target.animate({ 'top': '+=' + distance }, speed);
            break;

            default:
                return;
        };
    });
    
});