jQuery implementiert das Bouncing-Ball-Spiel

#Kasten {
       Breite: 600px;
       Höhe: 650px;
       Rand: 5px durchgezogenes RGB (245, 164, 96);
       Position: relativ;
       links: 500px;
       oben: 50px;
       Hintergrund: -webkit-gradient(linear, 0 0, 0 unten, von(#ffffff), bis(rgba(0, 0, 255, 0,5)));
            }
 
             /*Balleinstellungen*/
            #ball {
                Breite: 20px;
                Höhe: 20px;
                Rahmenradius: 10px;
                Hintergrundfarbe: weiß;
                Position: absolut;
                oben: 560px;
                Boxschatten: 0px 0px 3px 3px Aqua;
            }
            
            /*Einstellungen der Schaltfläche „Spiel starten“*/
            #btn {
                Breite: 150px;
                Höhe: 90px;
                Position: fest;
                links: 730px;
                oben: 400px;
                Rahmenradius: 10px;
                Kastenschatten: #BBBBBB;
                Schriftgröße: 24px;
                Cursor: Zeiger;
            }
              /* Slider-Einstellungen */
            #Schieberegler {
                Breite: 120px;
                Höhe: 20px;
                Hintergrundfarbe: hellrosa;
                Position: absolut;
                oben: 585px;
                Rahmenradius: 10px;
                Box-Schatten: 0px 0px 2px 2px weiß;
                Cursor: Zeiger;
            }
             /*Rand jedes Blocks*/
            #Ziegel div {
                Breite: 98px;
                Höhe: 20px;
                schweben: links;
                Rand: 1px tief schwarz;
            }
             /*Spielregeln-Rand*/
            #Tipp {
                Breite: 280px;
                Position: fest;
                oben: 200px;
                links: 100px;
                Rand: 1px tief schwarz;
                Texteinzug: 2em;
                Polsterung: 10px;
                Rahmenradius: 20px;
            }
           /*Grenze für Schwierigkeitsbewertung*/
            #Grad {
                Breite: 180px;
                Position: fest;
                oben: 100px;
                links: 1150px;
                Rand: 1px tief schwarz;
                Texteinzug: 2em;
                Polsterung: 10px;
                Rahmenradius: 20px;
            }
        
             /*h3-Schrifteinstellungen*/
            #Klasse h3 {
                Schriftstärke: 500;
            }
            #phb{
                Breite: 180px;
                Position: fest;
                oben: 50px;
                links: 1150px;
                Rand: 1px tief schwarz;
                Texteinzug: 2em;
                Polsterung: 10px;
                Rahmenradius: 10px;
                
            }

