JavaScript - Movimentando uma DIV

<html>
    <head>
        <title>Manipulando CSS</title>
        <style>
            #box{
                width: 50px;
                height: 50px;
                background-color: green;
                border-radius: 50px;
            }
        </style>
        <script>
            var x = 0;
            var y = 0;
            document.onkeydown = teclar;
            function teclar(e){
                if (e.keyCode == 38) {
                    y = y - 20;
                    document.getElementById('box').style.marginTop = y + 'px';
                }
                else if (e.keyCode == 40) {
                    y = y + 20;
                    document.getElementById('box').style.marginTop = y + 'px';
                }
                else if (e.keyCode == 37) {
                    x = x - 20;
                    document.getElementById('box').style.marginLeft = x + 'px';
                }
                else if (e.keyCode == 39) {
                    x = x + 20;
                    document.getElementById('box').style.marginLeft = x + 'px';
                }
            }
        </script>
    </head>
    <body>
        <div id='box'></div>
    </body>
</html>