ルーレットのロジック

仕様

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データだけチェックするだけなので構造が単純にできる