ルーレットのロジック
仕様
- javascriptでルーレットを作る
- 操作はstart,stop,resetの3ボタンのみ
- startを押すとルーレットが周り(class=selected)、stopを押すと止まり確定(class=confirm)
- resetを押すと初期状態（起動時も実行する）
ソース
HTML
test_2.htm
<html>
<head>
<link rel="stylesheet" type="text/css" href="test_2.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="test_2.js"></script>
<title>test_2:ルーレット</title>
</head>
<body>
<table id="t1">
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
</table>
<input type="button" value="start" id="start">
<input type="button" value="stop" id="stop">
<input type="button" value="reset" id="reset">
<div id="div"></div>
</body>
</html>
css
test_2.css
.confirm{background-Color:aqua;}
.selected{background-Color:red;}
javascript
test_2.js
$(function(){
var stock,num,idx,time,timerId,swap;
$('#start').on('click',function(){
timerId=setInterval(function(){
idx=Math.floor(Math.random()*num);
$('#t1 td').removeClass("selected").eq(stock[idx]).addClass("selected");
},time);
$('#start,#reset').prop('disabled',true);
$('#stop').prop('disabled',false);
});
$('#stop').on('click',function(){
clearInterval(timerId);
$('#t1 td').eq(stock[idx]).addClass("confirm");
num--;
swap=stock[num];
stock[num]=stock[idx];
stock[idx]=swap;
$('#start').prop('disabled',num<=1);
$('#stop').prop('disabled',true);
$('#reset').prop('disabled',false);
console.log(stock);
});
$('#reset').on('click',function(){
stock=[];//ストックリスト
for(var i=0;i<16;i++) stock.push(i);
num=16;//残りマス
time=10;//timerスピード
idx=null;//現在位置
$('#t1 td').removeClass("confirm").removeClass("selected");
$('#start').prop('disabled',false);
$('#stop').prop('disabled',true);
}).trigger('click');
});
ロジック
データ管理
- データを配列stockに1から16までの数字として保持する
- startを押すとnumの初期値16を受けて、0~15までの数値を得る
- stopを押すとnumをデクリメント(初期値でいうと16→15)し、選択された番号idxとstockのnum番のデータを入れ替える
例
stockの初期値
[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
に対して、仮にidx=8であれば
[0,1,2,3,4,5,6,7,15,9,10,11,12,13,14,8]
となる。次のstart時にはnumは15になっているのでstockの一番うしろを除くデータから抽出される。仮にidx=3であれば
[0,1,2,14,4,5,6,7,15,9,10,11,12,13,3,8]
となる。ようは選ばれた数値が後ろから順番に埋まっていく感じ。
常に0~numの範囲で、選ばれていない数値が保持されている。
最終的にnumが1になった時点でそれ以上選択できないので終了。
メリット
テーブルのセル状態を見る必要はなく、常にstockデータだけチェックするだけなので構造が単純にできる