Skip to content
Krankikom Logo Krankikom Logo

Game Development

Creative

Level 1 : Basics

Section titled “Level 1 : Basics”
  • Erstelle eine Seite mit einem Button „Cookie” und einer ZĂ€hleranzeige.
  • Jedes Klick-Event erhöht den ZĂ€hler um 1.

Schaue dir hierfĂŒr document.getElementById, document.querySelector und addEventListener an

Level 2 : Upgrades einbauen

Section titled “Level 2 : Upgrades einbauen”
  • FĂŒge einen „Upgrade”-Button hinzu, der z. B. 10 Cookies kostet und pro Klick +2 statt +1 gibt.
  • Zeige Kosten dynamisch an, deaktiviere den Button, wenn der Spieler nicht genug Cookies hat.

Schaue dir hierfĂŒr if/else-Bedingungen und innerText oder textContentan

Level 3 : Cookies pro Sekunde

Section titled “Level 3 : Cookies pro Sekunde”

Das Ziel in diesem Level ist, dass das Spiel auch ohne den Spieler weitergeht

Section titled “Das Ziel in diesem Level ist, dass das Spiel auch ohne den Spieler weitergeht”
  • Baue ein Autoclicker Upgrade Button, der alle X Sekunden Cookies hinzufĂŒgt. Dieses Upgrade musst natĂŒrlich etwas teurer sein.
  • Jedes Mal wenn der Spieler genug Cookies hat kann er/sie den Button drĂŒcken und bekommt dann pro Sekunde automatisch mehr Cookies
  • Das Upgrade muss nach jedem Kauf teurer werden. Überlege dir eine Formel mit der, das Upgrade immer teurer wird.

Zum Beispiel:

cost = baseCost * Math.pow(multiplier, level)

Schaue dir hierfĂŒr das Math-Modul von Javascript, setInterval und clearInterval an

Level 4 : Achievements

Section titled “Level 4 : Achievements”
  • Baue Achievements ein die angezeigt werden, wenn der Spieler sie freigeschaltet hat.

Beispiele fĂŒr Achievements

Section titled “Beispiele fĂŒr Achievements”
  • 100 Clicks
  • 10 Upgrades gekauft
  • 10000 Cookies
  • Überleg dir gerne weitere Achievements

Schaue dir hierfĂŒr Arrays, Objekte und Zustand-Check-Funktionen an

Level 5 : BenutzeroberflÀche

Section titled “Level 5 : BenutzeroberflĂ€che”
  • Baue eine CSS-Animation ein, die abgespielt wird bei jedem Click
  • Sound-Effekte
  • Design das Spiel so wie es dir gefĂ€llt

Schaue dir hierfĂŒr einfaches (!) CSS an

Level 6 : Easter Eggs und weitere Mini-Features

Section titled “Level 6 : Easter Eggs und weitere Mini-Features”
  • Kleine Zufalls-Events: z. B. zĂ€htl jeder Click doppelt fĂŒr 10 Sekunden
  • Nach X Clicks blinkt der Hintergrund oder ein verstecktes Mini-Spiel öffnet sich

Schaue dir hierfĂŒr Math.random() an

Level 7 : Speichern

Section titled “Level 7 : Speichern”
  • Speichere Highscore, Klickzahl, gekaufte Upgrades und Achievements im localStorage.
  • Lade den State beim Start und passe die BenutzeroberflĂ€che an. Zeig dem Nutzer an welche Upgrades schon gekauft wurden

Schaue dir hierfĂŒr JSON, localStorageund Serialiserungan