CSS-Sweeper — когда CSS становится языком программирования

Помните те времена, когда CSS считался исключительно языком стилей? Проект CSS-Sweeper от PropJockey ломает этот стереотип, демонстрируя, что на чистом CSS можно реализовать логическую игру с состоянием. Да-да, это полноценный «Сапер» без JavaScript!

Как это работает?

В основе проекта лежит хитроумная техника под названием Space Toggle. Суть в том, что CSS-переменные могут содержать либо пробел (;), либо значение initial. Это позволяет создавать логические конструкции прямо в таблицах стилей.

Основные принципы Space Toggle:

Если переменная содержит пробел (--var: ;), она считается «истинной»
Если переменная содержит initial (--var: initial;), она «ложная»
Комбинируя такие переменные, можно реализовать AND/OR логику

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

Особенности игры

Полноценный геймплей — флажки, подсчет мин, обнаружение пустых клеток
16 уровней сложности — каждый с уникальным расположением мин
Адаптированные правила победы — нужно отметить все мины, не ошибившись

Демонстрация игры

Технические детали

Автор использовал чекбоксы для управления состоянием клеток. При клике чекбокс меняет CSS-переменные, которые, в свою очередь, влияют на отображение игрового поля. Генерация мин происходит через JavaScript на этапе сборки, но сама игра работает без него.

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

Зачем это нужно разработчикам?

Изучение возможностей CSS — проект показывает, на что способны современные CSS-технологии
Альтернативный подход к состоянию — полезно для простых интерактивных элементов
Вдохновение для экспериментов — кто знает, что еще можно реализовать на чистом CSS?

Ограничения

Как признает сам автор, игра может тормозить на слабых устройствах — CSS не оптимизирован для таких вычислений. Также упрощены правила победы из-за невозможности реализовать рекурсивное открытие клеток без JavaScript.

CSS-Sweeper — это не просто технический демо-проект, а настоящий вызов традиционному разделению на «логику» и «стили». Попробуйте сыграть и убедитесь сами, что CSS может быть удивительно мощным инструментом!

Для тех, кто хочет глубже разобраться в Space Toggle, автор рекомендует свои другие проекты и твиты с объяснениями.