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 hit = false;
        var player = $("#Player"),
            shuriken = $("#Shuriken"),
            container = $("#Container"),
            w = container.width() - shuriken.width();
        var wallT = 0,
            wallB =269,
            wallL = 0,
            wallR =269;
      function checkBoundUpDw(pos) {
         console.log(pos > wallT && pos < wallB)
          if(pos > wallT && pos < wallB){
           return true;
          }
          return false;
      }
      function checkBoundleftRight(pos) {
          if(pos > wallL && pos <wallR){
           return true;
          }
          return false;
      }
$(window).keydown(function (e) {
     
    var position = player.position();
            if (e.which == 38) {
                if(checkBoundUpDw(position.top-20)){
                   player.animate({ top: '-=20px' });
                   shuriken.animate({ top: '-=20px'}); 
                }            
            } // up
            if (e.which == 40) { 
               if(checkBoundUpDw(position.top+20)){
                  player.animate({ top: '+=20px' });
                  shuriken.animate({ top: '+=20px' });
               }
            } // down
            if (e.which == 32) {                
                    shuriken.animate({ left: '+=280px' });
            } // space bar hit
            
        });
  });