Event überprüfen


Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Jofre

Erfahrenes Mitglied
#1
Einen schönen Tag wünsche ich,

ich zeige eine Matrix an und warte dann auf eine Aktion des Anwenders. Der Anwender soll 4 ausgewählte Felder antippen.
Wenn er alle antippt, kann ich das ja im Rahmen des eventListeners überprüfen

Was mach ich aber wenn er nur 3 antipt weil er z. b. vergessen hat , dass er 4 antippen soll. Wie erfahre ich das überhaupt?.

GzG

Joachim
 

Sempervivum

Erfahrenes Mitglied
#3
Ich verstehe das so, dass es 4 richtige Felder sind, die entspr. markiert sind und die der Spieler innerhalb kurzer Zeit anklicken muss. In dem Fall würde ich so vorgehen: Die richtigen Felder sind markiert z. B. durch eine Klasse "marked". Jedes Mal, wenn der Spieler auf ein Feld klickt, setzt Du zusätzlich eine Klasse "clicked" und prüfst, ob er schon 4 angeklickt hat und ob sie richtig sind. Unklar ist, wie Du vorgehen willst, wenn er auf ein falsches Feld klickt. Einfach den Klick ignorieren oder am Schluss prüfen, ob keine fehlerhafte Klicks vorliegen?
Für letzteres müssten die Prüfungen so aussehen:
Code:
var correct = document.querySelectorAll('div.marked.clicked');
var wrong = document.querySelectorAll('div.clicked:not(.marked)');
if (correct.length == 4 && wrong.length == 0) {
    // der Spieler hat richtig geklickt
}
 

Jofre

Erfahrenes Mitglied
#4
Im Prinzip mache ich es so wie du es beschrieben hast. Was mache ich aber wenn er nicht 4 mal klickt sondern nach dem dritte Klick aufhört.
Das erkenne ich ja nicht.
Ich möchte in dem Fall wenn nach dem dritten Klick in 5 Sekunden kein weiterer (hier der 4. Klick) Klick erfolgt dem User eine entsprechende Meldung bringen. Aber wie erkenne ich das.

Der
canv.addEventListener('click', function(event)
steht rum und "wartet" mit mir.

Wie komme ich an die Info, dass der Nutzer seit 5 Sekunden in der Nase bohrt?
 

Sempervivum

Erfahrenes Mitglied
#5
Dazu brauchst Du die Funktion setTimeout: Timer mit 5 Sekunden aufziehen und wenn er abläuft, prüfen, ob er richtig geklickt hat. Wenn nicht, die Meldung ausgeben.
 

Jofre

Erfahrenes Mitglied
#6
Ich müsste die funktion in den eventListener einbauen. Soweit ich es verstehe. Das würde bedeuten, dass der Anwender nach jedem Klick 5 Sekunden warten muss? Der erschlägt mich. Oder sehe ich was falsch.?
 

Sempervivum

Erfahrenes Mitglied
#7
Nein, nicht in den Eventlistener. Unabhängig davon, wenn das Spiel gestartet wird. Dann wird nach Ablauf von 5 sec die Callback-Funktion aufgerufen und Du kannst darin, abhängig davon, ob der Spieler häufig genug geklickt hat, die Meldung ausgeben.
Du kannst einen Timeout auch löschen mit clearTimeout. Das müsstest Du tun, wenn der Spieler seine 4 Klicks erledigt hat.
 

Jofre

Erfahrenes Mitglied
#8
Dir fehlt noch eine Info. Es ist nicht einfach die zu klickenden Felder auf dem Bildschirm zu finden. Ein heller Kopf kann diese Felder vielleicht in 2 Sekunden finden und anklicken, ein unkonzentrierter braucht eher 3 bis 4 Sekunden. So ist ein setTimeout für den Ablauf insgesamt nicht so optimal. Besser wäre es wenn nach JEDEM Klick die Zeitabfrage startet.
 

Sempervivum

Erfahrenes Mitglied
#9
Verstehe. Dann würde ich eher vorschlagen, die Zeit zwischen den Klicks zu messen und daraus eine Art Score oder Punktestand zu ermitteln:
Zeit klein: Viele Punkte
Zeit groß: Wenig Punkte
Dazu braucht es dann keinen Timer, sondern Du brauchst nur die Zeit am Spielbeginn (Date.now()) zu merken und bei jeden Klick wieder die aktuelle Zeit zu ermitteln (ebenfalls mit Date.now()) und die Differenz zu ermitteln.
 

Jofre

Erfahrenes Mitglied
#10
Das bringt mich nicht weiter. Der Nutzer soll 4 Felder anklicken. Wenn er unkonzentriert ist und nur 3 Felder anklickt, will ich ihm eine Aufforderung schicken auch das 4. Feld noch zu clicken.

Ich kann jetzt eine Zeitmessung nach jedem Klick starten. Dann bekomme ich beim 3. Klick die Stasrtzeit für den 4. Klick. Und dann wartet und wartet das Programm. Es reagiert in zu diesem Zeitpunkt nur über den eventListener.und da passiert nichts.

Es müsste irgendwas im eventListener eingebaut werden, dass nach jedem Klick eine laufende Zeitabfrage startet und dann nach 5 Sekunden eine Meldung generiert.

Wie man das macht, dass kenn ich nicht
 

Jofre

Erfahrenes Mitglied
#12
ich habe hier ein kleines Beispiel :
Code:
<!DOCTYPE html>
<html>
<body>

<button id="myBtn">Try it</button>

<script>
  var zaehler=0;
  document.getElementById("myBtn").addEventListener("click", function(){
  zaehler++;
  console.log(" Zähler " + zaehler);
  if (zaehler==4){console.log( "Ende erreicht")};
});
</script>

</body>
</html>
Wie kann man hier mit setTimeout erreichen, dass , wenn zaehler ==3 getippt wurde und der 4. click ansteht aber nicht erfolgt, nach 5 Sekunden eine Meldung kommt, dass der 4. Click noch nicht erfolgt ist.
 

Sempervivum

Erfahrenes Mitglied
#13
In etwa so sollte es funktionieren:
Code:
    <button id="myBtn">Try it</button>

    <script>
        var zaehler = 0, timer;
        timer = setTimeout(function () {
            console.log("Zeitablauf für Klick " + (zaehler + 1));
        }, 5000);
        document.getElementById("myBtn").addEventListener("click", function () {
            zaehler++;
            console.log(" Zähler " + zaehler);
            clearTimeout(timer);
            if (zaehler < 4) {
                timer = setTimeout(function () {
                    console.log("Zeitablauf für Klick " + (zaehler + 1));
                }, 5000);
            }
            if (zaehler == 4) { console.log("Ende erreicht") };
        });
    </script>
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…