Javascript - Cookie-Clicker
Zuweisungsquelle : https://github.com/becodeorg/BXL-Swartz-5.34/blob/main/1.The-Field/12.Javascript/cookieClicker.md
Link zur Live-Version : https://teo-cozma.github.io/Javascript/
Teammitglieder
- Brigita Sabutyte (Javascript und HTML)
- David Tirel (Javascript)
- Teodora Cozma (HTML und CSS)
Sprachen
Werkzeuge
- Visual Studio Code (Texteditor)
- Discord, Google Meet, Github, Replit (Kommunikation)
- Adobe XD (Prototyping)
- W3C Markup Validation Service (HTML-Inspektion)
- W3C CSS Validation Service (CSS-Inspektion)
- Google Lighthouse (Leistungsprüfung)
Bild
Ressourcen
Was ist ein Cookie-Clicker?
- http://orteil.dashnet.org/cookieclicker/
- https://en.wikipedia.org/wiki/Cookie_Clicker
- https://cookie-clicker2.com/
- https://particle-clicker.web.cern.ch/
- https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s
Tutorials für unser Projekt:
https://www.flaticon.com/free-icons/cookie
https://www.youtube.com/watch?v=uUgOBe_wb6E
https://www.youtube.com/watch?v=j_nI6G3ZDiE
https://codesource.io/how-to-disable-button-in-javascript/
https://stackoverflow.com/questions/57477529/disable-a-button-if-empty-input
https://www.youtube.com/watch?v=PSEhNb69XpI
https://www.youtube.com/watch?v=vU2akkcSV-g
https://www.youtube.com/watch?v=PSEhNb69XpI
https://www.youtube.com/watch?v=KgYkgBno5Gs
https://stackoverflow.com/questions/8583524/how-to-set-time-limit
Validierungsdienste:
- https://validator.w3.org/#validate_by_input
- http://jigsaw.w3.org/css-validator/
Projektprotokoll
Tag eins (25.10.)
Überprüfung der Anweisungen
- Was: Cookie-Clicker.
- Warum: Konsolidierungsprojekt (hauptsächlich Javascript-Kenntnisse).
- Wann: Ab heute, 4 volle Tage Teamarbeit, bis 28.10.
- Wie: in Dreiergruppen, zusammenarbeiten und entsprechende Codesprachen verwenden.
- Wer: Teodora Cozma, Brigita Sabutyte, David Tirel.
- Welche Rollen? Es gibt Frontend, Backend und Projektmanagement. Alle Rollen können austauschbar sein und der Code wird trotzdem geteilt, aber insgesamt kann sich eine Person mehr auf eine bestimmte Rolle konzentrieren.
- Backend (Javascript): David.
- Backend (Javascript) + Frontend (HTML-Struktur): Brigita.
- Frontend (CSS + vielleicht Sass) + Projektmanager: Teodora.
Brainstorming
3 Abschnitte:
Cookie-Abschnitt: Header 1 für den Cookie-Zähler. H1 für die Anzahl der Klicks.
- Interaktives Cookie + sein Titel + Cookie-Zähler = 1. Abschnitt.
- „Fügen Sie im HTML eine Klickschaltfläche ein, die einen Zähler erhöht, und eine Beschriftung, die auf 0 initialisiert wird, um diesen Zähler anzuzeigen.“
Partiturbereich:
- Punktebereich: Punkteanzahl.
- 1 Cookie: Das Cookie ist eine eigene Schaltfläche.
(Cookie + Punktzahl = linke Hälfte)
- Shop-Bereich:
- Erfolge und Upgrades?
- Store-Bereich = Button-Upgrade-Clicker + Punktezähler = 2. Abschnitt:
Erstellen Sie einen Multiplikator (doppelte oder dreifache Punkte) –> diesen Schritt zur Überprüfung
Multiplikatorpreis (gekauft)
Aktualisierung der Punktzahl
Zähler innerhalb des Multiplikators
Kostensteigerung (die Kosten eines höheren Multiplikators)
- Auch ein spezielles Display (ein Knopf darunter?)
Schritt 12: Notwendiges Element, bestimmte Schaltflächen sind deaktiviert. Beispiel: Unter 20 Punkten kann der Spieler auf bestimmte Funktionen nicht zugreifen.
(Rechte Hälfte)
Beispiel (Referenz): http://orteil.dashnet.org/cookieclicker/.
Aufgaben für heute
Heute Morgen (10:30 - 12:30)
- Recherche zum Projekt (Aufgabenanleitung).
- Sehen Sie, was den aktuellen obligatorischen Schritten entspricht (Boni werden vorerst zurückgestellt).
- Schauen Sie sich den Code des ursprünglichen Cookie-Clickers genauer an.
(https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s) Beschreibung des Spiels (und seiner existenziellen Qualitäten!)
- 1 Klick = 1 Cookie.
- 15 Klicks = 15 Cookies = 1 Cursor (gekauft).
- 10 Cursor = 1 Cookie/Sek. (CpS).
- 100 Kekse = Oma, die deine Kekse produziert und vermarktet.
- Cookies sind eine Währung, die es Ihnen ermöglicht, Farmen, Minen, Fabriken usw. zu kaufen. = Cookie-Wirtschaft, die allgegenwärtig und überwältigend ist. Dies erweitert sich schließlich zu einem Cookieverse.
- Transzendenz der Existenz = Aufstieg und Neuanfang.
- Goldene Kekse erscheinen zufällig.
- Achten Sie auf die Omas: mögliche Rebellion und Apokalypse. Retten Sie alle mit wirtschaftlichem Gewinn oder nutzen Sie sie aus, um mehr Wohlstand zu schaffen.
- Kleiner „Code-Hack“ in der Konsole: Game.Earn(x).
(http://orteil.dashnet.org/cookieclicker/)
Infoprotokoll/Versionsverlauf
- Sicher sparen
- Cursor-Anzeigestil
- Import-/Exportfunktion: Abrufen eines gespeicherten Spiels aus einer alten Version (nach einer Woche deaktiviert)
- Schaltfläche „Verkaufen“.
- Zufälliger goldener Keks (wie man seine Häufigkeit bestimmt)
- Klicken Sie auf Statistiken
- Klicken steigert
- Omas Unzufriedenheit und Apokalypse – es entstanden Kreaturen, die Kekse verzehren
- Statistik-Menübereich für Upgrades und Erfolge
- Erfolge im Milchgeschmack -_-
- Optionsmenü:
- Allgemein: Speichern + automatisches Speichern, Export/Import, Wipe-Speichern;
- Einstellungen: Lautstärke, ausgefallene Grafiken, Sounds ... das sind alles Boni.
Hinter dem Code (mit dem Inspektor untersucht)
- HTML-Struktur (was wir für das Erscheinungsbild beibehalten könnten):
- Kopf: alle Links zu Stilen und Skripten (der Titel blinkt ...)
- Körper :
- Keine Bannerverpackungen
- Obere Leiste: Urheberrecht und Link zu Social Media (wie eine Fußzeile, aber oben auf der Seite). Wir müssen dieses Jahr auf jeden Fall den Urheberrechtshinweis zu unseren Namen und Links zu unseren Landingpages hinzufügen (?).
- Abteilungs-ID: „Spiel“: der eigentliche Abschnitt des Spiels.
- Die Abschnitte stehen unter dem Tag „Abschnitt“ und haben je nach Position (links, rechts, Mitte) + Trennzeichen eigene Namen.
- Anker: Sind sie ihr eigener Klassentyp? Schauen Sie nach.
- Cookie-Anker = anklickbares Cookie !!!
- Fügen wir einen fiktiven Bäckereinamen hinzu?
- Cookie-Zähler: x Cookies; pro Sekunde: s.
- Erstellen wir ein Menü mit Optionen, Statistiken, Informationen usw.?
- Außerdem ein Unterabschnitt für jeden Menüpunkt?
- (Technisches Problem: Die Seite wird ständig aktualisiert, um die Daten zu aktualisieren. Es ist schwierig, in einem Abschnitt zu bleiben und einen Blick auf den Code zu werfen, bevor er blinkt.)
- „b“-Tag: Wozu dient es?
- Einige Divs sind ausgeblendet?
- Shop-Bereich:
- Kaufen/Verkaufen: Diese sollten mit Javascript-Ereignissen verknüpft sein, da sich ihre Werte mit jedem Klick ändern.
- Produkte (Minen, Omas): Zu Beginn des Spiels sollten diese ausgeblendet/verdeckt sein. (Eine weitere interessante Referenz: https://particle-clicker.web.cern.ch/)
Heute Nachmittag (13:30 - 17:00)
- Ideen sammeln, recherchieren und Ressourcen bündeln.
- Welche technischen Schwierigkeiten/Herausforderungen könnten bevorstehen?
- Wie funktioniert der Multiplikator?
- Zeigen Sie ein Layout der Abschnitte und ihrer Schaltflächen an (obwohl dies nicht besonders besorgniserregend ist).
- Verstehen, wie man Javascript anwendet.
- Sammeln Sie Ressourcen und Informationen zum Schreiben des Codes für jede Schaltfläche.
Was ist unsere Gruppenarbeitsmethodik?
Wie arbeitet jeder von uns?
- Allein
- Forschungsorientiert
- Fokussiert auf Codierung
- Machen wir „Live-Codierungssitzungen“, bei denen wir unseren Bildschirm- und Tippcode teilen und jeder vor Ort seinen Input gibt?
Wie können wir diese Frist für uns einhalten?
Wie teilen wir die Codierungsarbeit auf? Wie legen wir folgende Aufgaben fest und delegieren sie? Wenn jeder von uns in seiner Freizeit arbeitet, wie können wir uns dann auf den endgültigen Code einigen und ihn konsolidieren?
Entscheiden, wie kommuniziert und Informationen ausgetauscht werden sollen:
- Auf Discord, Raum 4 (Chat + Anruf).
- ... (andere Kollaborationstools).
- Auf jeden Fall Github, die Repositories werden geteilt.
Entscheidung über die nächsten Schritte:
- Recherche heute beenden?
- Beginnen Sie mit der Planung (+ Schreiben?) der HTML-Struktur? Die Javascript-Struktur?
- Befolgen wir jeden Schritt buchstabengetreu?
- Es wurde beschlossen, zumindest die obligatorischen Schritte (alle Eingaben und Tasten mit den wichtigsten Funktionen) einzubeziehen, und die Boni wurden vorerst zurückgestellt (können aber, wenn möglich, einbezogen werden).
- Müssen diese Schritte nacheinander oder mehrere gleichzeitig ausgeführt werden?
- Dies ist eine wichtige Frage, die gestellt werden muss, da die Rollen geteilt sind: 2 Personen arbeiten im Backend zusammen, 2 Personen im Frontend.
- Wären diese Schritte daher in Javascript verteilt?
- Wenn es darum geht, das Projekt tatsächlich umzusetzen, wie viel nehmen wir vom Original und wie viel machen wir es zu unserem eigenen?
Tägliche Arbeitsweise:
- Am Anfang arbeitet jeder für sich, am Ende des Tages teilen wir unseren Code über Discord und „festschreiben“ dann alles auf Replit.
Vorausdenken – der Bewertungsteil
- Bewerten Sie regelmäßig den Fortschritt und stellen Sie sicher, dass die unverzichtbaren Funktionen enthalten sind.
- Aktualisieren Sie die ReadMe-Datei regelmäßig.
- Gegen Ende (am letzten Tag oder sogar während des Codierungsprozesses) verwenden Sie die Validierungs- und Leistungstools (siehe Lighthouse- und W3C-Validierungstool). vielleicht am Donnerstag.
Die Schritte dieses Nachmittags (14:30 - 16:30)
- Weitere Recherche und Festlegung der Aufgaben für morgen:
- Brigita: HTML-Recherche und Schreiben.
- David: Javascript-Recherche.
- Teodora: visuelle Forschung und Prototyping.
Tag zwei (26.10.)
Morgenbesprechung um 9:00 Uhr:
- Schritt 5 abgeschlossen.
- Code teilen.
- Technische Probleme: HTML mit Javascript verbinden, damit die Funktionen ordnungsgemäß funktionieren.
- Außerdem sind die Boni für die Spieler bestimmt, daher sind Schritt 11 und weitere obligatorisch.
- Autoclicker wird von David erstellt.
- Multiplikator von Brigita; steht ebenfalls noch aus.
- Beheben von Problemen in Skripten.
Für heute Morgen (9:30 - 12:30)
Setzen Sie die zugewiesenen Schritte fort. Untersuchen Sie eventuelle Probleme. Treffen um 13.30 Uhr, um Fortschritte zu besprechen und etwaige Probleme zu lösen.
Für heute Nachmittag (13:30 - 16:30) Teo: Machen Sie die Website responsiv. Hinweis: Die Multiplikatorschaltflächen sollten auch die Kosten enthalten! + Finden Sie das Skript, um bestimmte Schaltflächen entsprechend der Anzahl der Cookies zu deaktivieren. David: Funktionen teilen; Ladefunktion behoben. Brigita: Gemeinsamer Code und Funktionen; Syntaxprobleme behoben.
Scrum-Meeting (16:30 - 17:00)
Was wurde getan?
Welche Probleme traten auf und wurden gelöst?
- Probleme mit dem Multiplikator.
Was sind die nächsten Schritte?
Probleme :
- Herausfinden, wie man Elemente zentriert !!!!!!! (Musste mein Gedächtnis noch einmal auffrischen).
- So deaktivieren Sie eine Schaltfläche mit Javascript: Codierungsschwierigkeiten.
- Speichern und Laden funktionieren nicht mit dem Multiplikator.
- Aufgrund von Kompilierungsproblemen im Haupt-CSS kann Sass nicht weiter verwendet werden. Also zurück zum Styling mit Vanilla CSS.
Welche Probleme müssen morgen behoben werden:
- Schaltflächen „Speichern“ und „Laden“;
- Erhöhen Sie den Multiplikator (erneut) um 2.
- Schaltflächen je nach Bedingungen aktivieren/deaktivieren (Schritt 12);
- Boni: Schritt 11.
Tag drei (27.10.)
Vormittagsbesprechung (9:00)
Abendtreffen (16:45 - 17:00)
Tag vier (28.10.)
Vormittagstreffen (9:00 - 9:30)
Was heute zu tun ist:
Nachmittagsarbeit (13:30 - 16:00)
Ergebnisse =
- Leistung = 91;
- Zugänglichkeit = 95 ;
- Best Practices = 100;
- SEO = 92;
Nachbericht zum Projekt (16:20 - 17:00 Uhr und morgen, 29.10.):
- Technische Probleme verbleiben: Multiplikator. Wird morgen noch einmal überprüft.
(29/10)
