Game: Reaktionsmesser

Stef · 23. Februar 2020

Hey zusammen,

ich befasse mich gerade mit JavaScript und habe einen Reaktionsmesser programmiert inklusive Scoreliste, Spiel starten mit neuem Namen und erneut spielen.

Das Spiel funktioniert soweit auch. Das Problem was ich habe ist, dass ich in einer Funktion einen EventListener habe der nach dem ersten Spiel mehrfach neu erzeugt wird. Dieses Problem hatte ich schonmal. Damals habe ich die Eventlistener dann außerhalb des Click Events platziert damit sie nicht mehrfach generiert werden. Jetzt ist es so, dass dieser Eventlistener jedoch nicht außerhalb platziert werden kann weil sonst das Spiel nicht mehr funktioniert.

Es geht um den Eventlistener in dem die Scores in die Arrays eingefügt werden und ausgegeben werden. Im Anhang ist ein Bild der die Scoresliste nach dem 2ten Spieldurchlauf zeigt.

Ich habe schon echt viel getestet und weiß nicht weiter...

Habt ihr Tipps? Ratschläge?

Hier ist der JS Code:

JavaScript

"use strict";

window.addEventListener("load", function(){

    let formularSection = document.getElementById("formularBereich");
    let formular = document.getElementById("gameFormular");
    let playForm = document.getElementById("playForm");
    let buttonsAfterGame = document.getElementById("buttonsAfterGame");

    let playerNameField = document.getElementById("spielername");
    let ergebnisSection = document.getElementById("ergebnis");

    let startGameButton = document.getElementById("startGame");
    let startGameAgain = document.getElementById("startGameAgain");
    let startGameWithNewName = document.getElementById("startGameWithNewName");
    
    let error = document.getElementById("fehler");
    
    let player;
    let isPlayed = false;
    let playerList = [];
    let playerTime = [];
    let randomSeconds = Math.random() * 5000;
    let gameSection = document.getElementById("clickBereich");
    
    gameSection.style.display = "none";
    buttonsAfterGame.style.display = "none";
    

    // 1. Spieleformular auswerten
    let startGame = function(event){
        event.preventDefault();

        if(!isPlayed){

            player = playerNameField.value;

            if(player !== ""){

                if(error.innerText !== ""){
                    error.innerText = "";
                }
    
                formular.reset();
                formularSection.style.display = "none";
                gameSection.style.display = "block";
    
                setTimeout(playGame, randomSeconds);
            } else{
                error.innerText = "Bitte trage deinen Namen ein!";
            } 

        }else{
            formularSection.style.display = "none";
            gameSection.style.display = "block";

            setTimeout(playGame, randomSeconds);
        }
    };

    let playGame = function(){
        
        let start = Date.now(); 
        gameSection.style.backgroundColor = "blue";

        gameSection.addEventListener("click", function(){
            let end = Date.now();
            let neededTime = (end - start) / 1000;
            
            if(neededTime < 1){
                ergebnisSection.innerText = "Super Reaktion! Du hast " + neededTime + " Sekunden benötigt";
            } else if(neededTime > 1 && neededTime < 3){
                ergebnisSection.innerText = "Gute Reaktion! Du hast " + neededTime + " Sekunden benötigt";
            } else{
                ergebnisSection.innerText = "Deine Reaktion war okay! Du hast " + neededTime + " Sekunden benötigt";
            }

            isPlayed = true;
            getPlayerScores(neededTime);
            showPlayersScores();
            setTimeout(showButtonsAfterGame, 4000);
            
            

        }, false);
    };

    let showButtonsAfterGame = function(){
        ergebnisSection.innerText = "";
        gameSection.style.display = "none";
        gameSection.style.backgroundColor = "white";

        formularSection.style.display = "block";
        playForm.style.display = "none";
        buttonsAfterGame.style.display = "block";
    };

    let showTheGameFormular = function(event){
        event.preventDefault();

        isPlayed = false;

        playForm.style.display = "block";
        buttonsAfterGame.style.display = "none";
    }

    let getPlayerScores = function(neededTime){
        playerList.push(player);
        playerTime.push(neededTime);
    };

    let showPlayersScores = function(){
        let tBody = document.getElementById("body");
        
        for(let playerName of playerList){
            for(let time of playerTime ){
                let tr = document.createElement("tr");

                let td1 = document.createElement("td");
                let td2 = document.createElement("td");

                td1.innerHTML = playerName;
                td2.innerHTML = time;

                tr.appendChild(td1);
                tr.appendChild(td2);

                tBody.appendChild(tr);
            }
        }
    };

    startGameButton.addEventListener("click", startGame);
    startGameAgain.addEventListener("click", startGame);
    startGameWithNewName.addEventListener("click", showTheGameFormular);
});

