Ein interaktives Logikrätsel für den Webbrowser. Ziel des Spiels ist es, eine mathematisch falsche Gleichung durch das gezielte Entfernen einer exakten Anzahl von Streichhölzern zu korrigieren.

Inhaltsverzeichnis

Spielprinzip
Technische Funktionen
Installation und Verwendung
Dateistruktur
Logik-Details

Spielprinzip

Dem Spieler wird eine Gleichung aus digitalen 7-Segment-Ziffern präsentiert (z. B. 6 + 4 = 8). Diese Gleichung ist initial mathematisch falsch.

Ziel: Die Gleichung durch Korrektur der Ziffern wahr machen (A + B = C).
Aktion: Durch Klicken auf einzelne Segmente (Streichhölzer) werden diese dauerhaft entfernt.
Einschränkung: Es muss exakt die vorgegebene Anzahl an Hölzern entfernt werden. Ein Hinzufügen oder Verschieben ist nicht möglich.
Level-System: Das Spiel generiert unendlich viele Level mit dynamisch steigender Schwierigkeit.

Technische Funktionen

Prozedurale Generierung: Ein Algorithmus berechnet gültige mathematische Basissätze und transformiert sie in "Super-Digits" (Ziffern mit zusätzlichen Segmenten), um die Lösbarkeit jedes Levels zu garantieren.
7-Segment-Logik: Die Zifferndarstellung basiert auf Bitmasken, die den klassischen Mustern von Digitalanzeigen folgen.

[Image of 7-segment display logic]

Echtzeit-Validierung: Das System prüft bei jeder Interaktion, ob die verbleibenden Segmente gültige Ziffern bilden und ob die mathematische Gleichung aufgeht.
Modernes UI: Das Design nutzt CSS-Grids, Flexbox und moderne Gradienten für eine ansprechende Optik.

Installation und Verwendung

Da das Projekt auf Standard-Webtechnologien basiert, ist keine Installation oder Kompilierung erforderlich.

Klonen Sie das Repository oder laden Sie die Quelldateien herunter.
Stellen Sie sicher, dass sich index.html, Streichholzreatsel.css und Streichholzreatsel.js im selben Ordner befinden.
Öffnen Sie die Datei index.html in einem modernen Webbrowser (Chrome, Firefox, Safari oder Edge).

Dateistruktur

index.html: Das Grundgerüst der Anwendung inklusive Spielbereich und Dashboard für entfernte Hölzer.
Streichholzreatsel.css: Enthält das gesamte Styling, die Positionierung der Segmente (a-g) sowie die visuellen Zustände für entfernte Elemente.
Streichholzreatsel.js: Die Kernlogik, inklusive Zufallsgenerator, Bit-Operationen für die Segment-Prüfung und Event-Handling.

Logik-Details

Segment-Mapping

Die Identifikation der einzelnen Streichhölzer erfolgt über ein Mapping, das den Standard-Indizes für 7-Segment-Anzeigen entspricht:

const SEG = { a:0, b:1, c:2, d:3, e:4, f:5, g:6 };