質問サイトに勝手に答えるシリーズ「JavaScriptでルーレットと一緒に画像を用いたアニメーションを動かしたい。」(後編)

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

何でもオリジナルが大好きな、下駄です。
 

前回行った、元ソースコードからのリファクタリングコードを元に、今回は、ルーレット(ていうか、スロットじゃね?)の画像を入れてクオリティアップさせてみたいと思います。
 

クオリティアップポイント

まず数字を画像にするというそもそものオーダーがあるので、10種類のスロット画像をフリー素材サイトから取得。
 










 

これをbase64化して、cssに埋め込んでおきます。
 

次に、ボタン箇所のbuttonタグをdivタグに変更。
これは、作業しているGoogleChromeブラウザではあまり問題なく見えていたんですが、safariブラウザで見た時に、装飾が大幅に違っていたので、どのブラウザでも共通してみることができるように、cssで一律設定できる形式に変換。
 

あと、enterキーを押して、スタート・ストップする方式を正式採用にして、keyupイベント登録を追加。
 

ソースコード

 

 

 

htmlはbodyタグ内のみの記載にしています。

プレビュー

See the Pen
Question #2 image
by YugetaKoji (@geta1972)
on CodePen.

さいごに

いかがだったでしょうか?
 

スロットの画像表示箇所は、ルーレット方式でくるくる回るアニメーションにしようと思ったんですが、思いの外大変になりそうだったので、今回は却下して、丸みを帯びた装飾を表現する程度にしておきました。
 

デバッグしているときに、どうしてもスリーセブンが出したくなって、気がついたら1時間ぐらいやり込んでしましましたが、こういう簡易なゲームをホームページに設置しておくのもいいかもしれませんね。
 

個人的には、もっとクオリティアップして、リアルなスロットを実現させたり、3×3の縦横斜めでの目が揃うようなゲーム性も有りかと考えてしまいました。
 

もっぱらなゲーマーな自分に気がついた記事になりましたね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です