JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Container">
    <img id="Player" src="https://lh3.ggpht.com/-iWPbpjo8tbo/TzTaJ25rytI/AAAAAAAAAto/aS2zrzm-w_o/s1600/ninja.png" width="35px" height="35px" alt="Player" />
    <img id="Shuriken" src="http://fc02.deviantart.net/fs41/f/2009/035/a/5/Ninja_star_dock_icon__K_ninja__by_piepiepie12345667890.png" width="20px" height="20px" alt="shuriken" />
    </div>

CSS

.Container
    {
        width:300px;
        height:300px;
        border:1px solid black;
     }
     #Player
     {
         position:relative;
         top:50%;
         left:0px;
         }
      #Shuriken
      {
          position:relative;
          top:46%;
          left:-31px;
          
          }

JavaScript

$(document).ready(function () {
        var player = $("#Player"),
            shuriken = $("#Shuriken"),
            container = $("#Container"),
            w = container.width() - shuriken.width();
$(window).keydown(function (e) {
            if (e.which == 38) { player.animate({ top: '-=20px' }); shuriken.animate({ top: '-=20px' }); } // up
            if (e.which == 40) { player.animate({ top: '+=20px' }); shuriken.animate({ top: '+=20px' }); } // down
            if (e.which == 32) { shuriken.animate({ left: '+=280px' });} // space bar hit
            
        });
  });