373 lines
12 KiB
JavaScript
373 lines
12 KiB
JavaScript
/* =========================================
|
|
1. KONFIGURATION & BITMASKEN
|
|
Hier definieren wir, welche Striche zu welcher Zahl gehören.
|
|
========================================= */
|
|
|
|
// Die Namen der 7 Segmente (a bis g)
|
|
const SEGMENT_NAMEN = ["a", "b", "c", "d", "e", "f", "g"];
|
|
|
|
// Ein Mapping: Welches Segment hat welchen "Bit Wert"?
|
|
// a=1, b=2, c=4, d=8 ... das sind Zweierpotenzen.
|
|
const SEGMENT_INDEX = { a:0, b:1, c:2, d:3, e:4, f:5, g:6 };
|
|
|
|
// Diese Funktion rechnet eine Liste von Segmenten (z.B. "a", "b") in eine Zahl um.
|
|
function erstelleMuster(listeVonSegmenten) {
|
|
let muster = 0;
|
|
for (const segmentBuchstabe of listeVonSegmenten) {
|
|
// 1 << X bedeutet: Schiebe die 1 um X Stellen nach links
|
|
// Das | (ODER) fügt das Bit hinzu.
|
|
muster = muster | (1 << SEGMENT_INDEX[segmentBuchstabe]);
|
|
}
|
|
return muster;
|
|
}
|
|
|
|
// Hier speichern wir das Muster für jede Ziffer von 0 bis 9
|
|
const ZIFFERN_MUSTER = [
|
|
erstelleMuster(["a","b","c","d","e","f"]), // 0
|
|
erstelleMuster(["b","c"]), // 1
|
|
erstelleMuster(["a","b","d","e","g"]), // 2
|
|
erstelleMuster(["a","b","c","d","g"]), // 3
|
|
erstelleMuster(["b","c","f","g"]), // 4
|
|
erstelleMuster(["a","c","d","f","g"]), // 5
|
|
erstelleMuster(["a","c","d","e","f","g"]), // 6
|
|
erstelleMuster(["a","b","c"]), // 7
|
|
erstelleMuster(["a","b","c","d","e","f","g"]), // 8
|
|
erstelleMuster(["a","b","c","d","f","g"]) // 9
|
|
];
|
|
|
|
// Eine Rückwärts Suche: Welches Muster gehört zu welcher Zahl?
|
|
// Wir bauen eine Map (Liste), um das schnell zu finden.
|
|
const MUSTER_ZU_ZAHL = new Map();
|
|
ZIFFERN_MUSTER.forEach((muster, zahl) => {
|
|
MUSTER_ZU_ZAHL.set(muster, zahl);
|
|
});
|
|
|
|
|
|
/* =========================================
|
|
2. HILFSFUNKTIONEN (Mathematik & Logik)
|
|
========================================= */
|
|
|
|
// Zählt, wie viele Bits in einer Zahl auf 1 stehen.
|
|
// (Also: Wie viele Streichhölzer sind an?)
|
|
function zaehleStreichhoelzer(zahl) {
|
|
let anzahl = 0;
|
|
// Solange die Zahl nicht 0 ist
|
|
while (zahl > 0) {
|
|
// Ein kleiner Trick, um das letzte Bit zu löschen und zu zählen
|
|
zahl = zahl & (zahl - 1);
|
|
anzahl++;
|
|
}
|
|
return anzahl;
|
|
}
|
|
|
|
// Gibt eine zufällige Zahl zwischen min und max zurück
|
|
function zufallsZahl(min, max) {
|
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
}
|
|
|
|
// Wählt ein zufälliges Element aus einer Liste
|
|
function wähleZufällig(liste) {
|
|
return liste[zufallsZahl(0, liste.length - 1)];
|
|
}
|
|
|
|
// Findet alle Zahlen, aus denen man 'basisZahl' machen kann, indem man Hölzer entfernt.
|
|
// Beispiel: Aus einer 8 kann man eine 0 machen (Mitte wegnehmen).
|
|
// Aber aus einer 1 kann man keine 8 machen (man müsste hinzufügen).
|
|
function findeMoeglicheUrsprungsZiffern(basisZahl) {
|
|
const basisMuster = ZIFFERN_MUSTER[basisZahl];
|
|
const moegliche = [];
|
|
|
|
for (let z = 0; z <= 9; z++) {
|
|
const vergleichsMuster = ZIFFERN_MUSTER[z];
|
|
|
|
// Wenn das vergleichsMuster ALLE Striche vom basisMuster hat:
|
|
if ((vergleichsMuster & basisMuster) === basisMuster) {
|
|
moegliche.push(z);
|
|
}
|
|
}
|
|
return moegliche;
|
|
}
|
|
|
|
|
|
|
|
|
|
let aktuellesLevel = 1;
|
|
let zielAnzahlLoeschen = 2; // Wie viele muss man löschen?
|
|
let anzahlGeloescht = 0; // Wie viele hat der Spieler schon gelöscht?
|
|
|
|
// Hier speichern wir die aktuellen Zahlen auf dem Bildschirm
|
|
let aktuelleGleichung = { A: 0, B: 0, C: 0 };
|
|
|
|
// Hier merken wir uns, welche Striche der Spieler angeklickt hat.
|
|
// Format: "Index-Segment", z.B. "0-a" (Erste Ziffer, Segment a)
|
|
let geloeschteStreichhoelzer = new Set();
|
|
|
|
|
|
|
|
const elGleichung = document.getElementById("equation");
|
|
const elGeloeschtGrid = document.getElementById("removedGrid");
|
|
const elZaehlerGeloescht = document.getElementById("removedCount");
|
|
const elStapelZaehler = document.getElementById("pileCount");
|
|
const elLevelAnzeige = document.getElementById("lvl");
|
|
const elZielAnzeige = document.getElementById("target");
|
|
const elZielText = document.getElementById("goalN");
|
|
const elWahrheitPunkt = document.getElementById("truthDot");
|
|
const elWahrheitText = document.getElementById("truthText");
|
|
const elHinweis = document.getElementById("hint");
|
|
|
|
// Buttons aktivieren
|
|
document.getElementById("btnNew").addEventListener("click", () => {
|
|
aktuellesLevel++;
|
|
starteNeuesLevel();
|
|
});
|
|
|
|
document.getElementById("btnReset").addEventListener("click", () => {
|
|
// Level neu starten (aber gleiches Level)
|
|
setzeSpielZurueck();
|
|
zeichneGleichung();
|
|
pruefeObWahr();
|
|
});
|
|
|
|
|
|
|
|
function setzeSpielZurueck() {
|
|
geloeschteStreichhoelzer.clear(); // Liste leeren
|
|
anzahlGeloescht = 0;
|
|
elGeloeschtGrid.innerHTML = ""; // Anzeige leeren
|
|
updateZaehlerAnzeige();
|
|
}
|
|
|
|
function updateZaehlerAnzeige() {
|
|
elZaehlerGeloescht.textContent = anzahlGeloescht;
|
|
elStapelZaehler.textContent = anzahlGeloescht;
|
|
}
|
|
|
|
// Berechnet, welche Zahl gerade angezeigt wird (basierend auf dem was gelöscht wurde)
|
|
function berechneAngezeigteZahl(originalZahl, positionIndex) {
|
|
let maske = ZIFFERN_MUSTER[originalZahl];
|
|
|
|
// Wir gehen alle 7 Segmente durch
|
|
for (const seg of SEGMENT_NAMEN) {
|
|
const schluessel = positionIndex + "-" + seg;
|
|
|
|
// Wenn dieses Segment gelöscht wurde...
|
|
if (geloeschteStreichhoelzer.has(schluessel)) {
|
|
// ... dann schalten wir das Bit in der Maske aus (mit & ~)
|
|
maske = maske & ~(1 << SEGMENT_INDEX[seg]);
|
|
}
|
|
}
|
|
|
|
// Schauen, ob das resultierende Muster eine gültige Zahl ist
|
|
if (MUSTER_ZU_ZAHL.has(maske)) {
|
|
return MUSTER_ZU_ZAHL.get(maske);
|
|
} else {
|
|
return null; // Keine gültige Zahl (Kaputt)
|
|
}
|
|
}
|
|
|
|
// Prüft: Ist A + B = C ?
|
|
function istGleichungWahr() {
|
|
const a = berechneAngezeigteZahl(aktuelleGleichung.A, 0);
|
|
const b = berechneAngezeigteZahl(aktuelleGleichung.B, 1);
|
|
const c = berechneAngezeigteZahl(aktuelleGleichung.C, 2);
|
|
|
|
// Wenn irgendeine Zahl ungültig ist, ist die Gleichung falsch
|
|
if (a === null || b === null || c === null) return false;
|
|
|
|
return (a + b) === c;
|
|
}
|
|
|
|
function pruefeObWahr() {
|
|
const istWahr = istGleichungWahr();
|
|
|
|
if (istWahr) {
|
|
elWahrheitPunkt.classList.add("ok");
|
|
elWahrheitText.textContent = "Gleichung ist WAHR";
|
|
} else {
|
|
elWahrheitPunkt.classList.remove("ok");
|
|
elWahrheitText.textContent = "Gleichung ist FALSCH";
|
|
}
|
|
}
|
|
|
|
|
|
// Erstellt das HTML für EINE Ziffer
|
|
function erstelleZifferHTML(zahlenWert, positionIndex, farbe) {
|
|
const zifferContainer = document.createElement("div");
|
|
zifferContainer.className = "digit";
|
|
|
|
// Welche Segmente hat die Zahl ursprünglich?
|
|
const maske = ZIFFERN_MUSTER[zahlenWert];
|
|
|
|
for (let i = 0; i < 7; i++) {
|
|
const segName = SEGMENT_NAMEN[i];
|
|
|
|
// Prüfen: Hat die Zahl dieses Segment? (Bit Test)
|
|
const hatSegment = (maske & (1 << i)) !== 0;
|
|
|
|
if (hatSegment) {
|
|
const segElement = document.createElement("div");
|
|
segElement.className = "seg " + segName;
|
|
segElement.style.background = farbe;
|
|
|
|
// Eindeutige ID für dieses Segment (z.B. "0-a")
|
|
const id = positionIndex + "-" + segName;
|
|
|
|
// Wenn schon gelöscht, Klasse hinzufügen
|
|
if (geloeschteStreichhoelzer.has(id)) {
|
|
segElement.classList.add("removed");
|
|
}
|
|
|
|
// Klick Event (Hier passiert die Action!)
|
|
segElement.addEventListener("click", () => {
|
|
// Abbruch wenn schon weg oder Limit erreicht
|
|
if (geloeschteStreichhoelzer.has(id)) return;
|
|
if (anzahlGeloescht >= zielAnzahlLoeschen) return;
|
|
|
|
// Löschen durchführen
|
|
geloeschteStreichhoelzer.add(id);
|
|
anzahlGeloescht++;
|
|
segElement.classList.add("removed");
|
|
|
|
// Kleines Streichholz in den Mülleimer animieren
|
|
const clone = document.createElement("div");
|
|
clone.className = "removedSeg";
|
|
clone.style.background = farbe;
|
|
elGeloeschtGrid.appendChild(clone);
|
|
|
|
updateZaehlerAnzeige();
|
|
pruefeObWahr();
|
|
|
|
// Gewinn Prüfung
|
|
if (anzahlGeloescht === zielAnzahlLoeschen) {
|
|
if (istGleichungWahr()) {
|
|
elHinweis.innerHTML = "<b>Gelöst!</b> Super gemacht. Klicke auf <b>Neu level</b>.";
|
|
} else {
|
|
elHinweis.innerHTML = "<b>Nicht gelöst.</b> Alle Züge verbraucht, aber Gleichung falsch. <b>Reset</b>?";
|
|
}
|
|
}
|
|
});
|
|
|
|
zifferContainer.appendChild(segElement);
|
|
}
|
|
}
|
|
return zifferContainer;
|
|
}
|
|
|
|
function zeichneGleichung() {
|
|
elGleichung.innerHTML = ""; // Alles löschen
|
|
|
|
const farben = [
|
|
"linear-gradient(180deg,#ff6b6b,#d64545)", // Rot für A
|
|
"linear-gradient(180deg,#6bcBff,#3a7bd5)", // Blau für B
|
|
"linear-gradient(180deg,#6bffb3,#1fae63)" // Grün für C
|
|
];
|
|
|
|
// Gruppe A bauen
|
|
const g1 = document.createElement("div");
|
|
g1.className = "group";
|
|
g1.appendChild(erstelleZifferHTML(aktuelleGleichung.A, 0, farben[0]));
|
|
|
|
// Plus Zeichen
|
|
const plus = document.createElement("div");
|
|
plus.className = "symbol";
|
|
plus.textContent = "+";
|
|
|
|
// Gruppe B bauen
|
|
const g2 = document.createElement("div");
|
|
g2.className = "group";
|
|
g2.appendChild(erstelleZifferHTML(aktuelleGleichung.B, 1, farben[1]));
|
|
|
|
// Ist Gleich Zeichen
|
|
const eq = document.createElement("div");
|
|
eq.className = "symbol";
|
|
eq.textContent = "=";
|
|
|
|
// Gruppe C bauen
|
|
const g3 = document.createElement("div");
|
|
g3.className = "group";
|
|
g3.appendChild(erstelleZifferHTML(aktuelleGleichung.C, 2, farben[2]));
|
|
|
|
// Alles zusammenfügen
|
|
elGleichung.appendChild(g1);
|
|
elGleichung.appendChild(plus);
|
|
elGleichung.appendChild(g2);
|
|
elGleichung.appendChild(eq);
|
|
elGleichung.appendChild(g3);
|
|
|
|
pruefeObWahr();
|
|
}
|
|
|
|
|
|
/* =========================================
|
|
7. LEVEL GENERATOR (Das Gehirn)
|
|
Hier wird ein Level gebaut, das garantiert lösbar ist.
|
|
========================================= */
|
|
|
|
function starteNeuesLevel() {
|
|
setzeSpielZurueck();
|
|
|
|
// Ziel berechnen: Level 1-2 -> 2 löschen, danach evtl mehr. Max 6.
|
|
zielAnzahlLoeschen = Math.min(2 + Math.floor(Math.log2(aktuellesLevel + 1)), 6);
|
|
|
|
let versuche = 0;
|
|
|
|
// Endlosschleife, bis wir ein passendes Level finden
|
|
while (true) {
|
|
versuche++;
|
|
// Sicherheitsnetz: Wenn es zu lange dauert, Ziel senken
|
|
if (versuche > 5000) {
|
|
zielAnzahlLoeschen = Math.max(2, zielAnzahlLoeschen - 1);
|
|
versuche = 0;
|
|
}
|
|
|
|
// 1. Wir denken uns eine KORREKTE Lösung aus (z.B. 3 + 5 = 8)
|
|
const lsgA = zufallsZahl(0, 9);
|
|
const lsgB = zufallsZahl(0, 9);
|
|
const lsgC = lsgA + lsgB;
|
|
|
|
if (lsgC > 9) continue; // Ergebnis darf nur 1 stellig sein (0-9)
|
|
|
|
// 2. Wir suchen Zahlen, die mehr Striche haben als unsere Lösung
|
|
// (Aus denen man die Lösung "schnitzen" kann)
|
|
const moeglicheA = findeMoeglicheUrsprungsZiffern(lsgA);
|
|
const moeglicheB = findeMoeglicheUrsprungsZiffern(lsgB);
|
|
const moeglicheC = findeMoeglicheUrsprungsZiffern(lsgC);
|
|
|
|
// Eine zufällige Auswahl treffen
|
|
const startA = wähleZufällig(moeglicheA);
|
|
const startB = wähleZufällig(moeglicheB);
|
|
const startC = wähleZufällig(moeglicheC);
|
|
|
|
// 3. Berechnen: Wie viele Striche müssen weg, um zur Lösung zu kommen?
|
|
// XOR (^) zeigt den Unterschied an.
|
|
const diffA = zaehleStreichhoelzer(ZIFFERN_MUSTER[startA] ^ ZIFFERN_MUSTER[lsgA]);
|
|
const diffB = zaehleStreichhoelzer(ZIFFERN_MUSTER[startB] ^ ZIFFERN_MUSTER[lsgB]);
|
|
const diffC = zaehleStreichhoelzer(ZIFFERN_MUSTER[startC] ^ ZIFFERN_MUSTER[lsgC]);
|
|
|
|
const gesamtWeg = diffA + diffB + diffC;
|
|
|
|
// Passt das zu unserem Ziel?
|
|
if (gesamtWeg !== zielAnzahlLoeschen) continue;
|
|
|
|
// 4. Wichtig: Die angezeigte Start Gleichung muss FALSCH sein.
|
|
// Sonst gibt es ja nichts zu rätseln.
|
|
if ((startA + startB) === startC) continue;
|
|
|
|
// Gefunden! Speichern.
|
|
aktuelleGleichung = { A: startA, B: startB, C: startC };
|
|
break; // Schleife beenden
|
|
}
|
|
|
|
// UI Updates
|
|
elLevelAnzeige.textContent = aktuellesLevel;
|
|
elZielAnzeige.textContent = zielAnzahlLoeschen;
|
|
elZielText.textContent = zielAnzahlLoeschen;
|
|
|
|
elHinweis.innerHTML =
|
|
`Level <b>${aktuellesLevel}</b>: Mache die Gleichung wahr, indem du <b>${zielAnzahlLoeschen}</b> Streichhölzer entfernst.`;
|
|
|
|
zeichneGleichung();
|
|
}
|
|
|
|
// Spiel starten!
|
|
starteNeuesLevel(); |