JSFiddle - React, Tailwind, and code Playground
HTML
<div id="Container" class="Container">
<div id="PLayer" class="player">
<img id="Ninja" 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>
CSS
.Container
{
width: 300px;
height: 300px;
background-color: White;
border: 1px solid black;
}
.player
{
left: 0px;
position: relative;
bottom: 0px;
width: 35px;
height: 35px;
}
#Shuriken
{
left: 6px;
margin-top: -39px;
position: absolute;
top: 50px;
}
JavaScript
$(document).ready(function () {
var pane = $('#Container'),
box = $('#PLayer'),
shuriken = $("#Shuriken"),
w = pane.width() - box.width(),
d = {},
shurikenHitBorder=false,
x = 3;
function newv(v, a, b) {
var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
return n < 0 ? 0 : n > w ? w : n;
}
$(window).keydown(function (e) {
d[e.which] = true;
if (e.which == 32) {
if (!shurikenHitBorder) {
shuriken.animate({ left: '+=280px' }, 'fast');
shuriken.fadeIn(100);
}
shurikenHitBorder = true;
}
});
$(window).keyup(function (e) { d[e.which] = false; });
setInterval(function () {
box.css({top: function (i, v) { return newv(v, 38, 40); }});
}, 20);
});