JavaScript - Movimentando 2 DIVs ao mesmo tempo

<html>
    <head>
        <title>Manipulando CSS</title>
        <style>
            #box1{
                width: 50px;
                height: 50px;
                background-color: green;
                border-radius: 50px;
                position: absolute;
                top: 0px;
                left: 0px;
            }
            #box2{
                width: 50px;
                height: 50px;
                background-color: blue;
                border-radius: 50px;
                position: absolute;
                top: 0px;
                left: 200px;
            }
        </style>
        <script>
            var map = {}; // Teclas ao mesmo tempo

            var x1 = 0;
            var y1 = 0;
            var x2 = 200;
            var y2 = 0;

            document.onkeydown = document.onkeyup = function (e) {
                map[e.keyCode] = e.type == 'keydown';

                // Tratando movimento da primeira DIV
                if (map[38]) {
                    y1 = y1 - 20;
                    document.getElementById('box1').style.top = y1 + 'px';
                }
                else if (map[40]) {
                    y1 = y1 + 20;
                    document.getElementById('box1').style.top = y1 + 'px';
                }
                else if (map[37]) {
                    x1 = x1 - 20;
                    document.getElementById('box1').style.left = x1 + 'px';
                }
                else if (map[39]) {
                    x1 = x1 + 20;
                    document.getElementById('box1').style.left = x1 + 'px';
                }

                // Tratando movimento da segunda DIV
                if (map[87]) {
                    y2 = y2 - 20;
                    document.getElementById('box2').style.top = y2 + 'px';
                }
                else if (map[83]) {
                    y2 = y2 + 20;
                    document.getElementById('box2').style.top = y2 + 'px';
                }
                else if (map[65]) {
                    x2 = x2 - 20;
                    document.getElementById('box2').style.left = x2 + 'px';
                }
                else if (map[68]) {
                    x2 = x2 + 20;
                    document.getElementById('box2').style.left = x2 + 'px';
                }
            }
        </script>
    </head>
    <body>
        <div id='box1'></div>
        <div id='box2'></div>
    </body>
</html>