arrow key movement

tiny enhancement of Šime Vidas arrow-movement-function.

by infidel

HTML

<div id="pane">
        <div id="box" border='0'></div>
    </div>

CSS

#pane {
    position:relative;
    width:100%; height:400px;
    border:2px solid red;
}

#box {
    position:absolute;
    background: #000;
    top:140px;
    left:20%;
    width:20px;
    height:20px;
}

JavaScript

var pane = $('#pane'),
    box = $('#box'),
    wh = pane.width() - box.width(),
    wv = pane.height() - box.height(),
    d = {},
    x = 5;

    function newh(v,a,b) {
        var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
        return n < 0 ? 0 : n > wh ? wh : n;
    }

    function newv(v,a,b) {
        var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
        return n < 0 ? 0 : n > wv ? wv : n;
    }

    $(window).keydown(function(e) { d[e.which] = true; });
    $(window).keyup(function(e) { d[e.which] = false; });

    setInterval(function() {
        box.css({
            left: function(i,v) { return newh(v, 37, 39); },
            top: function(i,v) { return newv(v, 38, 40); }
        });
        wh = pane.width() - box.width();
        wv = pane.height() - box.height();
    }, 20);