jQuery implements the bouncing ball game

#box {
       width: 600px;
       height: 650px;
       border: 5px solid rgb(245, 164, 96);
       position: relative;
       left: 500px;
       top: 50px;
       background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(rgba(0, 0, 255, 0.5)));
            }
 
             /*Ball settings*/
            #ball {
                width: 20px;
                height: 20px;
                border-radius: 10px;
                background-color: white;
                position: absolute;
                top: 560px;
                box-shadow: 0px 0px 3px 3px aqua;
            }
            
            /*Start game button settings*/
            #btn {
                width: 150px;
                height: 90px;
                position: fixed;
                left: 730px;
                top: 400px;
                border-radius: 10px;
                box-shadow: #BBBBBB;
                font-size: 24px;
                cursor: pointer;
            }
              /* Slider settings */
            #slider {
                width: 120px;
                height: 20px;
                background-color: lightpink;
                position: absolute;
                top: 585px;
                border-radius: 10px;
                box-shadow: 0px 0px 2px 2px white;
                cursor: pointer;
            }
             /*Border of each block*/
            #brick div {
                width: 98px;
                height: 20px;
                float: left;
                border: 1px solid black;
            }
             /*Game rules border*/
            #tip {
                width: 280px;
                position: fixed;
                top: 200px;
                left: 100px;
                border: 1px solid black;
                text-indent: 2em;
                padding: 10px;
                border-radius: 20px;
            }
           /*Difficulty score border*/
            #grade {
                width: 180px;
                position: fixed;
                top: 100px;
                left: 1150px;
                border: 1px solid black;
                text-indent: 2em;
                padding: 10px;
                border-radius: 20px;
            }
        
             /*h3 font settings*/
            #grade h3 {
                font-weight: 500;
            }
            #phb{
                width: 180px;
                position: fixed;
                top: 50px;
                left: 1150px;
                border: 1px solid black;
                text-indent: 2em;
                padding: 10px;
                border-radius: 10px;
                
            }

