CSS-Sweeper — CSSがプログラミング言語になるとき

CSSはかつて純粋なスタイリング言語だと考えられていましたが、CSS-スウィーパープロジェクトがその固定観念を覆します。純粋なCSSでステートフルロジックゲームを実装できることを実証しているからです。是的、JavaScriptなしで完全に動作するマインスイーパーです！

どのように動作するのか？

このプロジェクトはSpace Toggleという巧妙なテクニックをベースにしています。CSS変数にはスペース（;）または値initialを含めることができ、スタイルシート内で直接論理構造を作成できます。

Space Toggleの基本原理：

• 変数にスペースが含まれている場合（--var: ;）、それは「true」と見なされます
• 変数にinitial（--var: initial;）が含まれている場合、それは「false」です
• このような変数を組み合わせることで、AND/ORロジックを実装できます

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

ゲームの特徴

1. 完全なゲームプレイ — フラグ、地雷のカウント、空セルの検出
2. 16段階の難易度 — それぞれ独自の地雷配置
3. 適応された勝利条件 — 間違いを犯さずにすべての地雷に印をつける必要があります

https://pub-e9ef8e20353d4db4867193b8578534d8.r2.dev/images/propjockey-css-sweeper/632ff348324c23f7.gif" alt="ゲームデモ">

技術的な詳細

著者はセル状態を制御するためにチェックボックスを使用しました。クリックされると、チェックボックスが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;`;
  }
});

なぜ開発者にとって必要なのか？

1. CSSの能力を学ぶ — このプロジェクトはモダンCSS技術が何を可能にするかを示しています
2. 状態への代替アプローチ — シンプルなインタラクティブ要素に有用
3. 実験へのインスピレーション — 純粋なCSSで他に何が実装できるか谁知道？

制限事項

著者自身が認めているように、このゲームは低性能デバイスで遅延する可能性があります—CSSはこのような計算に最適化されていません。勝利条件も簡略化されています—JavaScriptなしでは再帰的なセル開放を実装できないためです。

CSS-Sweeperは単なる技術デモプロジェクトではなく、「ロジック」と「スタイル」の間の伝統的な分離への本当の挑戦です。9">プレイして、CSSが非常に強力なツールできることを確かめてください！

Space Toggleをさらに深く知りたい人のために、著者は10">他のプロジェクトと11">説明ツイートを推奨しています。