CSS FreeThrow – a game, noJS, only CSS and HTML

CSS Programming Advent Calendar 2012 の12日目です。

自称CSSプログラマーのげこたんじゃない方、力技に定評のある1026です(今自分で考えました)。

最近はinputでほげほげ以外の方法も増えていますが、定評のあるあくまでinput:checkedに頼った力技でCSSフリースローゲームを作りました。環境によって読み込みが遅い・重い可能性があります。いつも通り、chromeでしか確認していません。

適当な解説

メーターとボタンの連動

CSSでこのメーターの位置はとれません。そこで、横は左・中・右の3種類、縦は上・中・下の3種類のinput(ここでは其れに対応するlabel)を重ねておき、メーターの動きに合わせて重ねたinputのz-indexが入れ替わり、メーターの位置に相当するinputが一番上にきて押すことが出来るという仕組みです。この「ボタンは重ねておいて必要なのを一番上にすればばいいじゃん」という発想はno JS Loop Sliderあたりでも使いました。
inputが順番にz-indexで入れ替わる仕組みは、CSS Minesweeperのときのランダム風な動きと同じ要領です。サムの動きのanimation-durationとボタンになっているinputのanimation-durationを同じにしてやればいいわけです。

inputは高速で動くとcheckedが入らない

CSS BASEBALLの時に学びましたが、動いているinputは非常に押しにくいです。ましてやこれはコンマ何秒という速度で入れ替わっているので、そのままでは、とてもクリックを認識してくれません(checkedはJSでいうMouseUp時につきます)。そこで、CSS BASEBALLの時に教えてもらったようにactiveになると動きを止めるようにしています。止めるのがボタンだけではメーターとずれるので、勿論メーターも止めています。checkedだけでなくactive等に関してもlabelとinputが連動していて助かりました。それでもcheckedがつかないことがまれによくあります。

動作の不具合を作りの緩さを誤魔化す見た目

そんな不具合や画像を使わない作りこみのなさを誤魔化すための、安いゲーム風の見た目です。寂れたサービスエリアのキーホルダー売り場に売っているようなゲームですから、ちょっとやそっとのバグはお気になさらずに。両方のメーターが止まってもボールが飛んでいかない場合は、後から押した方のボタンをもう一度押すといいはずです。

結論:ソース見ろ

いつも思うんですが、僕のCSSプログラミングの解説はまったく解説になってませんよね。でも、inputで云々というCSSプログラミングお決まりのパターンを繰り返しているだけなので、ソース見てもらえばいいと思います。

おまけ

ちなみにsass先生に大活躍していただきましたが、画像をdateURIにしたわけでもないのexpandedでコンパイルしたら3000行を超えていて気持ちが悪くなりました。

次回予告

個人的

最低あと2回は記事書きますが、1回は今回同様の仕組みで作るアレです。twitterでネタバレしたアレです。

全体的

13日目の明日は…(あれ?また?)…げこたん(5日ぶり3度目)です。大丈夫なのでしょうか。