Alles anzeigen

Sempervivum · 23. Februar 2020

Ich nehme an, der fragliche Listener ist der auf gamesSection in playGame. Warum kannst Du den denn nicht außerhalb der Funktion registrieren? Dieses gameSection scheint doch vollkommen statisch zu sein, weil die Variable ganz am Anfang außerhalb von allen Funktionen definiert wird.

Das mehrfache Registrieren könnte man durch eine Statuskennung unterbinden, aber ich würde zunächst eine andere Lösung suchen.

Edit: Vermutung: Die Variable start ist das Problem, weil sie lokal in playGame definiert ist und nicht verfügbar, wenn der Listener außerhalb definiert wird.

BTW: Wenn ich das richtig überblicke, kannst Du die meisten deiner let durch const ersetzen.

basti1012 · 24. Februar 2020

Ich habe das auch mal versucht.

Mit Schwierigkeitsgrad

https://basti1012.bplaced.net/…rdner=html-seminar&id=423

Stef · 24. Februar 2020

Hey,

Sempervivum :

Das Spiel wird mit der Anonymen Funktion playGame ausgeführt. Zuerst muss in dieser Funktion der Startzeitpunkt festgelegt werden wenn der background des Divs die Farbe ändert. Dann wird das Clickevent beim Klick auf das Div ausgelöst. In diesem wird dann der Endzeitpunkt festgelegt.

Den Startzeitpunkt kann ich ja nicht einfach außerhalb platzieren weil dieser erst gesetzt werden soll wenn der Spieler auf "Starte Spiel" geklickt hat. Sonst habe ich verfälschte Zeitwerte.

Ich möchte, dass das Div erst geklickt werden kann wenn die Farbe erscheint. Davor soll es nicht möglich sein.

Wenn ich andere Anforderungen hätte könnte ich, durch deinen Tipp, den Eventlistener auch außerhalb definieren und dann über Parameter den Startzeitpunkt übergeben. Dies strebe ich jedoch nicht an.

basti1012 :

Werde ich mir anschauen.

Stef

basti1012 · 24. Februar 2020

Jo mach das, sollte das tun was dein Code auch tut.

Habe den Cpde nochmal aufgeräumt.

Der ist durch die 5 Schwierigkeitsstufen doch etwas länger geworden.

Das ganze display none und block und die anderen style zuweisungen erzeugen eine menge Code.

Vieleicht kann man dafür auch klassen nutzen , doch ob der Code dann kürzer wird ist auch nee gute frage.

Sempervivum · 24. Februar 2020

Da gibt es mehrere Lösungsmöglichkeiten:

Zunächst mal kann man einen Eventlistener auch wieder entfernen, siehe hier:

https://wiki.selfhtml.org/wiki…arget/removeEventListener

Das setzt allerdings voraus, dass es sich nicht um eine anonyme Funktion handelt, was aber kein Problem sein dürfte.

In jQuery ist das etwas einfacher durch die Aufrufe von on() und off().

Alternativ kannst Du den Startzeitpunkt außerhalb definieren und den Listener ebenfalls außerhalb registrieren, aber den Wert für den Startzeitpunkt erst innerhalb der Funktion zuweisen. Solange Du letzteres nicht getan hast, hat die Variable den Wert null und Du kannst sie später auch wieder auf diesen Wert zurück setzen, so dass Du eine Info hast, ob der Startzeitpunkt gesetzt ist.

Persönlich würde ich das zweite Verfahren vorziehen.

Stef · 25. Februar 2020

Guten Morgen,

vielen Dank für eure Hilfe. Besonders für die 2 Empfehlungen Sempervivum !

Das Spiel läuft

Ich habe bis eben nochmal den Code umgeschrieben und dabei festgestellt, dass die mehrfache Ausgabe zum Teil auch an der Ausgabefunktion lag. Ich habe nun den Eventlistener, die Start Variable sowie ein Boolean, der überprüft ob bereits auf das Feld geklickt wurde, außerhalb platziert sowie die Ausgabefunktion umgeschrieben und die Spielerliste nach der Bestzeit sortiert.

basti1012 :

JavaScript

tbodyContent += `<tr>
                <td>${playerList[a][0]}</td>
                <td>${playerList[a][1]}</td>
                </tr>`;   
            }

Du hast den Ausgabe HTML Code in `` gesetzt und musstest dann damit auf das JS-Array zugegriffen wird ein $ vor dem JS Array setzten. Ich finde zu dieser Möglichkeit im Internet überhaupt nichts.

