2016年7月17日日曜日

重複しない乱数生成(JavaScript)

あまりにも考えなしに重複しない乱数生成とかウェブで公開している連中がいるので、正解をここに上げとく
ちなみに不正解なのは、
一度出た乱数を除外したり、配列に入れといてかき混ぜたりするやり方です。
なんで不正解なのかよく考えて欲しい。
下のやり方は、配列に入れといて、出たらその数を消すやり方
いわゆる物理的世界でのビンゴゲームと一緒のやり方だ。
ついでに左からのゼロ補完もやってる
文字の妥当性チェックは面倒なので数値かどうかだけ、マイナスだったり小数だったりはチェックしてない


----html----
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" />
  <title>重複のない乱数</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>重複のない乱数</h1>
  乱数の個数<br>
  <input type=text id="num" /><input type =button value = "開始" onClick="Start()" />
  <div id="test"></div>
  <script src="script.js"></script>
</body>
</html>
----css----
@charset "UTF-8";

#test {
  color: blue;
}

----js----
window.addEventListener('load', function(e) {
  // ここでは特に何もしない
}, false);


function initCollection(n,nums) {
  // nums 配列に1-nをセットする
  for(var i=0;i<n;i++){
    nums[i] = i+1;
  }
}
function Start(){
  // 配列を定義
  var nums = new Array();
  // test のエリアを消す
  document.querySelector('#test').innerHTML = "";
  // 入力された値を取得
  var n = document.getElementById("num").value;
  // 数値判定
  if(isNaN(n)){
    window.alert("数値を入れてください");
    document.getElementById("num").value = "";
    return;
  }

  // nums 配列を初期化
  initCollection(n,nums);

  // zero 補完用文字列を準備
  var nLen = n.length
  var zero='';
  for(var i=0;i<nLen;i++){
    zero += '0';
  }

  var cnt = 1;
  for(var i=n;i>0;i--){
    // 乱数生成
    var rnd = Math.floor(Math.random()*i);
    // カウントとnums のrnd番目を表示
    document.querySelector('#test').innerHTML +=
        (zero+cnt).slice(-nLen) +':' + nums[rnd]+ '<br>';
    // rnd 番目を削除
    nums.splice(rnd,1);
    // カウントをインクリメント
    cnt++;
  }
}


0 件のコメント: