CSSだけでランダムなサイコロゲーム作りました with水どう
CSS3で、ちょっとしたゲームを作ってみました。
が、検証もしてません。特にスマートフォンで見ないでください。
たぶん、超縦長です。
大体の機能が網羅されているのかなと思いますので、これから学習するコーダーさんのドリル的な何かにも使えそう。
※（素材は、きっと水どうコミュニティなら許してくれるはず。）
使った技術
HTMLとCSSのみ。
何のために作ったのか？仕事のためです。
上司から、「そんなことしてて売り上げにつながるのか？暇なのか？」と言われた後に、「なんでできないんだ？できるんだろ？」と言われそうなことだなと思いながら。
思ったこと①
firefoxのパフォーマンスがいいですね。chromeは重い、遅い。
思ったこと②
animationループは、当然マシンパワーを使い続けるので、
どっかで止めるように仕向けないといけないね。知ってる。
トリガーを無理やり作ろうとおもったんだけど、やればたぶんできる。諦めてはいない。
思ったこと③
アクセシブルにするために、JSが必要なこともあるってこと。
ゲームの回答をDOM内に記述することになり、それってゲーミフィケーション無視してるよな、って思った。
人は、パンのみで生きるのではない、と。
読み上げ系のデフォって、z-indexのanimationレンダリングするのかな。。。
思ったこと④
画像周りは、あまり興味ないんですが、data形式のがきれいに見える不思議。
思ったこと⑤
CSSやる人は、IAであり、クリエイターであり、CADエンジニアであり、物理学者でなければいけない、ということ。
あえて言えば、CSSは、taranslateZとz-indexの恩恵により、N次元になりうる。
ネタばれ。
flashっぽいのですが。
懐かしいですね。20年くらい前ですかね。
新しい（？）単位で、vw/vhがあります。これを使うと、
画面にならって作ることができるため、っぽくなります。
例えば、モーダル系のUIとか。私は極力さけますが。
なんでランダムができるの？
z-indexとanimationの組み合わせです。
厳密には、ランダムと違いますが、ユーザーの動きと組み合わせればランダムといっていいでしょう、と思います。
PCは:hoverで動きとめてます。
結果が個別に動くのですが。
ボタンは、ラジオボタンのlabelを使ってます。
そのラジオボタンは、次のセクションの表示トリガーになってます。
:checkedで表示トリガー後、必要DOMをdisplayさせてます。
動きは、animationとか、transitionとかのdelayあたりです。
IEでペラペラなのですが。
社会不適合ブラウザに時間を割く必要はございません。あなたも、私も。
気が付いたこと
その①DOM指定
animationの復帰ポイントは、該当DOMの親要素の出入りがあると、うまくいかない。
直接指定する必要がある。
その②使えなかったメソッド
matrix3d()を使えなくて、残念。
その③計算。数学。物理。
サインコサインタンジェント微分積分重力落下とかは、ちゃんとお勉強しなければ無理。片手間でできるもんではないと痛感。
calc()があるとはいえ、CSSのみで計算いけるのか、ちょっと謎。ペジェ操作できるからいけるのかなー・・・。
その④視点
動かしすぎる、というか動かすと基本的に酔う。自分は。今回は視点はずらしてないです。
その⑤角丸と影
今回挑戦しませんでしたが、３Dの角丸と影。
ネイティブな感じでつけるとなると、光源とか必要ですね。
