[tsigel]

<div style="position:absolute; width: 10px; height: 10px; left: 0; top:0; background: red"></div>
<script>

    /**
     * @class Square
     * @param {HTMLElement} node
     * @constructor
     */
    var Square = function (node) {
        this.x = 0;
        this.y = 0;
        this.step = 10;
        this.node = node;
        this.setHandlers();
    };

    Square.prototype.setHandlers = function () {
        var keys = {
            37: "left",
            38: "up",
            39: "right",
            40: "down"
        };
        var that = this;
        document.addEventListener("keydown", function (e) {
            if (e.keyCode in keys) {
                that[keys[e.keyCode]](); 
                that.draw();
            }
        }, false);
    };

    Square.prototype.left = function () {
        this.x -= this.step;
    };

    Square.prototype.right = function () {
        this.x += this.step;
    };

    Square.prototype.up = function () {
        this.y -= this.step;
    };

    Square.prototype.down = function () {
        this.y += this.step;
    };

    Square.prototype.draw = function () {
        this.node.style.left = this.x + "px";
        this.node.style.top = this.y + "px";
    };

    new Square(document.querySelector("div"));

</script>