2015.9.24

最近ランチに迷ってる…そんな時にはコレ！簡単ランチルーレット

毎日のランチ、何にしようか迷ったことはありませんか？
そんな時はランチルーレットを使ってみてはどうでしょうか！

ということで、Roulette.jsを使ってランチルーレットを作ってみました。

Roulette.jsは画像をスロット風に回転させるjQueryのプラグインです。
導入方法は公式デモページにあるGitHubのサイトからRoulette.jsのデータ一式をダウンロードします。
その中にあるRoulette.jsをコピーして使います。
そして以下のソースをhtmlに記述していきます。

■<head>内に以下を記述

<script src="roulette.js"></script>
<script>
$(function(){    
	// initialize!
	var option = {
		speed : 10,
		duration : 3,
		stopImageNumber : 0,
	}
	$('div.roulette').roulette(option);	

	// START!
	$('.start').click(function(){
		$('div.roulette').roulette('start');	
	});

	// STOP!
	$('.stop').click(function(){
		$('div.roulette').roulette('stop');	
	});
});
 
 </script>

■<body>内に以下を記述


<div class="roulette" style="display:none;"> 
	<img src="http://example.com/star.png"/>
	<img src="http://example.com/flower.png"/>
	<img src="http://example.com/coin.png"/>
	<img src="http://example.com/mshroom.png"/>
	<img src="http://example.com/chomp.png"/>
</div>


<button class="start">START</button> 
<button class="stop">STOP</button>

これで準備が整いました。

あとはjsに用意されているオプションを指定して完了となります。

■speed:10　ルーレットの回転スピードです。数を増やせば速くなります
■duration:5　5秒間で自動的にルーレットが止まります
■stopImageNumber:0　必ず止める画像を決めることができます
※ランダムでストップさせたい場合はstopImageNumberの記述を削除します
■maxPlayCount　プレイ回数を設定できます

ランチルーレット（スマホ用）
http://blog.zizo.ne.jp/add/morita/lunch_roulette/

公式デモページ
http://demo.st-marron.info/roulette/sample/demo.html