<script type="text/javascript">
            var box = document.getElementById("box");
            var ball = document.getElementById("ball");
            var btn = document.getElementById("btn");
            var slider = document.getElementById("slider");
            var obrick = document.getElementById("brick");
            var brickArr = obrick.getElementsByTagName("div");
            var grade = document.getElementById("grade");
 
            var rank = grade.children[1]
            var score = grade.children[3]
            var sco = 0; //score var timer; //ball running var isRunning = false;
            var speedX = rand(3, 12);
            var speedY = -rand(3, 12);
            var num = speedX - speedY;
            //Randomly select difficulty var num = Math.ceil((Math.random() * 9));
            console.log("num is: " + num);
            switch (num) {
                case 1:
                case 2:
                case 3:
                    rank.innerHTML = "Simple";
                    break;
                case 4:
                case 5:
                case 6:
                    rank.innerHTML = "Medium";
                    slider.style.width = 80 + "px";
                    break;
                case 7:
                case 8:
                case 9:
                    rank.innerHTML = "difficult";
                    slider.style.width = 60 + "px";
                    break;
            }
 
            //Randomly generate the initial position of the ball and the slider var beginGo = rand(100, 500);
            ball.style.left = beginGo + 40 + "px";
            slider.style.left = beginGo + "px";
 
            //Start button click event btn.onclick = function() {
                btn.style.display = "none"; //Hide button isRunning = true;
                clearInterval(timer);
                timer = setInterval(function() {
 
                    //Get the initial position of the ball var ballLeft = ball.offsetLeft;
                    var ballTop = ball.offsetTop;
 
 
                    //Get the position of the ball after movement var nextleft = ballLeft + speedX;
                    var nexttop = ballTop + speedY;
 
                    //Horizontal boundary judgment, when the left value of the ball is less than the left boundary of the container or greater than the right boundary of the container, the horizontal speed is reversed if (nextleft <= 0 || nextleft >= box.offsetWidth - ball.offsetWidth - 10) {
                        speedX = -speedX;
                    }
                    //Vertical boundary judgment, when the top value of the ball is less than the upper boundary of the container, the vertical speed is reversed if (nexttop <= 0) {
                        speedY = -speedY;
                    }
                    //When the ball touches the bottom boundary, it will prompt "Game failed" and refresh the page if (nexttop > box.offsetHeight - ball.offsetHeight) {
                        location.reload();
                        alert("Game Over!");
                    }
 
                    //Reassign the position after movement to the ballball.style.left = nextleft + "px";
                    ball.style.top = nexttop + "px";
 
                    //Collision between the ball and the slider if (knock(ball, slider)) {
                        speedY = -speedY;
                    }
 
                    //Collision between the ball and the block for (var j = 0; j < brickArr.length; j++) {
                        if (knock(brickArr[j], ball)) {
                            speedY = -speedY
                            obrick.removeChild(brickArr[j]);
                            sco++;
                            score.innerHTML = sco;
                            break;
                        }
                    }
 
                    //When the number of blocks in the container is 0, announce "game victory" and refresh the page if (brickArr.length <= 0) {
                        location.reload();
                        alert("You win!");
                    }
                }, 20)
            }
 
            //Mouse control slider slider.onmousedown = function(e) {
                var e = e || window.event;
                //Get the initial position of the slider var offsetX = e.clientX - slider.offsetLeft;
                if (isRunning) {
                    document.onmousemove = function(e) {
                        var e = e || window.event;
                        var l = e.clientX - offsetX;
                        if (l <= 0) {
                            l = 0;
                        }
                        if (l >= box.offsetWidth - slider.offsetWidth - 10) {
                            l = box.offsetWidth - slider.offsetWidth - 10;
                        }
                        slider.style.left = l + "px";
                    }
                }
            }
            document.onmouseup = function() {
                document.onmousemove = null; //When the mouse moves}
 
            //Button control slider document.onkeydown = function(e) {
                var e = e || window.event;
                var code = e.keyCode || e.which;
                var offsetX = slider.offsetLeft;
                if (isRunning) {
                    switch (code) {
                        case 37: //leftif (offsetX <= 0) {
                                slider.style.left = 0
                                break;
                            }
                            slider.style.left = offsetX * 4 / 5 + "px";
                            break;
                        case 39: //right if (offsetX >= box.offsetWidth - slider.offsetWidth - 10) {
                                slider.style.left = box.offsetWidth - slider.offsetWidth;
                                break;
                            }
                            slider.style.left = (box.offsetWidth - slider.offsetWidth - offsetX) / 5 + offsetX + "px";
                            break;
                    }
                }
 
            }
            //There are 66 blocks in total createBrick(66);
 
            //Create a block in the container function createBrick(n) {
                var oBrick = document.getElementById("brick");
                //Insert n div blocks into the big box brick and give them random colors for (var i = 0; i < n; i++) {
                    var node = document.createElement("div");
                    node.style.backgroundColor = color();
                    oBrick.appendChild(node);
                }
                //Get all blocks var brickArr = obrick.getElementsByTagName("div")
 
                // According to the current position of each block, assign the left and top values ​​to the block for (var i = 0; i < brickArr.length; i++) {
                    brickArr[i].style.left = brickArr[i].offsetLeft + "px";
                    brickArr[i].style.top = brickArr[i].offsetTop + "px";
                }
                //Set all blocks to absolute positioning. Note that this step cannot be swapped with the previous step for (var i = 0; i < brickArr.length; i++) {
                    brickArr[i].style.position = "absolute";
                }
            }
            //Randomly generate colors function color() {
                var result = "#";
                for (var i = 0; i < 6; i++) {
                    result += rand(0, 15).toString(16)
 
                }
                return result;
            }
            //Random number generation function rand(n, m) {
                return n + parseInt(Math.random() * (m - n + 1));
            }
 
            //Collision detection 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;
                }
            }
</script>