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度目)です。大丈夫なのでしょうか。