JavaScript implementiert das Topfschlagen-Spiel von Gray Wolf

<div Klasse="Container">
        <h1 Klasse="Ergebnis">0</h1>
        <div Klasse="Fortschritt"></div>
        <div id="start">
            <h2>Der Topf liegt auf Big Bad Wolf</h2>
            <button class="start">Starte das Spiel</button></div>
        <div class="rules">Spielregeln</div>
        <div Klasse="Regel">
            <p>Spielregeln:</p>
            <p>1. Spieldauer: 60 s</p>
            <p>2. Treten Sie mit Handgeschwindigkeit an und schlagen Sie Gray Wolf +10 Punkte</p>
            <p>3. Xiao Huihui verprügeln – 10 Punkte</p>
            <a href="#" rel="external nofollow" class="close">[Schließen]</a>
        </div>
        <div Klasse="Maske">
            <h1>SPIEL VORBEI</h1>
            <button class="reStart">Neustart</button>
            <button class="finish">Spiel beenden</button>
        </div>
        <div id="fertig">
            <h2>Der Topf liegt auf Big Bad Wolf</h2>
            <h3>Ergebnis: <span class="scoreEnd"></span> </h3>
        </div>
    </div>

* {
    Rand: 0;
    Polsterung: 0;
}

.container {
    Breite: 320px;
    Höhe: 480px;
    Hintergrund: URL("./images/game_bg.jpg") keine Wiederholung 0 0;
    Rand: 50px automatisch;
    Position: relativ;
}

.container>h1 {
    Rand links: 60px;
}

.container>.fortschritt {
    Breite: 180px;
    Höhe: 16px;
    Hintergrund: URL("./images/progress.png") keine Wiederholung 0 0;
    Position: absolut;
    oben: 66px;
    links: 63px;
}

.container>#start>h2 {
    Rand oben: 180px;
    Farbe: weiß;
    Textausrichtung: zentriert;
}

.container>#start>.start {
    Breite: 150px;
    Zeilenhöhe: 35px;
    Textausrichtung: zentriert;
    Farbe: weiß;
    Hintergrund: linearer Farbverlauf (#E55C3D, #C50000);
    Rahmenradius: 20px;
    Rand: keiner;
    Schriftgröße: 20px;
    Position: absolut;
    oben: 320px;
    links: 50%;
    Rand links: -75px;
}

.container>.regeln {
    Breite: 100 %;
    Höhe: 20px;
    Hintergrund: #ccc;
    Position: absolut;
    links: 0;
    unten: 0;
    Textausrichtung: zentriert;
}

.container>.regel {
    Breite: 100 %;
    Höhe: 100%;
    Hintergrund: rgba(0, 0, 0, 0,5);
    Position: absolut;
    links: 0;
    oben: 0;
    Polsterung oben: 100px;
    Box-Größe: Rahmenbox;
    Textausrichtung: zentriert;
    Anzeige: keine;
}

.rule>p {
    Zeilenhöhe: 50px;
    Farbe: weiß;
}

.rule>a {
    Farbe: rot;
}

.container>.maske {
    Breite: 100 %;
    Höhe: 100%;
    Hintergrund: rgba(0, 0, 0, 0,5);
    Position: absolut;
    links: 0;
    oben: 0;
    Polsterung oben: 200px;
    Box-Größe: Rahmenbox;
    Textausrichtung: zentriert;
    Anzeige: keine;
}

.mask>h1 {
    Farbe: #ff4500;
    Textschatten: 3px 3px 0 #fff;
    Schriftgröße: 40px;
}

.mask>Schaltfläche {
    Breite: 100px;
    Zeilenhöhe: 35px;
    Textausrichtung: zentriert;
    Farbe: weiß;
    Hintergrund: linearer Farbverlauf (#74ACCF, #007DDC);
    Rahmenradius: 20px;
    Rand: keiner;
    Schriftgröße: 20px;
    Position: absolut;
    oben: 320px;
    links: 30%;
}

.mask>.reStart {
    Rand links: -50px;
}

.mask>.fertig {
    Rand links: 80px;
    schweben: rechts;
}

#beenden {
    Farbe: weiß;
    Textausrichtung: zentriert;
    Anzeige: keine;
    Rand oben: 100px;
}

#fertig h2 {
    Polsterung: 25px;
}

var begin = document.querySelector('#start');
var h = begin.querySelector('h2');
var start = document.querySelector ('. Start'); ErySelector ('. Close'); // End -Game -Schaltfläche var Scoreend = document.querySelector ('. Scoreend');
    // konsole.log(123);
    //Schaltfläche ausblenden finish.style.display = 'none';
    var fadIndex = dieser.parentNode;
    fadIndex.style.display = "keine";
    // Länge des Fortschrittsbalkens festlegen var progressWidth = 180;
    FortschrittsHandler(Fortschrittsbreite);
    var Zeitgeber;
    startAnimation(); // Animation startet };
