HTML+CSS+JS zur Implementierung des Spiels „Nicht auf das Whiteboard treten“

<div Klasse="Wrapper">
        <div id="gehen">
            <a href="javaScript:void(0)" id="go">Spielstart</a>
        </div>
        <div id="Haupt">
</div></div>

*{
    Rand: 0;
    Polsterung: 0;
}

.Verpackung{
    Rand: 150px automatisch;
    Breite: 400px;
    Höhe: 600px;
    Rand: 1px durchgezogen #ccc;
    Position: relativ;
    Überlauf: versteckt;
}

#gehen{
    Breite: 100 %;
    Position: absolut;
    oben: 0;
    Textausrichtung: zentriert;
    z-Index:99;
}

#geh ein{
    Anzeige:Block;
    Höhe: 100px;
    Breite: 400px;
    Farbe: Cyan;
    Hintergrundfarbe: #000000;
    Textdekoration: keine;
    Rahmen unten: 3px gestrichelt #eee;
    Schriftgröße: 60px;
    Schriftstärke: 600;
}

#hauptsächlich{
    Breite: 400px;
    Höhe: 600px;
    Position: relativ;
    oben: -150px;
    /* Rahmen: 1px durchgehend schwarz; */
}

.Reihe{
    Breite: 400px;
    Höhe: 150px;
}

.row div{
   Breite: 99px;
   Höhe: 149px;
   Rahmen links: 1px durchgezogen #222;
   Rahmen unten: 1px durchgezogen #222;
   schweben: links;
   Cursor: Zeiger;
}

var main = document.getElementById('main'); // DOM-Element abrufen var go = document.getElementById('go'); 
var speed = 5, num = 0, timer, flag = true; // Anfangsvariablen festlegen var colors = ['red', 'green', 'black', 'blue']; // Array zum Speichern von Farben festlegen

Funktion cDiv() {
    var oDiv = document.createElement('div'); // Holen Sie eine Zufallszahl, finden Sie für jede Zeile ein zufälliges Div und legen Sie dessen Farbe fest. var index = Math.floor(Math.random() * 4);
    
    oDiv.setAttribute('class', 'row'); // Setzt den Zeilenklassennamen für (var j = 0; j < 4; j++) { // for-Schleife erzeugt eine Zeile mit vier Divs
        var iDiv = document.createElement('div');
        oDiv.appendChild(iDiv); //Füge jedes kleine Div in jede Zeile ein}
    
    if (main.childNodes.length == 0) { // Füge die neu generierte Zeile ein, je nachdem, ob im übergeordneten Element untergeordnete Elemente vorhanden sind main.appendChild(oDiv); // Wenn das übergeordnete Element leer ist, direkt einfügen } else {
        main.insertBefore(oDiv, main.childNodes[0]); // Wenn das übergeordnete Element Elemente hat, füge die neu generierte Zeile vor der vorhandenen Zeilenanzahl ein} 
    var clickDiv = main.childNodes[0].childNodes[index]; // Setze das farbige Div in einer Zeile entsprechend der Zufallszahl
    clickDiv.setAttribute('class', 'i'); // Setze den Klassennamen dieses Elements als anzuklickende Markierung clickDiv.style.backgroundColor = colors[index]; // Setze gleichzeitig die Hintergrundfarbe}

Funktion bindEvent() {
    main.addEventListener('click', function (event) { // Füge ein Klickereignis zu main hinzuif (flag) { // Bestimmen, ob es basierend auf dem Flagwert anklickbar istvar tar = event.target; // Rufe das Quellereignis des Klicks abif (tar.className == 'i') { // Bestimmen, ob der angeklickte Block farbig isttar.style.backgroundColor = '#bbb'; // Ändere die Hintergrundfarbetar.classList.remove('i'); // Entferne den Klassennamennum++; // Count++
            } anders {                
                alert('Spiel vorbei, Punktestand: ' + num); // Wenn Sie auf den weißen Block klicken, ist das Spiel vorbei clearInterval(timer);
                Flagge = falsch;
            }            
            if (num % 10 == 0) { // Wenn der aktuelle Punktestand ein Vielfaches von 10 ist, speed++
                Geschwindigkeit++;
            }
        }
    })
}

Funktion verschieben() {
    Intervall löschen(Timer); 
    Timer = setInterval(function () { // Timer einstellen var step = parseInt(main.offsetTop) + speed; // Oberen Wert verwenden, um Hauptbereich zu verschieben main.style.top = step + 'px';
        if (parseInt(main.offsetTop) >= 0) { // Wenn der Hauptbereich in den sichtbaren Bereich verschoben wird, erstelle eine neue Zeile mit Elementen cDiv();
            main.style.top = '-150px'; // Verschiebe den Hauptbereich auch über den sichtbaren Bereich}
        var len = main.childNodes.length; // Anzahl der Zeilen im Hauptbereich abrufen if (len == 6) { // Wenn die Anzahl der Zeilen im Hauptbereich 6 beträgt, wird über und unter den vier Zeilen im Anzeigebereich eine neue Zeile generiert for (var i = 0; i < 4; i++) { // Jedes div in der letzten Zeile durchlaufen
                
                if (main.childNodes[len - 1].children[i].classList.contains('i')) { // Wenn es eines gibt, das das Game Over enthält, das nicht angeklickt wurde, alert('Game over, score: ' + num);
                    Intervall löschen(Timer);
                    flag = false; // Du kannst nach Spielende nicht erneut klicken}
            }
            
            main.removeChild(main.childNodes[len - 1]); // Jede Zeile nach der Anzeige entfernen}
    }, 20)
    bindEvent(); // Klickereignis}

// Klicken Sie auf die Schaltfläche „Start“, um mit der Bewegung und Erstellung der einzelnen Elementzeilen zu beginnen. Funktion clickStart() {
    go.addEventListener('klicken', Funktion () {
        go.style.display = "keine";
        bewegen();
    });
}
klickStart();