move a div with key press - add bg image

move a div with key press - add bg image

HTML

<!--move a div with key press - add bg image -->
<div id="box"></div>
<div id=wall></div>Use left right top down arrows to move bear, use j key to jump

CSS

#wall {
    position:absolute;
    width:300px;
    height:50px;
    background-color:red;
    top:350px;
    left:400px;
}
#box {
    position:absolute;
    top:300px;
    width:100px;
    height:100px;
    background-color:black;
    background-image:url('http://i2.kym-cdn.com/entries/icons/square/000/000/005/pedobear.jpg');
    background-repeat:no-repeat;
}

JavaScript

$(document).keydown(function (pk) {
    var pos = $('#box').position();

    if (pk.keyCode == '37') {
        $('#box').animate({
            'left': pos.left - 65 + 'px'
        }, 200);
    }
    if (pk.keyCode == '38') {
        $('#box').animate({
            'top': pos.top - 65 + 'px'
        }, 200);
        setTimeout(function(){
            $('#box').animate({
            'top': pos.top + 'px'
            }, 90);
        }, 200);
    }
    if (pk.keyCode == '39') {
        $('#box').animate({
            'left': pos.left + 65 + 'px'
        }, 200);
    }
    if (pk.keyCode == '40') {
        $('#box').animate({
            'top': pos.top + 65 + 'px'
        }, 200);
    }
    if (pk.keyCode == '74') {
        $('#box').animate({
            'top':pos.top - 65 + 'px'
        }, 200);
        setTimeout(function(){
            $('#box').animate({
            'top': pos.top + 'px'
            }, 90);
        }, 200);
    }

});