<Skripttyp="text/javascript">
            var box = document.getElementById("box");
            var ball = document.getElementById("ball");
            var btn = document.getElementById("btn");
            var Schieberegler = document.getElementById("Schieberegler");
            var obrick = document.getElementById("Ziegel");
            var brickArr = obrick.getElementsByTagName("div");
            var Note = document.getElementById("Note");
 
            var Rang = Klasse.Kinder[1]
            var Punktzahl = Note.Kinder[3]
            var sco = 0; //Punktzahl var Timer; //Ball läuft var isRunning = false;
            var GeschwindigkeitX = Rand(3, 12);
            var GeschwindigkeitY = -rand(3, 12);
            var num = GeschwindigkeitX - GeschwindigkeitY;
            //Schwierigkeitsgrad zufällig auswählen var num = Math.ceil((Math.random() * 9));
            console.log("num ist: " + num);
            Schalter (Nummer) {
                Fall 1:
                Fall 2:
                Fall 3:
                    rank.innerHTML = "Einfach";
                    brechen;
                Fall 4:
                Fall 5:
                Fall 6:
                    rank.innerHTML = "Mittel";
                    Schieberegler.Stil.Breite = 80 + "px";
                    brechen;
                Fall 7:
                Fall 8:
                Fall 9:
                    rank.innerHTML = "schwierig";
                    Schieberegler.Stil.Breite = 60 + "px";
                    brechen;
            }
 
            //Die Anfangsposition des Balls und des Schiebereglers zufällig generieren var beginGo = rand(100, 500);
            ball.style.left = beginGo + 40 + "px";
            slider.style.left = beginGo + "px";
 
            //Starten Sie das Klickereignis der Schaltfläche btn.onclick = function() {
                btn.style.display = "none"; //Schaltfläche ausblenden isRunning = true;
                Intervall löschen(Timer);
                Timer = Intervall setzen(Funktion() {
 
                    //Anfangsposition des Balls abrufen var ballLeft = ball.offsetLeft;
                    var ballTop = ball.offsetTop;
 
 
                    //Position des Balls nach der Bewegung abrufen var nextleft = ballLeft + speedX;
                    var nexttop = ballTop + GeschwindigkeitY;
 
                    // Beurteilung der horizontalen Grenze: Wenn der linke Wert des Balls kleiner als die linke Grenze des Containers oder größer als die rechte Grenze des Containers ist, wird die horizontale Geschwindigkeit umgekehrt, wenn (nextleft <= 0 || nextleft >= box.offsetWidth - ball.offsetWidth - 10) {
                        GeschwindigkeitX = -GeschwindigkeitX;
                    }
                    //Beurteilung der vertikalen Grenze: Wenn der obere Wert des Balls kleiner als die obere Grenze des Containers ist, wird die vertikale Geschwindigkeit umgekehrt, wenn (nexttop <= 0) {
                        GeschwindigkeitY = -GeschwindigkeitY;
                    }
                    //Wenn der Ball die untere Grenze berührt, wird die Meldung „Spiel fehlgeschlagen“ angezeigt und die Seite aktualisiert, wenn (nexttop > box.offsetHeight - ball.offsetHeight) {
                        Standort.neu laden();
                        Warnung("Spiel vorbei!");
                    }
 
                    //Position nach der Bewegung dem Ball neu zuweisenball.style.left = nextleft + "px";
                    ball.style.top = nächstestop + "px";
 
                    //Kollision zwischen Ball und Slider if (knock(ball, slider)) {
                        GeschwindigkeitY = -GeschwindigkeitY;
                    }
 
                    //Kollision zwischen Ball und Block for (var j = 0; j < brickArr.length; j++) {
                        wenn (klopfen(ZiegelArr[j], Ball)) {
                            GeschwindigkeitY = -GeschwindigkeitY
                            obrick.removeChild(brickArr[j]);
                            sco++;
                            Punktzahl.innerHTML = sco;
                            brechen;
                        }
                    }
 
                    //Wenn die Anzahl der Blöcke im Container 0 ist, verkünde „Spielsieg“ und aktualisiere die Seite if (brickArr.length <= 0) {
                        Standort.neu laden();
                        alert("Du gewinnst!");
                    }
                }, 20)
            }
 
            //Schieberegler zur Maussteuerung slider.onmousedown = function(e) {
                var e = e || Fenster.Ereignis;
                //Anfangsposition des Schiebereglers abrufen var offsetX = e.clientX - slider.offsetLeft;
                wenn (läuft) {
                    Dokument.onmousemove = Funktion(e) {
                        var e = e || Fenster.Ereignis;
                        var l = e.clientX - offsetX;
                        wenn (l <= 0) {
                            l = 0;
                        }
                        wenn (l >= box.offsetWidth - slider.offsetWidth - 10) {
                            l = Box.Offsetbreite – Schieberegler.Offsetbreite – 10;
                        }
                        Schieberegler.Stil.links = l + "px";
                    }
                }
            }
            Dokument.onmouseup = Funktion() {
                document.onmousemove = null; //Wenn die Maus bewegt wird}
 
            //Schaltflächen-Steuerungsschieberegler document.onkeydown = function(e) {
                var e = e || Fenster.Ereignis;
                var code = e.schlüsselCode || e.welcher;
                var offsetX = Schieberegler.offsetLeft;
                wenn (läuft) {
                    Schalter (Code) {
                        Fall 37: //linkswenn (offsetX <= 0) {
                                Schieberegler.Stil.links = 0
                                brechen;
                            }
                            Schieberegler.Stil.links = OffsetX * 4 / 5 + "px";
                            brechen;
                        Fall 39: //rechts wenn (offsetX >= box.offsetWidth - slider.offsetWidth - 10) {
                                Schieberegler.Stil.links = Box.OffsetWidth - Schieberegler.OffsetWidth;
                                brechen;
                            }
                            Schieberegler.Stil.links = (Box.Offsetbreite - Schieberegler.Offsetbreite - OffsetX) / 5 + OffsetX + "px";
                            brechen;
                    }
                }
 
            }
            //Es gibt insgesamt 66 Blöcke createBrick(66);
 
            //Erstelle einen Block in der Containerfunktion createBrick(n) {
                var oBrick = document.getElementById("Ziegel");
                //Füge n Div-Blöcke in den großen Baustein ein und weise ihnen zufällige Farben zu für (var i = 0; i < n; i++) {
                    var Knoten = Dokument.createElement("div");
                    node.style.backgroundColor = Farbe();
                    oBrick.appendChild(Knoten);
                }
                //Alle Blöcke abrufen var brickArr = obrick.getElementsByTagName("div")
 
                // Weisen Sie dem Block entsprechend der aktuellen Position jedes Blocks die linken und oberen Werte zu for (var i = 0; i < brickArr.length; i++) {
                    brickArr[i].style.left = brickArr[i].offsetLeft + "px";
                    brickArr[i].style.top = brickArr[i].offsetTop + "px";
                }
                //Alle Blöcke auf absolute Positionierung setzen. Beachten Sie, dass dieser Schritt nicht mit dem vorherigen Schritt vertauscht werden kann for (var i = 0; i < brickArr.length; i++) {
                    brickArr[i].style.position = "absolut";
                }
            }
            //Farben zufällig generieren function color() {
                var Ergebnis = "#";
                für (var i = 0; i < 6; i++) {
                    Ergebnis += Rand(0, 15).toString(16)
 
                }
                Ergebnis zurückgeben;
            }
            //Funktion zur Generierung von Zufallszahlen rand(n, m) {
                gibt n + parseInt(Math.random() * (m - n + 1)) zurück;
            }
 
            //Kollisionserkennungsfunktion 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;
                wenn (l2 > r1 || r2 < l1 || t2 > b1 || b2 < t1) {
                    gibt false zurück;
                } anders {
                    gibt true zurück;
                }
            }
</Skript>