62 lines
2.8 KiB
Markdown
62 lines
2.8 KiB
Markdown
# Allumettes (Streichholz) Gleichungsrätsel
|
|
|
|
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
|
|
1. [Spielprinzip](#spielprinzip)
|
|
2. [Technische Funktionen](#technische-funktionen)
|
|
3. [Installation und Verwendung](#installation-und-verwendung)
|
|
4. [Dateistruktur](#dateistruktur)
|
|
5. [Logik-Details](#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.
|
|
|
|
1. Klonen Sie das Repository oder laden Sie die Quelldateien herunter.
|
|
2. Stellen Sie sicher, dass sich `index.html`, `Streichholzreatsel.css` und `Streichholzreatsel.js` im selben Ordner befinden.
|
|
3. Ö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:
|
|
|
|
```javascript
|
|
const SEG = { a:0, b:1, c:2, d:3, e:4, f:5, g:6 }; |