Natives JS zur Realisierung eines springenden Balls

<Stil> //Stil Stil* {
            Rand: 0;
            Polsterung: 0;
        }

        #Kasten {
            Breite: 500px;
            Höhe: 600px;
            Hintergrundfarbe: #eee;
            Kastenschatten: 0 0 10px 0 #000;
            Rand: automatisch;
            Überlauf: versteckt;
            Position: relativ;
            Rand oben: 50px;
        }

        #box div {
            Breite: 50px;
            Höhe: 50px;
            Randradius: 50 %;
            Hintergrundfarbe: #fff;
            Position: absolut;
        }
    </Stil>
    <Text>
    <div id="box">
        <div id="cir"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
<Skript>
var box = document.getElementById("box");
var cir = document.getElementById("cir")
var cirs = box.querySelectorAll("div");
collMove(box, Kreis, 6);
collMove(box, cirs[1], 7);
collMove(box, cirs[2], 8);
collMove(box, cirs[3], 9);
collMove(box, cirs[4], 10);
collMove(box, cirs[5], 10);
collMove(box, cirs[6], 11);
/**
 * Das Element wird angezeigt, wenn es auf eine Grenze trifft. * Ändert die Farbe des Elements beim Anzeigen. * @param {Abzurufender Container} box 
 * @param {hol das Bounce-Element im Container} cir 
 * @param {bounce speed} Geschwindigkeit 
 */
function collMove(box, cir, speed) { //Methodenkapselung var oDiv = box; //Container abrufen var oCir = cir; //Element im Container abrufen var xMax = oDiv.offsetWidth - oCir.offsetWidth; //Maximale X-Achsengrenze des Containers var yMax = oDiv.offsetHeight - oCir.offsetHeight; //Maximale Y-Achsengrenze des Containers var motionX = 0; //Initialisierung der X-Achsenkoordinate des Elements var motionY = 0; //Initialisierung der Y-Achsenkoordinate des Elements (() => {
        var speedX = Geschwindigkeit; //Offset der x-Achse var speedY = Geschwindigkeit; //Offset der y-Achse setInterval(() => {
            motionX += speedX; //X-Achsen-Offset ausführenmotionY += speedY; //Y-Achsen-Offset ausführenif (motionX >= xMax) { //Überprüfen, ob die rechte Grenze der X-Achse erreicht wirdmotionX = xMax; //Bei Erreichen der Grenze die X-Achsenkoordinate auf die maximale rechte Grenze der X-Achse setzenspeedX = -speedX; //X-Achsen-Offset umkehrenrandColor(oCir); //Farbe ändern} else if (motionX <= 0) { //Überprüfen, ob die linke Grenze der X-Achse erreicht wirdmotionX = 0; //Bei Erreichen der Grenze die X-Achsenkoordinate auf 0 setzen, d. h. auf die Anfangsposition der linken GrenzespeedX = -speedX; //X-Achsen-Offset erneut umkehrenrandColor(oCir); //Dasselbe gilt unten für die Erkennung der oberen und unteren Grenze}
            wenn (BewegungY >= yMax) {
                BewegungY = yMax;
                GeschwindigkeitY = -GeschwindigkeitY
                Randfarbe(oCir);
            } sonst wenn (BewegungY <= 0) {
                BewegungY = 0;
                GeschwindigkeitY = -GeschwindigkeitY;
                Randfarbe(oCir);
            }
            oCir.style.marginLeft = motionX + "px"; //X-Achsenkoordinate des Elements festlegen oCir.style.marginTop = motionY + "px"; //Y-Achsenkoordinate des Elements festlegen }, 10);
    })();

    function randColor(obj) { //Eine zufällige Farbe einkapseln, die Farbe ändern und direkt aufrufen var op = Math.random() * 7 + 3;

        Funktion Farbe() {
            gibt Math.floor(Math.random() * 256) zurück;
        }
        return obj.style.backgroundColor = `rgba(${color()},${color()},${color()},${op})`;
    }
}
</Skript>

für(var i = 1 ; i<=10;i++){
 collMove(box,cirs[i],i);
}