跳ねるボールを実現するネイティブjs

<スタイル> //スタイル スタイル* {
            マージン: 0;
            パディング: 0;
        }

        ＃箱 {
            幅: 500ピクセル;
            高さ: 600px;
            背景色: #eee;
            ボックスシャドウ: 0 0 10px 0 #000;
            マージン: 自動;
            オーバーフロー: 非表示;
            位置: 相対的;
            上マージン: 50px;
        }

        #ボックスdiv{
            幅: 50px;
            高さ: 50px;
            境界線の半径: 50%;
            背景色: #fff;
            位置: 絶対;
        }
    </スタイル>
    <本文>
    <div id="ボックス">
        <div id="cir"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</本文>
<スクリプト>
var box = document.getElementById("box");
var cir = document.getElementById("cir")
var cirs = box.querySelectorAll("div");
collMove(ボックス、円、6);
collMove(ボックス、cirs[1]、7);
collMove(ボックス、cirs[2]、8);
collMove(ボックス、cirs[3]、9);
collMove(ボックス、cirs[4]、10);
collMove(ボックス、cirs[5]、10);
collMove(ボックス、cirs[6]、11);
/**
 * 要素は境界に遭遇するとポップアップします* ポップアップ中に要素の色を変更します* @param {取得するコンテナー} ボックス 
 * @param {コンテナ内のバウンス要素を取得する} cir 
 * @param {バウンス速度} 速度 
 */
function collMove(box, cir, speed) { //メソッドのカプセル化 var oDiv = box; //コンテナを取得 var oCir = cir; //コンテナ内の要素を取得 var xMax = oDiv.offsetWidth - oCir.offsetWidth; //コンテナの最大X軸境界 var yMax = oDiv.offsetHeight - oCir.offsetHeight; //コンテナの最大Y軸境界 var motionX = 0; //要素のX軸座標の初期化 var motionY = 0; //要素のY軸座標の初期化 (() => {
        var speedX = speed; //x軸オフセット var speedY = speed; //y軸オフセット setInterval(() => {
            motionX += speedX; //X 軸のオフセットを実行しますmotionY += speedY; //y 軸のオフセットを実行しますif (motionX >= xMax) { //X 軸の右境界に当たったかどうかを確認しますmotionX = xMax; //境界に当たった場合は、X 軸の座標を x 軸の右境界の最大値に設定しますspeedX = -speedX; //x 軸のオフセットを反転しますrandColor(oCir); //色を変更します} else if (motionX <= 0) { //X 軸の左境界に当たったかどうかを確認しますmotionX = 0; //境界に当たった場合は、X 軸の座標を 0、つまり左境界の初期位置に設定しますspeedX = -speedX; //X 軸のオフセットを再度反転しますrandColor(oCir); //以下の上限と下限の検出についても同様です}
            モーションY >= yMaxの場合{
                モーションY = yMax;
                速度Y = -速度Y
                randColor(oCir);
            } それ以外の場合 (motionY <= 0) {
                モーションY = 0;
                速度Y = -速度Y;
                randColor(oCir);
            }
            oCir.style.marginLeft = motionX + "px"; // 要素の X 軸座標を設定します oCir.style.marginTop = motionY + "px"; // 要素の Y 軸座標を設定します }, 10);
    })();

    function randColor(obj) { //ランダムな色をカプセル化し、色を変更して直接呼び出します var op = Math.random() * 7 + 3;

        関数 color() {
            Math.floor(Math.random() * 256) を返します。
        }
        obj.style.backgroundColor = `rgba(${color()},${color()},${color()},${op})` を返します。
    }
}
</スクリプト>

(var i = 1; i<=10; i++){
 ボックスを移動します。
}