jQueryで「ミニロト」番号ジェネレータを作ってみた
2017/12/06
JavaScript でランダムな文字列なり数値を作成するのってどうするんだ、と思い調査しました。
その時についでに「ミニロト」番号のジェネレータを作ったので、晒してみます。
Javascriptで乱数
Math.random()
Javascriptで乱数を発生させる場合は Math.random() 関数を使います。
引数なしで返り値が 0.0 以上、1.0 未満の乱数を返すという、若干「？？？」となってしまいがちですが、実例を見ればなんとなく解ると思います。
|
1 2 3 |
for (var i=0; i<10; i++) { console.log(Math.random()); } |
結果の一例は以下の様な感じ。
|
1 2 3 4 5 6 7 8 9 10 |
0.7201108081159188 0.8400530997003633 0.9837428758596342 0.9568856325106788 0.3239662292339288 0.7520360994217516 0.46303849109382667 0.8411066573238926 0.48799327216937505 0.004728576068071755 |
任意の範囲の乱数を取得したい場合は、以下のようにします。
サンプルとして、1～15の範囲で10個、発生させます。
|
1 2 3 4 5 6 |
for (var i=0; i<10; i++) { var maxNum = 15; var ret = Math.ceil(Math.random() * maxNum); console.log(ret); } |
結果。
|
1 2 3 4 5 6 7 8 9 10 |
8 10 15 4 2 3 6 14 8 13 |
Math.ceil()
Math.ceil() は、小数点以下の値を切り上げした結果を返す関数です。
結果のサンプルは以下のようになります。
|
1 2 3 |
Math.ceil(0.04222680765458953) ⇒ 1 Math.ceil(14.292958431967962) ⇒ 15 Math.ceil(9.063451149698416) ⇒ 10 |
ミニロト番号ジェネレータ
1～31を5個
以上を踏まえて、ミニロト用の番号ジェネレータを作ってみます。
ミニロトの仕様は 1～31 の重複なし番号を 5個 です。
まずは、1～31 を 5個ってところから。
先ほどの式をそのまま使えます。
|
1 2 3 4 5 6 7 8 9 10 11 |
// 作成個数 var count = 5; // 最大値 var maxNum = 31; for (var i=1; i<count; i++) { tmpVal = Math.ceil(Math.random() * maxNum); console.log(tmpVal); } |
ここまでは何も考えずに作れますね。
重複なし処理
次に、重複なしって処理を加えます。
考え方は『作成した数値が既にある場合は再度作成する』って風にしました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// 作成個数 var count = 5; // 最大値 var maxNum = 31; // 生成した乱数を格納する配列を初期化 var genArray = new Array(); // 生成した乱数を格納している配列の長さ（生成した乱数の数）を初期化 var generatedCount = 0; // count回数 Math.random() で乱数(1～maxNum)を発生 for(var i=0 ; i<count; i++){ var tmpVal = Math.ceil(Math.random() * maxNum); // 今まで生成された乱数と同じ場合は、再度乱数を発生 for(var j=0; j<generatedCount; j++) { if(tmpVal == genArray[j]){ tmpVal = Math.ceil(Math.random() * maxNum); j= -1; } } genArray[i] = tmpVal; generatedCount++; } console.log(genArray); |
結果例
配列で返しています。
|
1 |
[16, 11, 19, 24, 4] |
あとはこれをjQueryを使って表示させれば出来上がり。
なのですが、ちょっと凝ってみます。
数字がうまく昇順で並んでいないので、ソートさせます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
// 作成個数 var count = 5; // 最大値 var maxNum = 31; // 生成した乱数を格納する配列を初期化 var genArray = new Array(); // 生成した乱数を格納している配列の長さ（生成した乱数の数）を初期化 var generatedCount = 0; // count回数 Math.random() で乱数(1～maxNum)を発生 for(var i=0 ; i<count; i++){ var tmpVal = Math.ceil(Math.random() * maxNum); // 今まで生成された乱数と同じ場合は、再度乱数を発生 for(var j=0; j<generatedCount; j++) { if(tmpVal == genArray[j]){ tmpVal = Math.ceil(Math.random() * maxNum); j= -1; } } genArray[i] = tmpVal; generatedCount++; } console.log(genArray); // ←(1) // 昇順並び替え genArray = genArray.sort(sortNumber); console.log(genArray); // ←(2) // ソート用の、数を比較する関数 function sortNumber(a,b){ return a - b; } |
これで、以下のようになります。
|
1 2 |
[8, 20, 9, 5, 3] // ←(1) [3, 5, 8, 9, 20] // ←(2) |
仕様はこれで満たせました。
あとはボタンを押した時に実行させ、数字を表示させるだけです。
その辺りは実際のデモをのソースを見て頂ければと思います。
なお、結果数字の表示には jQueryのライブラリである『jquery.textAnimation』を使用させて頂いています。
デモ
デモはこちらから。
https://lightning-bolt.xyz/js/jquery.tgMiniLotoNumber/