Jitter Click Game programmieren

  • Hallo ihr Lieben,


    ich habe jahre lang html-seminar.de sehr erfolgreich verwendet und bin wirklich sehr dankbar, für die Inhalte die hier geteilt werden. Jetzt leider gibt es ein Problem, mit dem ich nicht weiter komme, weil meine Programmierkentnisse nicht ausreichen.


    Ziel der ganzen Sache soll ein Spiel sein, das eigentlich ganz Simple zu sein scheint, ich aber wirklich dran verzweifle.


    Zum Spiel:

    Ein kleiner roter Kreis der auf der Seite seine position wechselt, wenn man diesen klickt. Soll der Timer maximal 10sec sein und in dieser Zeit sollen die Klicks auf den Kreis gezählt werden. Nachdem die Zeit abgelaufen ist, soll eine art Alert auftauchen, auf dem der Highscore zu sehen ist und der Spieler die Möglichkeit hat von neu zu starten. Bevor das spielt anfängt, soll noch ein Alert auftauchen mit ner Info wie "Bereit?"

    Ich hänge schon seit ner Woche dran, aber heute Nacht ist leider die Abgabe.. Ich wende mich wirklich nur an euch wegen dem Zeitdruck und den fehlenden Kenntnissen..

    Ich habe mich schon versucht, aber leider komme ich nicht zum gewünschten Ergebnis.

  • meinst du so https://jsfiddle.net/basti1012/wzax74ca/5/


    ich sehe gerade das ist noch verbesserungs würdig . aber das solltest du hin bekommen ,du siehst ja jetzt das prinzip wiees klappen könnte.


    warum machs du eigentlich so viele <script></script> tags ? ich meine 1 er würde auch reichen ,finde ich zumindest übersichtlicher


    INFO onClick schreibt mein klein ,du hattest da ein grosses "C" drinne ,das konnte auch nicht funktionieren

    var timer = setTimeout('countDown('+secs+',"status")',1000); den "status" kannst du auch weg lassen meiner meinung nach

    countDown(10,"status"); hier genau so "status" weg damit .



    Code
    1. <div id="zaehler" onclick="clickME"><b>Klicks:</b></div>
    2. <div id="clicker" onClick="clickME()"></div>

    und einmal onlick="clickME() mit und ohne klammern . das geht mit den gleichen namen glaube ich garnicht gut . aberdazu können andere mehr sagen ob das so erlaubt ist.


    aber dein zähler brauch ja jetzt kein onclick , und dein clicker auch nicht ,zumindest so wie ich es gemacht habe

  • Hey,


    ich habe mal versucht das Spiel zu programmieren.


    Jedoch scheitere ich an einer Sache. Nämlich wie ich die Sekunde bekomme.


    Ich habe mir das Spiel so gedacht:

    Ein Kreis zum klicken. Bei jedem klick wird die value erhöht. Für das Klicken hat der User 10 Sekunden Zeit. Nach den 10 Sekunden darf er nicht mer klicken und es wird angezeigt wie hoch der Score war und ob er nochmal spielen will oder nicht.


    Die Zeit lasse ich über einen Interval als p-tag mit value ausgeben. Nun versuche ich an die value der p-tage zu kommen um zu überprüfen ob die Zeit schon abgelaufen ist oder nicht. Aber daran haperts irgendwie.


    Hat denn jemand Ideen? Vorschläge? Würde mich aufjedenfall freuen.


    Mein Code:


    Stef

  • Hey,


    ja ich hatte gestern nicht so viel Zeit um den ganzen Beitrag durchzulesen.

    Bei mir funktioniert es jetzt auch.


    Eines verstehe ich nicht. Nämlich die Berechnung der Scores. Denn manchmal bekomme ich nach dem 1sten klick schon ein Score von 21 und manchmal auch nur 3 oder 1. Warum ist das denn so?


    Meine Version des Spieles:

  • sogeht es .. aber frag mich nicht warum der eventlistener solche fehler macht ,das weiss ich nicht vieleichtkann das wer anders erklären.


    du hast aber auch functions namenids die gleichennamen haben . ist auch nicjt gerade praktisch

  • Beim nochmaligen durchgehen des Codes ist mir dies ebenso aufgefallen. Die funktion startGame wird bei 10 Sekunden, 10 mal gestartet, habe ich den anschein. Und dann gibt es ja die function add() auch 10 mal und somit wird anstatt + 1 immer + 10 genommen.


    Aber nun wo die function add() außerhalb der startGame Function ist, gibt es diese Funktion nur 1 mal. Und der Eventlistener wird nur 1 mal intialisiert. Meiner Meinung nach.


    Stimmt das so?

  • Versuch macht kluch - ich habe es getestet und Du hast Recht: Definiert man die Funktion add() außerhalb, funktioniert es richtig. Das hatte ich zunächst nicht erwartet, sondern dass die Funktion mehrfach registriert wird, egal ob sie innerhalb oder außerhalb von startGame() liegt. Offenbar ist es jedoch so, dass die selbe Funktion nicht mehrfach registriert wird, auch wenn addEventListener() mehrfach aufgerufen wird.

  • Der Grund ist, dass dieses:

    Code
    1. circle.onclick=add

    den Listener überschreibt, während addEventListener(), wie der Name sagt, hinzu fügt.

    In jedem Fall ist es IMO sauberer und klarer, wenn man ihn nur einmal bei Laden der Seite hinzu fügt, denn das Kreiselement bleibt ja unverändert im Spielverlauf.

  • Danke für die Info. Dann habe ich es soweit gut verstanden. Mein erstes kleine Javascript Game :D


    Eine Frage habe ich noch zu folgenden Funktionen:


    Da habe ich die variable clicks global erstellt, weil ich nicht wusste, bzw. weiß wie ich es ohne globale variable machen soll. Hast du denn Ratschläge bzw. ein Beispiel wo du es zeigen kannst. Ich habe sehr lange nachgedacht wie man das mit normalen Variablen erstellt aber ich kam nie darauf. Wäre dir sehr dankbar.

  • aber so sollte es gehen .



    du gibst es einfach in der function weiter


    Code
    1. blabla(clicks)
    2. function blabla(clicks){
    3. alert(clicks;
    4. }



    ich hoffe du meinst das so

  • Wie man globale Variablen vermeidet, wird z. B. hier beschrieben:

    https://stackoverflow.com/ques…l-variables-in-javascript

    Eine Möglichkeit, die ich selber gern anwende ist, die Werte in data-Attributen zu speichern, z. B. so bei den Clicks:

    Code
    1. //clicks = 0;
    2. document.getElementById("score").innerHTML = 0;
    3. document.getElementById("score").setAttribute("data-clicks", 0);
    4. document.getElementById("endscore").innerHTML = 0;
    5. // und im weiteren Verlauf:
    6. document.getElementById("score").setAttribute("data-clicks", parseInt(document.getElementById("score").getAttribute("data-clicks")) + 1);

    Hier bietet es sich sofort an, das Element #score nur einmal zu ermitteln, aber dann muss man Obacht geben, dass man nicht wieder eine globale Variabel erzeugt.