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>
<div id="log"></div>

CSS

.Container
{
    width:320px;
    height:320px;
    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(),
        oLog = $("#log"),
        posDelta = 20, // amount of change in position
        playerOffset = player.height() * 0.5,
        playerPos = player.position().top,
        maxTop = posDelta,
        maxBottom = container.height() - (posDelta + playerOffset);
    
    oLog.html("<b>Limits:</b> " + maxTop + " - " + maxBottom + "<br /><b>PlayerPos:</b> " + playerPos);
    
    $(window).keydown(function (e) {
        if (e.which == 38 && playerPos >= maxTop + posDelta) {
            player.animate({ top: '-=20px' });
            playerPos = player.position().top;
            oLog.html("<b>Limits:</b> " + maxTop + " - " + maxBottom + "<br /><b>PlayerPos:</b> " + playerPos);
            shuriken.animate({ top: '-=20px' }); } // up
        if (e.which == 40 && playerPos <= maxBottom - posDelta) {
            player.animate({ top: '+=20px' });
            playerPos = player.position().top;
            oLog.html("<b>Limits:</b> " + maxTop + " - " + maxBottom + "<br /><b>PlayerPos:</b> " + playerPos);
            shuriken.animate({ top: '+=20px' }); } // down
        if (e.which == 32) {
            shuriken.animate({ left: '+=280px' });
        } // space bar hit    
    });
});