CSS Programming Advent Calendar 2012の4日目
CSSエンジニアって肩書きもアリなんじゃないかと思っているTenderfeelです。
おいしいカレーの作り方を考えてたら無事にゲームができました。
どちらもステージは１つだけです。Chromeでしか動作確認してません。
CSS神経衰弱
制限時間内（１８０秒）に全部ペアにするとクリア。
めくる枚数の制御はないです。CSS4セレクタが使えるようになったら出来るのかもなあ…。
なので真面目にやるもよし、上から順にめくるもよしなフリーダムさになっています。
真面目にやると普通に難しいよ。
- CSS Playing Cards
トランプの絵柄の作り方って色々な人が書いてるけど、このページの手法が一番シンプル。ゲーム用にさらに要素省略したものを@mixinにして使ってます。 - CSS3 MEMORY
探したら先人が居たけどJS使ってるから(ﾟεﾟ)ｷﾆｼﾅｲ!! めくれる枚数の制御あった方がいいかなーとコレ見て思った。
CSS Numbers
数字を１から順番にクリックするだけです。
タイマーは@tsmallfieldさんが作ってたのがかっこよかったので、使わせてもらうついでに６までのkeyframesを足して「分」の表示をつけました。
仕組みについて
どちらもごく単純な間接セレクタ（ ~ ）と隣接セレクタ（＋）の乱用です。
神経衰弱は１～２４、Numbersは１～２５までの連番IDをつけたinput要素が上からずらっと並んでいます。
こうしておくと全部チェックされたかどうかというのは
#target-1:checked ~ #target-2:checked (省略) ~ #target-25:checked
っていう数珠つなぎで無理やり表現出来るわけです。
Numbersのタイマーはそのセレクタでanimation-play-state:pausedしてます。
Numbersのパネル色変えと１を押したら２を押せるように…っていう処理のあたり
これが一番狂気を感じるソースかもしれない。
元のソースはGithubに晒しときました。
どちらも配置はSassの関数でやっつけてるので、ソース落としてcompass compile –force とかすると勝手に入れ替わります。
次回予告
５日目はJun Sugimoto さんです。たのしみですね！