WASD - Moving block jquery

by lollero

HTML

<div>Move with WASD</div>

CSS

div {
    float: left;
    background: #e1e1e1;
    border: 1px solid #888;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -83px;
}

JavaScript

$(document).on("keydown keyup", function(e) {

        // Up, Down, Right, Left = WASD + Arrow keys
    var up = e.keyCode == 38 || e.keyCode == 87,
        right = e.keyCode == 39  || e.keyCode == 68,
        down = e.keyCode == 40 || e.keyCode == 83,
        left = e.keyCode == 37 || e.keyCode == 65,
        direction = up || down ? 'top' : 'left',
        move = up || left ? '-=' : '+=',
        ani = {};
    
    if ( up || right || down || left ) {
        
        if ( e.type === 'keydown' ) {

                ani[ direction ] = move + '10px';
                $('div').stop().animate( ani, 50 );

        }

    }
    
});