2度あることは３度あります。CSS Programming Advent Calendar 2012の24日目、1026です。Merry Christmas!

予告どおりギャンブルの定番スロットゲームです。

前回のフリースローで学んで、回転速度を相当遅くしてみたのですがどうでしょうか？
MAXBETボタンとコイン枚数の表示は飾りです。1枚しかbetできませんし、コインは返って来ません。そんな飾りはあるのにコイン投入口はありません。

大当たり（大したことないですが一応）は777だけです。謎の小当り的なもの（パネルの表示がちょっと変わる程度）が結構あります。

いつも通りChromeのみの動作確認です。

適当な解説

基本的にはフリースローと同じ

小見出し通りです。元々、こっちを先に思いついて作っていて、後でフリースローにも使えると思って作った感じなので、コチラのほうがフリースローより地味と言えば地味です。トリ前なのにスミマセン。

ただ、フリースローが上・中・下 or 左・中・右の3種のボタンの順序切り替えなのに対し、こちらはリールの数字１つずつで10種のボタン切り替えなので面倒です。とはいえ、CSS上は似たようなことの繰り返しなのでsassで処理させてもらいました。

ボタンの切り替え速度が速いので、結構ズレます。数字が揃っていないくてもアタリになったり、揃っていてもアタリにならなかったりすることが稀によくあります。仕様です。

リールの回転はstepsで

リールの作り自体は既にコロプラさんというか@mattari_pandaさんが、『CSSアニメーションでスロット風くじを実装：後編』として良い感じに説明してくださっているので、見た目の感じなどはほぼ丸っと参考にさせていただきました。

ただし、今回はnoJSですのでリールがいい感じに滑ったりはしてくれないため、普通にアニーメーションしてしまうと中途半端な位置で数字が止まり、どの数字で止めたのかわからなくなっています。そこでanimation-timing-functionをstepsで指定することで、カクカクにはなりますが、ちゃんと数字が中央で止まるようにしています。

実際、stepsを指定したときとしていないときの差は、2日目まとりさんの『CSS Stopwatch』にて、カウントスタイルを切り替えてもらうとわかりやすいと思います。

<input type=”reset”>

ちょっとした新機軸はresetでしょうか。今まではリセットするときはリロードで誤魔化すことが多かったですが、「スロットで毎回リロードはなぁ」と考えていて思いつきました。というか、こんな単純なこと何故今まで思い浮かばなかったんでしょうか。

ただし、毎回resetで全てのinputからcheckedを外してしまっているので、コイン枚数の計算などが出来ないという少々残念なことにもなっています。

前回作る予定だったパズルは、このresetを利用して、上海を作るつもりだったのですが（選択中の牌のペアになる牌以外はresetになっていて、他の上海同様に選択中の牌の解除が容易にできるモノ）、上海は2枚一組で牌を消していくゲームであるものの同一牌自体は2枚以上あることに気づき「これでreset使ったら消した牌まで復活しちゃうじゃん…」ということでポシャりました。

電光パネル

パネルは5509さんの『電光掲示板をあのmarqueeとCSS3のグラデーションで』の色を調整したくらいです。

今回見た目に関しては、本当に色々な方を参考にさせていただきました。

SCSS

最初の方に適当なmixinが書いてあるのは、jsdo.itがcompassに対応する前に作り始めて珍しくchrome以外でも見れるようにしようと思ったのですが、面倒くさくなって途中で辞めた名残です。

最初にも書いたボタンの重なりの切り替えに関して、scssファイルで言う500行目過ぎからなんですが、keyframesも@forで処理しています。keyframesの%前に変数を使った場合、%をそのまま%と書くとエラーが出ます。今回は $per: unquote(“%”); なんかを先に作って #{$per} で出しましたが、 多分 #{‘%’} あたりでも大丈夫なんじゃないでしょうか。似たようなことをする場合、適時処理してやってください。

追記：*1% で出せるそうです。今回で言えば #{$i * 10%} みたいな形で。やだ、賢い。それとも、僕が頭悪い？

見た目

大当たり時に出る画像以外は全てCSSで表現しています。前述のとおり、色々な方を参考にさせていただきましたし、見た目が一番頑張った気がします。

次回予告

明日はいよいよ最終日、我らが（？）jsdo.itチームさんです（ まさかここ？いや、多分この辺かな？）。
まとめと言いながら、何か凄いものを作っているらしいので期待しましょう。