A clone of Flappy Bird written in CSS

CSS Bird

この記事について

これは NSEG Advent Calendar 2015 の 2 日目の記事です。

NSEG とは

NSEG は長野県とコンピューターをテーマにした勉強会で、月1回のペースで開催されています。

勉強会の内容や形式は固定されておらず、フリーテーマの発表会、講師を招いての講演会やハンズオンセミナーなど、様々な形で開催されています。また NSEG 単独での開催だけでなく、他の団体と合同で開催している回も数多くあります。

そんな中、少し前の話になりますが、第17回勉強会ではMozilla勉強会との合同という形で開催され、私はその際に CSS プログラミングについての発表をしたことがあります。この記事ではそれにちなんで、CSS プログラミングとはなんぞやという話と、今回新しく書いた Flappy Bird のクローンの紹介をしたいと思います。

CSS プログラミングとは何か

一言でいうと「CSS を使ってプログラミングされているかのような表現をすること」です。

もう少し定義として厳密に考えると、「CSS を主として、LABEL 要素やFORM 要素の挙動などを利用しつつ、JavaScript を使わずにプログラミングされているかのような表現をすること」とも言えそうです。

CSS だけでプログラミングができるわけでは無いので、ここでは誤解のないように「プログラミングされているかのような表現をすること」という回りくどい言い方をしていますが、ブラウザの挙動を含めて考えると「手順にそって実行されている」結果にはなるので、広義的にはおそらく「プログラミング」という表現で差し支え無いと思います。

CSS プログラミングを学ぶということ

CSS プログラミングはともすると「CSS の仕様を使ってトリッキーなことをやっている」だけのように受け取られてしまうかもしれないのですが、実のところ、「プログラミングされているかのような表現」を支えている部分には論理的な構造があり、まさにプログラミングといった要素をもっていたりもします。

CSS プログラミングの基本的な構成要素は、

となっていて、「DOM の状態 (チェックボックスの状態や、マウスのホバーの状態) に対して、CSS で見た目を定義する」という形で表現されています。

CSS は if などの条件判定を記述することはできないですし、CSS 内で状態を持つこともできません。つまりできることは、「DOM の状態に対して、見た目を宣言的に記述すること」のみとなります。

また CSS 内で状態を持つことができないため、マウスのクリックやマウスの移動によって引き起こされた「DOMの状態の変化」に対して、「反応的に結果が変化する」ということになります。

つまりプログラミングのパラダイムとしては、

宣言的
リアクティブ

といった要素を持っていると言えます。

そのように考えると一般的なプログラマとしても、ある種のエクササイズとして、「1年に1つ新しい言語を覚える」といった候補に入れてみても(1年かけられるかどうは別にして)よいのではないかと、思わなくもないことろです。

CSS Bird について

Flappy Bird のクローンである今回の CSS Bird は Advent Calendar Driven Development で書いた作品ではあるのですが、実はそれなりに新規性のあるものでもあります。

このゲームでは、:hover 擬似クラスを使って当たり判定を行っていて、タップでジャンプする毎に当たり判定の領域を移動させるということをやっています。したがってここで、2回目以降のジャンプでは、前回のジャンプの状態をストップ(保存)して次のジャンプをさせる必要があるのですが、「前回のジャンプの状態」は (ほとんど) 連続的な値なのでチェックボックスなどで保存することができないという問題がありました。

この問題を解決するために、今回は「animation-play-state を paused にすることで、クリックした時点の縦軸の状態を保存する」という方法を採用しました。より具体的には、ジャンプ時に移動させるレイヤーを入れ子にして、ジャンプ毎に奥から手前に状態を保存しつつ一枚ずつずらして行くという形で、今回の連続ジャンプの機能を実現しています。

「入れ子の DOM 構造と animation-play-state による状態の保存」によって横スクロールアクションゲームを実現するというのは、(私の観測範囲では)これまでになかった新しい作品のパターンだと思います。

まとめ

(それだけではないにしても) CSS プログラミングがトリッキーであることは否めないので、おそらく説明だけでは何をやっているか伝わりづらいと思います。もし興味をもってもらえたらソースを覗いてみるなどして、理解を深めてもらえれば嬉しいです。

またこの記事では触れませんでしたが、CSS プログラミングをするにあたっての基本的なテクニックなどもあるので、それについては別の記事で紹介できればと思っています。

その他の作品

以下の2点が、私が第17回勉強会の当時に作成した作品です。

blog.taaas.jp