总体功能结构

随机生成小球的样式大小，并碰到墙壁反弹。

创建整体标签

// 定义一个标签game,以及两个按钮，用来控制小球
  <div class="game"></div>
    <button class="fs_btn">发射</button>
    <button class="del_btn">删除</button>

CSS设计小球以及边框

<style>
         // 边框的样式
        .game {
            width: 400px;
            height: 300px;
            border: 1px solid black;
            background-color: blanchedalmond;
            margin: 0 auto;
            position: relative;
        }
        .qiu {
            /* width: 50px;
            height: 50px;
            background: radial-gradient(circle, #fff, blue); */
            border-radius: 50%;
            position: absolute;
        }
    </style>

脚本中的设计

// 获取元素
    var game = document.getElementsByClassName("game")[0]
    var fs_btn = document.getElementsByClassName("fs_btn")[0]
    var del_btn = document.getElementsByClassName("del_btn")[0]

// 创建一个空数组
    var a = []

// 定义一个随机数函数，以便在接下来调用
function my_random(min, max) {
        return parseInt(Math.random() * (max - min)) + min
    }

// 创建一个生成小球的函数
 function create_qiu() {
        var qiu = document.createElement("div")
        qiu.className = "qiu"
        game.append(qiu)
        a.push(qiu)
        // 随机大小
        qiu.bian = my_random(10, 90)
        qiu.style.width = qiu.bian + "px"
        qiu.style.height = qiu.bian + "px"
        // 随机出生点
        qiu.x = my_random(0, game.offsetWidth - qiu.bian)
        qiu.y = my_random(0, game.offsetHeight - qiu.bian)
        // 随机颜色
        qiu.r = my_random(0, 255)
        qiu.g = my_random(0, 255)
        qiu.b = my_random(0, 255)
        qiu.tmd = my_random(3, 11) * 0.1  // 透明度
        qiu.style.backgroundColor = "rgba(" + qiu.r + "," + qiu.b + "," + qiu.r + "," + qiu.tmd + ") "
        // 随机移动距离
        qiu.speedx = my_random(1, 10)
        qiu.speedy = my_random(1, 8)
        // 随机初始出生移动方向
        qiu.fangxiangX = 10 % my_random(0, 11) == 0 ? "a" : "d"
        qiu.fangxiangY = 10 % my_random(0, 11) == 0 ? "w" : "s"
    }

// 小球移动函数
function qiu_move() {
        for (var i = 0; i < a.length; i++) {
            if (a[i].fangxiangY == "w") {
                a[i].y = a[i].y - a[i].speedy
            }
            if (a[i].fangxiangY == "s") {
                a[i].y = a[i].y + a[i].speedy
            }
            if (a[i].fangxiangX == "a") {
                a[i].x = a[i].x - a[i].speedx
            }
            if (a[i].fangxiangX == "d") {
                a[i].x = a[i].x + a[i].speedx
            }
            // 小球碰到边界反弹
            if (a[i].x <= 0) {
                a[i].x = 0
                a[i].fangxiangX = "d"
            }
            if (a[i].x >= game.offsetWidth - a[i].offsetWidth) {
                a[i].x = game.offsetWidth - a[i].offsetWidth
                a[i].fangxiangX = "a"
            }
            if (a[i].y <= 0) {
                a[i].y = 0
                a[i].fangxiangY = "s"
            }
            if (a[i].y >= game.offsetHeight - a[i].offsetHeight) {
                a[i].y = game.offsetHeight - a[i].offsetHeight
                a[i].fangxiangY = "w"
            }
            a[i].style.left = a[i].x + "px"
            a[i].style.top = a[i].y + "px"
        }
// 重复调用的动画函数
        requestAnimationFrame(qiu_move)
    }

    qiu_move()

// 最后，通过点击按钮控制小球的生成和删除

// 点击按钮生成小球
    fs_btn.onclick = function () {
        create_qiu()
    }
// 点击删除最后一个小球
    del_btn.onclick = function () {
        if (a.length > 0) {
            a[a.length - 1].remove()   // 移除显示效果
            a.splice(a.length - 1, 1)    // 从数组中移除
        }
    }