// Regeln // console.log(Regeln);
Regeln.beiKlick = Funktion() {
    console.log('Klicken Sie auf die Spielregeln');
    Regel.Stil.Anzeige = "Block";
};
// Schließen close.onclick = function() {
    console.log('schließen');
    Regel.Stil.Anzeige = "keine";
};
// Starte das Spiel neu reStart.onclick = function() {
    Punktzahl.innerHTML = 0;
    Maske.Stil.Anzeige = "keine";
    // Konsole.log(Ergebnis.innerHTML);
    var Fortschrittsbreite = 180;
    Fortschritt.Stil.Breite = "180px";
    FortschrittsHandler(Fortschrittsbreite);
    : Starten Sie die Animation.
};
// Schaltfläche „Spiel beenden“ finishBtn.onclick = function() {
        Maske.Stil.Anzeige = "keine";
        fertig.style.display = "Block";
        scoreEnd.innerHTML += score.innerHTML;
        begin.style.display = "Block";
        h.style.display = "keine";
        Fortschritt.Stil.Breite = 180 + 'px';
    }
    //Fortschrittsbalkenfunktion progressHandler(index) {
    //Setze den Timer var setProgress = setInterval(function() {
        Index--;
        Fortschritt.Stil.Breite = Index + "px";
        wenn (Index <= 0) {
            clearInterval(setProgress); //Timer löschen mask.style.display = 'block';
            stopAnimation(); //Animation stoppen}
    }, 100);
}
//Animation starten Funktion startAnimation() {
    //Definieren Sie zwei Arrays zum Speichern von Bildern var imgArr = ['./images/h0.png', './images/h1.png', './images/h2.png',
        './images/h3.png', './images/h4.png', './images/h5.png', './images/h6.png',
        './images/h7.png', './images/h8.png', './images/h9.png'
    ];
    var imgArr2 = ['./images/x0.png', './images/x1.png', './images/x2.png',
        './images/x3.png', './images/x4.png', './images/x5.png', './images/x6.png',
        './images/x7.png', './images/x8.png', './images/x9.png'
    ];
    // Definiere ein Array um alle möglichen Positionen zu speichern var arrPos = [{
        links: "98px",
        oben: "115px"
    }, {
        links: "17px",
        oben: "160px"
    }, {
        links: "15px",
        oben: „220px“
    }, {
        links: "30px",
        oben: "293px"
    }, {
        links: "122px",
        oben: "273px"
    }, {
        links: "207px",
        oben: „295px“
    }, {
        links: "200px",
        oben: "211px"
    }, {
        links: "187px",
        oben: "141px"
    }, {
        links: "100px",
        oben: "185px"
    }];
    // Ein Bild erstellen var imgs = document.createElement('img');
    imgs.setAttribute('Klasse', 'wolfImages');
    //Die zufällige Position des Bildes var posIndex = Math.round(Math.random() * 8);
    //Bildanzeigeposition festlegen imgs.style.position = 'absolute';
    imgs.style.left = arrPos[posIndex].left;
    imgs.style.top = arrPos[posIndex].top;
    // konsole.log(bild.style.left);
    // Array-Typ zufällig abrufen var imgType = Math.round(Math.random()) == 0 ? imgArr : imgArr2;
    // Den Inhalt des Bildes so einstellen, dass er auf das 0. bis 5. Fenster beschränkt wird.index = 0;
    Fenster.indexEnde = 5;
    Timer = Intervall festlegen(() => {
        wenn (Index > IndexEnde) {
            imgs.entfernen();
            Intervall löschen(Timer);
            : Starten Sie die Animation.
        }
        imgs.setAttribute('src', imgType[index]);
        Index++;
    }, 400);
    //Bilder hinzufügencontainer.appendChild(imgs);
    //ErgebnisscoreEverySum(imgs);

}
// Punktestatistik Funktion scoreEverySum(e) {
    e.onclick = Funktion() {
        // Den Inhalt des Bildes so einstellen, dass er auf das 5. bis 9. Fenster beschränkt wird.index = 5;
        Fenster.indexEnde = 9;
        // Pfad des aktuell angeklickten Bildes abrufen var src = this.getAttribute('src');
        // Beurteilen Sie anhand der Bildadresse // Erhöhen oder verringern Sie die Punktzahl basierend auf der Art des angeklickten Bildes if (src.indexOf("h") >= 0) {
            Punktzahl.innerHTML = parseInt(Punktzahl.innerHTML) + 10;
        } anders {
            Punktzahl.innerHTML = parseInt(Punktzahl.innerHTML) - 10;
        }
        e.onclick = null
    }
}
//Animation stoppen Funktion stopAnimation() {
    var img = document.querySelector('.wolfImages');
    konsole.log(img);
    img.entfernen();
    Intervall löschen(Timer);
}