用JavaScript写一个类似于windows的气泡屏保效果

最近在学习JavaScript，然后在书上看到了一个简单的碰壁反弹效果，效果你们可以看一下，js代码如下：

window.onload = function(){
   
            var main = document.getElementById('main');
            var box = document.getElementById('box');
            var posX = 375; //初始位置x坐标
            var posY = 175; //初始位置y坐标
            var moveX = true; //判断是否向左向右移动，true向左，false向右
            var moveY = true; //同上
            var timer;

            box.style.left = posX + 'px';
            box.style.top = posY + 'px';
            //移动函数
            function move(){
   
                if(moveX){
                    if(posX > 0){
                        posX--;
                        box.style.left = posX + 'px';
                    }else{
                        moveX = false;
                    }
                }else{
                    if(posX < main.clientWidth - box.offsetWidth){
                        posX++;
                        box.style.left = posX + 'px';
                    }else{
                        moveX = true;
                    }
                }
                if(moveY){
                    if(posY > 0){
                        posY--;
                        box.style.top = posY + 'px';
                    }else{
                        moveY = false;
                    }
                }else{
                    if(posY < main.clientHeight - box.offsetHeight){
                        posY++;
                        box.style.top = posY + 'px';
                    }else{
                        moveY = true;
                    }
                }
            }
            timer = setInterval(move,10);
        }

效果的具体实现方式就是，判断box的上下左右是否达到临界值。
上：判断posY < 0
下：判断posY < main.clientHeight - box.offsetHeight(main自身的高度 - box自身的高度)
左右，同理。
但是，写完这一个我并不满足，然后想给它加一个拖拽效果。并且给美化一下，让方块变成一个球体，且并不只有一个。
js代码如下：

window.onload = function(){
   
            var main = document.getElementById('main');
            var num = 1+Math.floor(Math.random()*15); //随机生成1-15的数字，代表球的个数
            var posX = []; //每个球的位置
            var posY = []; 
            var moveX = [];//每个球的移动方向
            var moveY = [];
            var speed = [];//每个球的速度
            var flag = [];//判断球是否移动
            var timer;

            //根据浏览器改变窗口大小
            window.onresize = function(){
   
                var nwidth = document.documentElement.clientWidth;
                var nheight = document.documentElement.clientHeight;
                main.style.width = (nwidth - 40) + 'px';
                main.style.height = (nheight - 40) + 'px';
            }
            onresize();
            //让所有球都可以移动
            for(var i = 0;i < num;i++){
                moveX[i] = true;
                moveY[i] = true;
                speed[i] = 1+Math.floor(Math.random()*5);
                flag[i] = 1;
            }
            //随机颜色
            var getRan