Kannst du mir dies bitte genauer erklären? Darüber wäre ich sehr dankbar.

Das ist der endgültig funktionierende JS Code:

JavaScript

"use strict";

window.addEventListener("load", function(){

    let formularSection = document.getElementById("formularBereich");
    let formular = document.getElementById("gameFormular");
    let playForm = document.getElementById("playForm");
    let buttonsAfterGame = document.getElementById("buttonsAfterGame");

    let playerNameField = document.getElementById("spielername");
    let ergebnisSection = document.getElementById("ergebnis");

    let startGameButton = document.getElementById("startGame");
    let startGameAgain = document.getElementById("startGameAgain");
    let startGameWithNewName = document.getElementById("startGameWithNewName");
    
    let error = document.getElementById("fehler");
    
    let player;
    let randomSeconds;
    let start = null;
    let end;
    let neededTime;
    let isPlayed = false;
    let playerList = [];
    
    let gameSection = document.getElementById("clickBereich");
    let eventListenerGameLogicExecuted = false;

    gameSection.style.display = "none";
    buttonsAfterGame.style.display = "none";

    let startGame = function(event){
        event.preventDefault();
        randomSeconds = Math.random() * 5000;
        if(!isPlayed){

            player = playerNameField.value;

            if(player !== ""){

                if(error.innerText !== ""){
                    error.innerText = "";
                }
    
                formular.reset();
                formularSection.style.display = "none";
                gameSection.style.display = "block";
    
                setTimeout(playGame, randomSeconds);
            } else{
                error.innerText = "Bitte trage deinen Namen ein!";
            } 

        }else{
            formularSection.style.display = "none";
            gameSection.style.display = "block";

            setTimeout(playGame, randomSeconds);
        }
    };

    let playGame = function(){

        start = Date.now(); 
        gameSection.style.backgroundColor = "blue";

        if(eventListenerGameLogicExecuted){
            gameSection.addEventListener("click", gameLogic, false);
        }
    };

    let gameLogic = function(){
    
        end = Date.now();
        neededTime = (end - start) / 1000;
        
        if(neededTime < 1){
            ergebnisSection.innerText = "Super Reaktion! Du hast " + neededTime + " Sekunden benötigt";
        } else if(neededTime > 1 && neededTime < 3){
            ergebnisSection.innerText = "Gute Reaktion! Du hast " + neededTime + " Sekunden benötigt";
        } else{
            ergebnisSection.innerText = "Deine Reaktion war okay! Du hast " + neededTime + " Sekunden benötigt";
        }

        isPlayed = true;
        getPlayerScores(neededTime);
        showPlayersScores();
        
        eventListenerGameLogicExecuted = true;
        gameSection.removeEventListener('click', gameLogic, false);

        setTimeout(showButtonsAfterGame, 4000);
    }

    let showButtonsAfterGame = function(){
        ergebnisSection.innerText = "";
        gameSection.style.display = "none";
        gameSection.style.backgroundColor = "white";

        formularSection.style.display = "block";
        playForm.style.display = "none";
        buttonsAfterGame.style.display = "block";
    };

    let showTheGameFormular = function(event){
        event.preventDefault();

        isPlayed = false;

        playForm.style.display = "block";
        buttonsAfterGame.style.display = "none";
    }

    let getPlayerScores = function(neededTime){
        playerList.push([player, neededTime]);
    };

    let showPlayersScores = function(){
        let tBody = document.getElementById("body");
        let tbodyContent = "";

        if(playerList.length > 0){
            for(let a = 0; a < playerList.length; a++){
                
            playerList.sort(function(a,b) {
                return a[1] - b[1];
            });

            tbodyContent += `<tr>
                <td>${playerList[a][0]}</td>
                <td>${playerList[a][1]}</td>
                </tr>`;   
            }
        
            tBody.innerHTML = tbodyContent;
           
        }    
    };

    gameSection.addEventListener("click", gameLogic, false);
    startGameButton.addEventListener("click", startGame);
    startGameAgain.addEventListener("click", startGame);
    startGameWithNewName.addEventListener("click", showTheGameFormular);
});

Alles anzeigen

Grüße,

Stef

basti1012 · 25. Februar 2020

Ich und erklären ?

Das lassen wir mal lieber.

Aber Googel mal nach

"String-Interpolation javascript"

"Multiline-String javascript"

und das hier vieleicht auch noch

https://developer.mozilla.org/…eference/template_strings

Stef · 26. Februar 2020

Danke basti1012

Game: Reaktionsmesser

Jetzt mitmachen!

Teilen