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:0;
         }
      #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) {
      if (parseInt(player.css('top')) > 10) {
        player.animate({ top: '-=20px' });
        shuriken.animate({ top: '-=20px' });
      }
    } // up
    if (e.which == 40) {
      if (parseInt(player.css('top')) < 270) {
        player.animate({ top: '+=20px' });
        shuriken.animate({ top: '+=20px' });
      }
    } // down
    if (e.which == 32) { 
      if (shuriken.css('left') != '249px') {
        shuriken.animate({ 'left' : '+=280px' });
      }
    }
  });
});