javascriptで乱数を発生させるには、
Math.random()
がある。これを0〜iまでの乱数を出力させるには、
Math.floor(Math.random()*i)
としてやればいい。
今やることは、例えば1~50までの配列[1,2,3,,...,50]を用意しておいて
それをランダムにシャッフルすること。
シャッフルには上の関数をうまく使ったFisher-Yaleアルゴリズムを使う。
http://la.ma.la/blog/diary_200608300350.htm
http://www.openspc2.org/JavaScript/study/state.html
やり方は以下。
ArrayのPrototypeにshuffle関数を定義してやる。
javascriptのprototypeとは、Arrayクラスが共通して持つプロパティみたいなもの（理解があやしいけど）
Array.prototype.shuffle = function() { var i = this.length; while(i){ var j = Math.floor(Math.random()*i); var t = this[--i]; this[i] = this[j]; this[j] = t; } return this; }
やってることは、入力した配列の長さiでwhileループをかけてやり、
ループ内でiをデクリメントしていく。（whileループはi=0で終了する）
配列の長さまでの整数jをランダムに選び、入力した配列のjにおける値を配列の最後尾の値とする。
で、このままだと重複が発生するから、配列i-1の値（最後の一つ前の要素）をjに代入してやればいい。
あとはiを１ずつ減らしてやって同様の操作を続ける。
例えば50までのランダム配列を得るプログラムは以下となる。
Array.prototype.shuffle = function() { var i = this.length; while(i){ var j = Math.floor(Math.random()*i); var t = this[--i]; this[i] = this[j]; this[j] = t; } return this; } //a = [1,2,3,4,5]; a = [] for(i=1;i<51;i++){ a.push(i) } print(a) a.shuffle() // 3,1,5,2,4 print(a) //for(i=0;i<a.length;i++) { // print(a[i]) // 3,1,5,2,4 //}
中身のエンジンができたので、インターフェースの作成にうつる。
作るのは、jQueryを使ってボタンを押すと画面にさっきの配列が順に表示されるというプログラム。
とりあえずjQueryを使わずに書いたコード。
<html> <head> <title>Bingo program</title> <script type="text/javascript">Array.prototype.shuffle = function() { var i = this.length; while(i){ var j = Math.floor(Math.random()*i); var t = this[--i]; this[i] = this[j]; this[j] = t; } return this; } a = [] for(i=1;i<51;i++){ a.push(i) } a = a.shuffle() function getArray() { document.getElementById("hoge").value = a } </script> </head> <body> <h1>Bingo Program</h1> <input type="text" name="hoge" id="hoge" value="foo"/> <script type="text/javascript">getArray()</script> </body> </html>
ボタンつけてCSSにTwitter bootstrapを使った。
<html> <head> <title>Bingo program</title> <script type="text/javascript"> Array.prototype.shuffle = function() { var i = this.length; while(i){ var j = Math.floor(Math.random()*i); var t = this[--i]; this[i] = this[j]; this[j] = t; } return this; }; a = []; for(i=1;i<51;i++){ a.push(i); } function getArray(){ a = a.shuffle(); document.getElementById("hoge").innerHTML = </h2>a</h2>; }; </script> <link rel="stylesheet" href="bootstrap.css" type="text/css"> </head> <body> <br > <center><h1>Bingo Program</h1> <br /> <ul> <label class="" type="text" name="hoge" id="hoge"><h2>default</h2></label> </ul> <ul> <button class="btn btn-large" name="btn" id="btn" value="press" onclick="getArray()">press</button> </ul> </center> </body> </html>
完成形はこちら。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Bingo program</title> <script type="text/javascript"> Array.prototype.shuffle = function() { var i = this.length; while(i){ var j = Math.floor(Math.random()*i); var t = this[--i]; this[i] = this[j]; this[j] = t; } return this; }; a = []; function generateArray() { num = parseInt(document.getElementById("num").value) for(t=1;t<(num+1);t++){ a.push(t); }; a = a.shuffle(); }; function textareaDisable() { document.getElementById("num").disabled = true; }; i = 0; function getArray(){ if(i==0){ generateArray(); textareaDisable(); k = i+1 document.getElementById("hoge").innerHTML ="<font size = 10>"+k+ "番目の挑戦 : "+a[i]+"</font>"; document.getElementById("gehogeho").innerHTML += "<font size =5>"+a[i]+","+"</font>"; } else if(i==num){ btnDisable(); } else { k = i+1 document.getElementById("hoge").innerHTML ="<font size = 10>"+k+ "番目の挑戦 : "+a[i]+"</font>"; document.getElementById("gehogeho").innerHTML += "<font size =5>"+a[i]+","+"</font>"; }; i++; }; function btnDisable(){ document.getElementById("btn").disabled = true; document.getElementById("btn").innerText = "Done"; }; </script> <link rel="stylesheet" href="bootstrap.css" type="text/css"> </head> <body> <br > <center><h1>Bingo Program</h1> <br /> <br /> <br /> <input type="text" id="num" class="span3" placeholder="ビンゴの値の最大値を入力"> <br /> <br /> <br /> <br /> <br /> <ul> <label class="" type="text" name="hoge" id="hoge"><font size="10">さあ、 挑戦しよう！</font></label> </ul> <br /> <br /> <br /> <ul><label class=""><font size="5">読み上げた数字：</font><ul> <br /> <br /> <div class="list" type="text" name="gehogeho" id="gehogeho"><font size="5"> </font></div> <br /> <br /> <ul> <button class="btn btn-large" name="btn" id="btn" value="press" onclick="getArray()">Generate</button> </ul> </center> </body> </html>
サーバにアップした。
http://shohei.github.com/bingo/
