CSS-Sweeper — Wanneer CSS een Programmeertaal Wordt

Herinner je je nog dat CSS puur als een opmaaktaal werd beschouwd? Het CSS-Sweeper project van PropJockey doorbreekt dit stereotype en toont aan dat je een stateful logica game kunt implementeren met pure CSS. Ja, dat is een volledig functionele Mijnenveger zonder JavaScript!

Hoe werkt het?

Het project is gebouwd op een slimme techniek genaamd Space Toggle. Het idee is dat CSS-variabelen ofwel een spatie (;) of de waarde initial kunnen bevatten. Dit stelt je in staat om logische constructies direct in stylesheets te creëren.

Kernprincipes van Space Toggle:

• Als een variabele een spatie bevat (--var: ;), wordt het als "waar" beschouwd
• Als een variabele initial bevat (--var: initial;), is het "onwaar"
• Door dergelijke variabelen te combineren, kun je AND/OR logica implementeren

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

Game features

1. Volledig gameplay — vlaggen, mijn-tellen, detectie van lege cellen
2. 16 moeilijkheidsniveaus — elk met een unieke mijn-layout
3. Aangepaste winstcondities — je moet alle mijnen markeren zonder fouten te maken

Technische details

De auteur gebruikte checkboxes om de celstatussen te controleren. Wanneer erop geklikt, veranderen de checkboxes CSS-variabelen, die op hun beurt de weergave van het speelbord beïnvloeden. Mijn-generatie gebeurt via JavaScript tijdens het bouwen, maar het spel zelf draait zonder.

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

Waarom hebben ontwikkelaars dit nodig?

1. CSS-mogelijkheden leren — het project toont wat moderne CSS-technologieën vermogen
2. Alternatieve benadering van state — nuttig voor eenvoudige interactieve elementen
3. Inspiratie voor experimenten — wie weet wat er nog meer geïmplementeerd kan worden in pure CSS?

Beperkingen

Zoals de auteur zelf erkent, kan het spel haperen op apparaten met weinig rekenkracht — CSS is niet geoptimaliseerd voor dergelijke berekeningen. De winstcondities zijn ook vereenvoudigd vanwege de onmogelijkheid om recursief cel-openen zonder JavaScript te implementeren.

CSS-Sweeper is niet zomaar een technisch demo-project, het is een echte uitdaging voor de traditionele scheiding tussen "logica" en "stijlen". Probeer zelf te spelen en ontdek dat CSS een verrassend krachtig hulpmiddel kan zijn!

Voor degenen die dieper in Space Toggle willen duiken, raadt de auteur aan om hun andere projecten en uitleg-tweets te bekijken.