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以上の整数。

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

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

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