后期根据小球滚动原理集合键盘事件实现打砖块小游戏

<script>
        // 获取body
        var body = document.querySelector('body')
            // 声明小球滚动的函数
        function ballsScroll() {
            // 创建一个小球
            var ball = document.createElement('div')
                // 将小球插入页面中
            body.appendChild(ball)
                // 随机小球的大小
            var size = Math.ceil(Math.random() * 50 + 20)
                // 给小球设置宽高
            ball.style.width = size + 'px'
            ball.style.height = size + 'px'
                // 给小球设置随机背景颜色
            ball.style.background = 'rgb(' + Math.ceil(Math.random() * 255) + ',' + Math.ceil(Math.random() * 255) + ',' + Math.ceil(Math.random() * 255) + ')'
                //    设置小球随机出现的位置,注:需要给小球设置定位
            ball.style.left = Math.floor(Math.random() * (document.documentElement.clientWidth - size)) + 'px'
            ball.style.top = Math.floor(Math.random() * (document.documentElement.clientHeight - size)) + 'px'
                // 随机小球的透明度
            ball.style.opacity = Math.random();
            // 给小球随机的水平与竖直方向的速度
            var speedx = Math.floor(Math.random() * 5) + 10
            var speedy = Math.floor(Math.random() * 10) + 10;
            // 随机小球运动方向
            if (Math.random() > 0.5) {
                speedx = -speedx
            }
            if (Math.random() > 0.5) {
                speedy = -speedy
            }
            // 设置定时器,使小球在页面中运动
            setInterval(function() {
                // 边界判定
                if (ball.offsetTop <= 0 || ball.offsetTop >= document.documentElement.clientHeight - size) {
                    speedy = -speedy
                }
                if (ball.offsetLeft <= 0 || ball.offsetLeft >= document.documentElement.clientWidth - size) {
                    speedx = -speedx
                }
                ball.style.left = parseInt(ball.style.left) - speedx + 'px';
                ball.style.top = parseInt(ball.style.top) - speedy + 'px';

            }, 1000 / 60)
        }
        // 设置小球的生成数量
        for (var i = 0; i <= 20; i++) {
            ballsScroll()
        }
        // 设置窗口改变事件
        window.onresize = function() {
            for (var i = 0; i <= 10; i++) {

                ballsScroll()

            }
        }