CSS-Sweeper — kiedy CSS staje się językiem programowania

Pamiętasz czasy, gdy CSS był uważany wyłącznie za język stylów? Projekt CSS-Sweeper autorstwa PropJockey burzy tę stereotypową opinię, pokazując, że można zaimplementować grę z logiką stanową używając czystego CSS. Tak, to w pełni funkcjonalny Saper bez JavaScript!

Jak to działa?

Projekt opiera się na sprytnej technice zwanej Space Toggle. Idea polega na tym, że zmienne CSS mogą zawierać albo spację (;), albo wartość initial. Pozwala to tworzyć konstrukcje logiczne bezpośrednio w arkuszach stylów.

Podstawowe zasady Space Toggle:

• Jeśli zmienna zawiera spację (--var: ;), jest traktowana jako „prawda"
• Jeśli zmienna zawiera initial (--var: initial;), jest „fałszem"
• Łącząc takie zmienne, można implementować logikę AND/OR

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

Funkcje gry

1. Pełna rozgrywka — flagi, liczenie min, wykrywanie pustych pól
2. 16 poziomów trudności — każdy z unikalnym układem min
3. Zmodyfikowane warunki wygranej — musisz oznaczyć wszystkie miny bez popełniania błędów

Szczegóły techniczne

Autor wykorzystał pola wyboru (checkboxes) do kontrolowania stanów pól. Po kliknięciu pole wyboru zmienia zmienne CSS, które z kolei wpływają na wyświetlanie planszy gry. Generowanie min odbywa się za pomocą JavaScript w czasie kompilacji, ale sama gra działa bez niego.

// Пример генерации уровня
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;`;
  }
});

Dlaczego deweloperzy tego potrzebują?

1. Poznawanie możliwości CSS — projekt pokazuje, co potrafią nowoczesne technologie CSS
2. Alternatywne podejście do stanu — przydatne dla prostych elementów interaktywnych
3. Inspiracja do eksperymentów — kto wie, co jeszcze można zaimplementować w czystym CSS?

Ograniczenia

Jak sam autor przyznaje, gra może się zacinać na słabszych urządzeniach — CSS nie jest zoptymalizowany pod kątem takich obliczeń. Warunki wygranej są również uproszczone ze względu na niemożność implementacji rekurencyjnego otwierania pól bez JavaScript.

CSS-Sweeper to nie tylko projekt demonstracyjny, to prawdziwe wyzwanie dla tradycyjnego podziału między „logiką" a „stylami". Wypróbuj grę samodzielnie i przekonaj się, że CSS może być zaskakująco potężnym narzędziem!

Dla osób chcących głębiej zgłębić Space Toggle, autor poleca swoje inne projekty oraz wyjaśniające tweety.