打砖块游戏

#div1 {
                width:600px;
                height:600px;
                border:1px solid black;
                position:relative;
                margin:100px auto;
            }
            #ball {
                width:20px;
                height:20px;
                background-color: red;
                border-radius: 50%;
                position: absolute;
                left:290px;
                bottom: 30px;
            }
            #bat{
                width:100px;
                height:30px;
                background-color: blue;
                position:absolute;
                bottom:0px;
                left:250px;
            }
            #brick div {
                width:98px;
                height:18px;
                border:1px solid black;
                float:left;
            }

window.onload = function(){
                var oDiv = document.getElementById("div1");
                var oBall = document.getElementById("ball");
                var oBat = document.getElementById("bat");
                var oBrick = document.getElementById("brick");
                var aBricks = oBrick.getElementsByTagName("div");
                dragX(oBat);
                createBrick(60);

                //让小球可以水平方向运动，随机一个水平方向的速度
                var speedX = parseInt(Math.random() * 4) + 3;
                //随机一个垂直方向的速度
                var speedY =  -(parseInt(Math.random() * 3) + 5);
                
                // alert(speedY);
                // alert(oDiv.offsetWidth-oBall.offsetWidth);
                // alert(oDiv.offsetHeight-oBall.offsetHeight);
                setInterval(function(){
                    oBall.style.left = oBall.offsetLeft + speedX + "px";
                    oBall.style.top = oBall.offsetTop + speedY + "px";
                    //限制出界
                    if(oBall.offsetLeft>=oDiv.offsetWidth-oBall.offsetWidth || oBall.offsetLeft<=0){
                        speedX *= -1;
                    }
                    if(oBall.offsetTop<=0){
                        speedY *= -1;
                    }
                    if(oBall.offsetTop>=oDiv.offsetHeight-oBall.offsetHeight){
                        alert("Game Over !");
                        window.location.reload();
                        // continue;
                    }

                    /*
                      进行碰撞检测
                    */
                    //1、小球和拍子的碰撞检测
                    if(knock(oBall,oBat)){
                        speedY *=-1 ;
                        
                    }
                    //2、小球和砖块的碰撞检测
                    for(var i=0;i<aBricks.length;i++){
                        if(knock(aBricks[i],oBall)){
                           speedY *=-1;
                           // 砖块要被删除
                           oBrick.removeChild(aBricks[i]);
                           break;
                        }
                    }
                    
                },30);
            }

            function dragX(node){
                var oDiv = document.getElementById("div1");
                var oBat = document.getElementById("bat");
                node.onmousedown = function(ev){
                    var e = ev || windown.event;
                    var offsetX = e.clientX - node.offsetLeft;

                    document.onmousemove = function(ev){
                        var e = ev || windown.event;
                        var l = e.clientX - offsetX;
                        //
                        if(l<=0){
                            l = 0;
                        }
                        if(l>=oDiv.offsetWidth-oBat.offsetWidth){
                            l = oDiv.offsetWidth-oBat.offsetWidth;
                        }
                        node.style.left = l + "px";
                    }
                }
                document.onmouseup = function(){
                    document.onmousemove = null;
                }
            }

            //创建砖块，n的意思是创建n个砖块
            /*
              文档流转换
              相对定位 转 绝对定位
            */
            function createBrick(n){
                var oBrick = document.getElementById("brick");
                for(var i=0;i<n;i++){
                    var node = document.createElement("div");
                    node.style.backgroundColor = randomColor();
                    oBrick.appendChild(node);
                }
                var aBricks = oBrick.getElementsByTagName("div");
                for(var i=0;i<aBricks.length;i++){
                    aBricks[i].style.left = aBricks[i].offsetLeft + "px";
                    aBricks[i].style.top = aBricks[i].offsetTop + "px";
                }
                for(var i=0;i<aBricks.length;i++){
                    aBricks[i].style.position = "absolute";
                }

            }
            //获取随机颜色
            function randomColor(){
                var str = "rgb(" + parseInt(Math.random()*255) + "," + parseInt(Math.random()*255) + "," + parseInt(Math.random()*255) + ",1)";
                return str;
            };

            /* 
              思路：找到如何是绝对碰不上的。
            */
           function knock(node1,node2){
               var l1 = node1.offsetLeft;
               var r1 = node1.offsetLeft + node1.offsetWidth;
               var t1 = node1.offsetTop;
               var b1 = node1.offsetTop + node1.offsetHeight;

               var l2 = node2.offsetLeft;
               var r2 = node2.offsetLeft + node2.offsetWidth;
               var t2 = node2.offsetTop;
               var b2 = node2.offsetTop + node2.offsetHeight;

               if(l2>r1 || r2<l1 || t2>b1 || b2<t1){
                   return false;
               }else{
                   return true;
               } 
           }