only CSS and HTML Baseball Game

自称流行が終わって皆忘れかけている頃に類似品を作ると定評のある1026です。こんばんは。

そんなわけで、noJS、only CSS and HTMLで野球ゲームを作りました。
http://jsdo.it/No_1026/bgpJ (jsdo.it)
10球勝負のホームラン競争。
当たればホームラン。池山やおかわり君みたいなもんです。
ちなみに私の最高は8本。9球目はテストですら一回も打てたことがありません。あれ?これ駄目じゃない?

基本的な作りはjsdo.itの閲覧数で堂々の一位を誇るCSS PANICとほぼ同じです。
隣接セレクタではなく間接セレクタでボールが飛んでいったりHOMERUNの文字が表示されたりといったイベントをどんどん後付けしていってます。あとはanimation-delayのよる時間差でゲームを流しています。STRIKEの文字はanimation-delayで予約しておきながらボールを打ったら逆に消してしまうパターンですね。

今更ですが、スコアボードの仕組みは本当に変態。

本当は、チェックボックスか何かをボール上に並べて、打った箇所で飛んでいく方向や結果が異なる、みたいな感じのものを作る予定だったんですが、試してみるとチェックボックスが小さくなりすぎるせいか滅多にチェックが入らず、発火しないために空振りしかしない糞ゲーと化したので諦めました。

animation-play-stateでpauseボタンの設置も試したのですが、止めるところまではいいものの、再開すると後ろのタイミングがずれたりでぐっちゃぐっちゃになってしまい、簡単に設置できそうではなかったのでこれも諦めました。

まぁ、そんな感じで割と妥協してしまっている作品ですが、遊んでみて下さいな。
Chromeだとカーソルが上手く切り替わらないのですが、ストライクゾーンから出し入れしてると遅くとも3~4球目くらいにはちゃんとします。この辺の原因不明。

ちなみに、素材はフリーでも何でもないのを拾ってきて弄って使ってるから著作権とか割とヤバ…おっと誰か来たようだ。

追記1この問題により正常に動作しなくなりました。

追記2:上記の問題は解決したようですが、今度は飛んでいくボールがまともに動いていません(´;ω;`)