Roulette.jsは、画像をルーレット（スロット）のように回転させることができるjQueryプラグインです。
画像を数字に変更すれば、ビンゴっぽいのも作れるかも。
みてもらうのが一番早いと思うので、サンプルをご覧ください。
→ ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」サンプル
シンプルでおしゃれな感じなので[START]で回転し始めます。[STOP]で少しずつスピードが落ちながら、回転が止まります。
ググっても日本語の解説がなかったので、ちょっと気合いれて使い方を解説しますね。
使い方
こちらのサイトをご覧ください。公式のデモページになってます。回転スピードを調節したり、止まった時にでる画像を指定したりと、いろいろ試すことができます。
http://demo.st-marron.info/roulette/sample/demo.html
まずこちらのGitHubサイトからRoulette.jsのファイル一式ダウンロードします。デモを含んだZIPファイルを利用するとわかりやすいと思います。
＜head＞部分に使用するcsstを指定します。
|
1 2 3 4 5 |
<link rel="stylesheet" href="bootstrap.css"></link> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-lightness/jquery-ui.css"> <link rel="stylesheet" href="bootstrap-responsive.css"></link> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/ui-lightness/jquery-ui.css"> <link rel="stylesheet" href="demo.css"></link> |
＜body＞部分に、使用する画像とボタンを以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="roulette_container" > <div class="roulette" style="display:none;"> <img src="star.png"/> <img src="flower.png"/> <img src="coin.png"/> <img src="mshroom.png"/> <img src="chomp.png"/> </div> </div> <div class="btn_container"> <p> <button class="btn btn-large btn-primary start"> START </button> <button class="stop btn-large btn btn-warning" onclick="GetRandomNumber();"> STOP </button> </p> </div> |
あとは＜/body＞の直前あたりに、jQueryを読み込ませて、初期設定の記述をします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script> <script src="roulette.js"></script> <script> jQuery(function(){ // initialize! var option = { speed : 10, duration : 5, stopImageNumber : 0, } $('div.roulette').roulette(option); // START! $('.start').click(function(){ $('div.roulette').roulette('start'); }); // STOP! $('.stop').click(function(){ $('div.roulette').roulette('stop'); }); }); </script> |
上のソースの設定の説明をします。
● speed : 10 ・・・ 回転スピードです。
● duration : 5 ・・・ およそ５秒間[STOP]を押さないと、自然に回転が止まります。
● stopImageNumber : 0 ・・・ ０番目の画像を必ずストップさせます。
※ stopImageNumberを記述しないと、用意した画像のなかからランダムにストップします。
● maxPlayCount ・・・ 何回プレイできるかです。１以上の整数。
当たり外れ判定や得点など追加したら、ルーレットゲームっぽくなるかと思います。いろいろ試してみてくださいね。
最後にサンプルのソースを記述しておきます。どうぞご参考まで。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Roulette.js サンプル／ぱんにゃっとtutorial</title> <link rel="stylesheet" href="bootstrap.css"></link> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-lightness/jquery-ui.css"> <link rel="stylesheet" href="bootstrap-responsive.css"></link> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/ui-lightness/jquery-ui.css"> <link rel="stylesheet" href="demo.css"></link> </head> <body> <div class="container"> <div class="page-header"> <h1> Roulette.js サンプル </h1> </div> <div class="roulette_container" > <div class="roulette" style="display:none;"> <img src="star.png"/> <img src="flower.png"/> <img src="coin.png"/> <img src="mshroom.png"/> <img src="mushroom-1up.png"/> <img src="chomp.png"/> <img src="cheep.png"/> </div> </div> <div class="btn_container"> <p> <button class="btn btn-large btn-primary start"> START </button> <button class="stop btn-large btn btn-warning" onclick="GetRandomNumber();"> STOP </button> </p> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script> <script src="roulette.js"></script> <script> jQuery(function(){ // initialize! var option = { speed : 10, duration : 5, stopImageNumber : 0, } $('div.roulette').roulette(option); // START! $('.start').click(function(){ $('div.roulette').roulette('start'); }); // STOP! $('.stop').click(function(){ $('div.roulette').roulette('stop'); }); }); </script> </body> </html> |
あわせてお読みください
Smooth Vertical or Horizontal Page Scrolling with jQuery 他のサイトと差をつけて、サイトを横スクロール…
SMINT メニューをクリックするとスルスルっと縦スクロールしていって、コンテンツの部分でとまるワンページスクロールのサイトを作りたい方にぴったりのjQuer…
Nice "Flashy" menu with Jquery. jQueryでまるでFlash（フラッシュ）で作ったかのようにアニメーションする動きのあるメニ…
2018/07/14 at 2:09 PM
こんにちは！
いつも参考サイトとして勉強、参考にさせていただいています！
Roulette.jsについてご質問です
サンプルを使って見たり、
したのですが、うまく行かなくて。
また、ZIPファイルをDLすれば動くのですが、
スピードなどいじろうとすると、途端に動かなくなります。
（動いたまま止まらないなど。。）
サイトに乗っているサンプルをそのまま使用した場合は、
画像が消えている状態です。
アドバイスお願いします！
2018/07/17 at 10:55 AM
MONOさん、コメントありがとうございます。返事が遅くなってすみません。
公式からダウンロードできるデモのファイルは、パラメータ調整などが足されてたりするので、そのままだとちょっとわかりにくいかもしれません。
サイトで利用しているデモを一式お送りいたしましょうか？少しはわかりやすいかもしれません。コメント時に入力していただいたメールアドレス宛にお送りしてもよろしいでしょうか？
お返事お待ちしております！
2018/08/29 at 10:49 PM
pannyattoさま
ご返信ありがとうございます！
すみません、バタバタしておりしばらく制作から遠のいておりました；；
デモいただけるとのこと大変ありがたいです！
お時間あるときでも構いませんので、ご参考にさせていただきたいです！
よろしくお願いします＾＾
2018/09/02 at 10:32 PM
MONOさま
先ほどメールいたしました。
参考になりましたら、幸いです！
2018/09/02 at 12:49 PM
とても参考にさせていただいております。
DLしていじったところ、しばらく止まらなかったりなんどやっても同じ画像になってしまったりと・・・差し支えなければ私もデモをお送りいただけないかと思います。
初歩的なことかもしれませんが、画像を増やしても同様に作動しますでしょうか？
どうぞ宜しくお願い致します。
2018/09/02 at 10:29 PM
SNさま
コメントありがとうございます。
先ほどメールでデモ用のファイルを共有いたしました。
参考になりましたら、幸いです。
ご質問の件ですが、画像を増やしても減らしても同様に作動します。
2018/09/04 at 8:39 AM
データ確認いたしました。早速ご対応いただきありがとうございます。今後とも参考にさせていただきます。
2019/03/06 at 11:10 PM
pannyattoさま。
はじめまして。プログラミング初心者のものです。
簡単なスロットを制作しています。
htmlとCSSの準備は整ったのですが、いろんなサイトを参考にJSを書いても、全く反映されません。（文字の誤字脱字、大文字小文字なども確認しています。）
まずはスタートボタン（スタート）をクリックした直後に複数の画像を横に回転しているようにみせたいのですが、jqueryで表現するにはどうすればよろしいですか。
よろしくお願いいたします。