CSS、Cascading Style Sheetsはこのページに限らず様々なWebページの装飾に用いられている、スタイルシート言語です。なのでJavaScriptと組み合わせれば3D版のテトリスを実装することが出来ます。何言っているのか分からないかと思いますが、実際そうなのでそうとしか言えません。
というわけで今回はCSSを全力で活用した「CSS Blockout」についてざっくり紹介していこうかと思います。
結論
- CSSの持つ謎の表現力
- 3D版テトリス
3Dテトリス
テトリスというゲームは極めてよく知られているゲームと言えるでしょう。4つのブロックで形成されたペントミノを回転もしくは移動させ、横10マスを埋めるとそれが消えていくというゲームです。1980年代にソ連で開発された後、全世界でプレイされるようになっています。このゲームは2Dで、奥行方向は考えなくていいものです。というより奥行が追加されたら考えるべきことがあまりにも増えすぎてプレイできなくなってしまう気がしてしまうので、そうなっていた方がありがたいという面も普通にあります。
幸か不幸かそのようなものは存在しており、それが「CSS Blockout」です。これは名前の通りCSSを（少なくとも描画については）メインとして使用している3D版テトリスのようなものです。このゲームにおいては次元が一つ追加されており、WASDQE+方向キーでペントミノを操作し、一つの面を埋めるとそれが消えるようなゲーム設計となっています。ライセンスが不明瞭であるので写真は堂々と載せられないのですが、普通に難しいものだと思います。
ちなみにこのゲームはMDNの「Demos of open web technologies」、すなわちWeb技術のデモとして公開されたものです。GitHubリポジトリを見る限り2012年と若干古いものですが、それでも特に問題なく動いているので、Web技術の後方互換性の高さを感じることが出来るものだとも感じました。このデモはCSS Blockoutの他にもウェブブラウザで遊べる様々なコンテンツが掲載されているので、CSS Blockoutを楽しみきった方もしくは途中で投げ出してしまった私みたいな方は、適当に眺めてみると面白いかと思います。
関連リンク
最後に
前回の技術関係の記事: つくば駅前の本返却ロボット「ブッくん号」
私はこうしたタイプのパズルゲームが全くと言っていいほど得意ではないのもあるかもしれませんが、普通に難しいんですよねこのゲーム。技術的な側面を無視しても高難易度ゲームとして色々な人にやってほしい気持ちはあります。
