ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」

Roulette.js

Roulette.jsは、画像をルーレット(スロット)のように回転させることができるjQueryプラグインです。

画像を数字に変更すれば、ビンゴっぽいのも作れるかも。

みてもらうのが一番早いと思うので、サンプルをご覧ください。

→ ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」サンプル


シンプルでおしゃれな感じなので[START]で回転し始めます。[STOP]で少しずつスピードが落ちながら、回転が止まります。

ググっても日本語の解説がなかったので、ちょっと気合いれて使い方を解説しますね。



使い方

こちらのサイトをご覧ください。公式のデモページになってます。回転スピードを調節したり、止まった時にでる画像を指定したりと、いろいろ試すことができます。

http://demo.st-marron.info/roulette/sample/demo.html

まずこちらのGitHubサイトからRoulette.jsのファイル一式ダウンロードします。デモを含んだZIPファイルを利用するとわかりやすいと思います。

<head>部分に使用するcsstを指定します。



<body>部分に、使用する画像とボタンを以下のように記述します。


あとは</body>の直前あたりに、jQueryを読み込ませて、初期設定の記述をします。


上のソースの設定の説明をします。
● speed : 10 ・・・ 回転スピードです。
● duration : 5 ・・・ およそ5秒間[STOP]を押さないと、自然に回転が止まります。
● stopImageNumber : 0 ・・・ 0番目の画像を必ずストップさせます。
 ※ stopImageNumberを記述しないと、用意した画像のなかからランダムにストップします。
● maxPlayCount ・・・ 何回プレイできるかです。1以上の整数。

当たり外れ判定や得点など追加したら、ルーレットゲームっぽくなるかと思います。いろいろ試してみてくださいね。

最後にサンプルのソースを記述しておきます。どうぞご参考まで。

この記事と関連してると思われる記事:


7 Comments

  1. こんにちは!
    いつも参考サイトとして勉強、参考にさせていただいています!
    Roulette.jsについてご質問です

    サンプルを使って見たり、
    したのですが、うまく行かなくて。

    また、ZIPファイルをDLすれば動くのですが、
    スピードなどいじろうとすると、途端に動かなくなります。
    (動いたまま止まらないなど。。)

    サイトに乗っているサンプルをそのまま使用した場合は、
    画像が消えている状態です。

    アドバイスお願いします!

    • pannyatto

      2018/07/17 at 10:55 AM

      MONOさん、コメントありがとうございます。返事が遅くなってすみません。

      公式からダウンロードできるデモのファイルは、パラメータ調整などが足されてたりするので、そのままだとちょっとわかりにくいかもしれません。

      サイトで利用しているデモを一式お送りいたしましょうか?少しはわかりやすいかもしれません。コメント時に入力していただいたメールアドレス宛にお送りしてもよろしいでしょうか?

      お返事お待ちしております!

      • pannyattoさま

        ご返信ありがとうございます!
        すみません、バタバタしておりしばらく制作から遠のいておりました;;
        デモいただけるとのこと大変ありがたいです!
        お時間あるときでも構いませんので、ご参考にさせていただきたいです!
        よろしくお願いします^^

        • pannyatto

          2018/09/02 at 10:32 PM

          MONOさま

          先ほどメールいたしました。
          参考になりましたら、幸いです!

  2. とても参考にさせていただいております。
    DLしていじったところ、しばらく止まらなかったりなんどやっても同じ画像になってしまったりと・・・差し支えなければ私もデモをお送りいただけないかと思います。

    初歩的なことかもしれませんが、画像を増やしても同様に作動しますでしょうか?

    どうぞ宜しくお願い致します。

    • pannyatto

      2018/09/02 at 10:29 PM

      SNさま

      コメントありがとうございます。
      先ほどメールでデモ用のファイルを共有いたしました。
      参考になりましたら、幸いです。

      ご質問の件ですが、画像を増やしても減らしても同様に作動します。

      • データ確認いたしました。早速ご対応いただきありがとうございます。今後とも参考にさせていただきます。

コメントを残す

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