CSS-Sweeper — Wenn CSS zur Programmiersprache wird

Erinnern Sie sich, als CSS als rein deklarative Stylesheet-Sprache galt? Das CSS-Sweeper-Projekt von PropJockey bricht mit diesem Klischee und zeigt, dass Sie einen zustandsbehafteten Logikspiel mit reinem CSS implementieren können. Ja, das ist ein vollständig funktionsfähiger Minesweeper ohne JavaScript!

Wie funktioniert das?

Das Projekt basiert auf einer cleveren Technik namens Space Toggle. Die Idee ist, dass CSS-Variablen entweder ein Leerzeichen (;) oder den Wert initial enthalten können. Dadurch lassen sich logische Konstrukte direkt in Stylesheets erstellen.

Kernprinzipien von Space Toggle:

• Enthält eine Variable ein Leerzeichen (--var: ;), gilt sie als „wahr"
• Enthält eine Variable initial (--var: initial;), gilt sie als „falsch"
• Durch die Kombination solcher Variablen können Sie AND/OR-Logik implementieren

/* Пример AND логики */
--red-if-both-true: var(--tog1) var(--tog2) red;
background: var(--red-if-both-true, blue);

Spiel-Features

1. Vollständiges Gameplay — Flaggen, Minenzählen, Erkennung leerer Zellen
2. 16 Schwierigkeitsstufen — jede mit einem einzigartigen Minen-Layout
3. Angepasste Gewinnbedingungen — Sie müssen alle Minen markieren, ohne Fehler zu machen

Technische Details

Der Autor nutzte Checkboxen zur Steuerung der Zellzustände. Bei einem Klick ändern die Checkboxen die CSS-Variablen, die wiederum die Anzeige des Spielfelds beeinflussen. Die Minengenerierung erfolgt über JavaScript zur Build-Zeit, aber das Spiel selbst läuft ohne es.

// Пример генерации уровня
var levels = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}];
levels.forEach(lvl => {
  while (Object.keys(lvl).length < 99) { 
    var y = ~~(Math.random() * 16);
    var x = ~~(Math.random() * 30);
    lvl[`bomb-${y}-${x}`] = `--bomb-${y}-${x}: ; --not-bomb-${y}-${x}: initial;`;
  }
});

Warum brauchen Entwickler das?

1. CSS-Fähigkeiten erlernen — das Projekt zeigt, wozu moderne CSS-Technologien fähig sind
2. Alternativer Ansatz für State — nützlich für einfache interaktive Elemente
3. Inspiration für Experimente — wer weiß, was sonst noch in reinem CSS implementiert werden kann?

Einschränkungen

Wie der Autor selbst anerkennt, kann das Spiel auf leistungsschwachen Geräten ruckeln — CSS ist nicht für solche Berechnungen optimiert. Die Gewinnbedingungen sind ebenfalls vereinfacht, da eine rekursive Zellenöffnung ohne JavaScript nicht möglich ist.

CSS- Sweeper ist nicht nur ein technisches Demo-Projekt, sondern eine echte Herausforderung der traditionellen Trennung zwischen „Logik" und „Styles". Probieren Sie es selbst aus und sehen Sie, dass CSS ein überraschend leistungsstarkes Werkzeug sein kann!

Für diejenigen, die tiefer in Space Toggle eintauchen möchten, empfiehlt der Autor seine anderen Projekte und Erklärungs-Tweets.