簡単にできることをやっても面白くはありません。一定の制限を設けることで、面白さや新しい発見を見つけられることがあります。いわゆる縛りと呼ばれるものですが、縛りによって別な解法が求められるようになり、新しい楽しみ方が生まれます。 今回紹介するCSS-Sweeperは、Webベースのマインスイーパです。そこにJavaScriptを使わないという制限を設け、CSSだけで実現しています。

CSS-Sweeperの使い方

ランダム生成はさすがに無理なので、16パターン用意されています。

ぱっと見は普通のマインスイーパですね。

失敗しました。とても悔しい、屈辱的なアラートです。

明らかに爆弾があるポイントは緑になるようです。

旗も立てられます。

CSS-Sweeperは爆弾の数が99個ある、いわゆるハードモードなゲームが16パターン用意されています。何度も諦めずに繰り返しトライすれば、最終的にクリアできるでしょう。これがCSSだけで作られているというのがすごいです。具体的にはスペーストグルというトリックを使っているそうです。

CSS-SweeperはCSS製のオープンソース・ソフトウェア（2-clause BSD lisence）です。

CSS-Sweeper - MineSweeper implemented in CSS + HTML using the Space Toggle trick (no JavaScript!) propjockey/css-sweeper: MineSweeper implemented in CSS + HTML using the Space Toggle trick (no JavaScript!)