4日目 : CSS Programming Advent Calendar 2012

CSS Programming Advent Calendar 2012の4日目
CSSエンジニアって肩書きもアリなんじゃないかと思っているTenderfeelです。

おいしいカレーの作り方を考えてたら無事にゲームができました。
どちらもステージは1つだけです。Chromeでしか動作確認してません。

CSS神経衰弱

制限時間内(180秒)に全部ペアにするとクリア。
めくる枚数の制御はないです。CSS4セレクタが使えるようになったら出来るのかもなあ…。
なので真面目にやるもよし、上から順にめくるもよしなフリーダムさになっています。
真面目にやると普通に難しいよ。

  • CSS Playing Cards
    トランプの絵柄の作り方って色々な人が書いてるけど、このページの手法が一番シンプル。ゲーム用にさらに要素省略したものを@mixinにして使ってます。
  • CSS3 MEMORY
    探したら先人が居たけどJS使ってるから(゚ε゚)キニシナイ!! めくれる枚数の制御あった方がいいかなーとコレ見て思った。

CSS Numbers

数字を1から順番にクリックするだけです。
タイマーは@tsmallfieldさんが作ってたのがかっこよかったので、使わせてもらうついでに6までのkeyframesを足して「分」の表示をつけました。

仕組みについて

どちらもごく単純な間接セレクタ( ~ )と隣接セレクタ(+)の乱用です。

神経衰弱は1~24、Numbersは1~25までの連番IDをつけたinput要素が上からずらっと並んでいます。
こうしておくと全部チェックされたかどうかというのは
#target-1:checked ~ #target-2:checked (省略) ~ #target-25:checked
っていう数珠つなぎで無理やり表現出来るわけです。
Numbersのタイマーはそのセレクタでanimation-play-state:pausedしてます。

Numbersのパネル色変えと1を押したら2を押せるように…っていう処理のあたり
これが一番狂気を感じるソースかもしれない。

元のソースはGithubに晒しときました。
どちらも配置はSassの関数でやっつけてるので、ソース落としてcompass compile –force とかすると勝手に入れ替わります。

次回予告

5日目はJun Sugimoto さんです。たのしみですね!

Leave a Comment.