web関連

【javascript】空の配列にランダム数値を追加しつつ、数値と範囲が被らないようにする

2020/05/21

2020/05/22

数値と範囲が被らない数値をどんどん追加していく条件式書いたときの備忘録

やりたいこと

空の配列を用意してランダム数値をどんどん追加して
・数値が被らない
・±30したときの範囲が被らない
数値を出力したい

前回の続き

ソースコード

<script>
// 引数で渡した範囲内のランダムな整数を生成するための関数
var getRandomInt = function(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

//一括で変数宣言、単独varパターンって書き方らしい
var max_num = 200,//ランダムで生成する最大値
  array = [],
  random = getRandomInt(0, max_num),//ランダム数値生成
  num = 30,//範囲数値
  i=0,
  len = array.length,//配列の数
  loop = 0,//無限ループ対策
  max_len = max_num / num;//配列の最大数

  array.push(random);
  console.log('初期値'+random+'を生成');

while(true){
  len = array.length;
  loop = 0;//無限ループ対策
  for (i = 0; i < len; i++) {

    console.log('配列数【'+len+'】の'+i+'回目');
    console.log('【'+array[i]+'】のループ');

    var min = array[i]-num;//範囲の最小値
    var max = array[i]+num;//範囲の最大値
    if(Math.sign(min) == -1){//minが負の数になったときに最小値をに戻す(負の数だと無限ループ入っちゃう)
      min = 0;
    }

    while((random >= min && random <= max) || array.includes(random) || random == 0){//左から:random数値が最小and最大の範囲外かどうか検証 or random数値が配列の数値と被らないか検証 or random数値が0じゃないかどうか検証

      random = getRandomInt(0, max_num);//再度数値をリセット
      console.log('ランダム数値【'+random+'】を生成');
      if(!i == 0){
        i=0;//変数をリセットして配列の一番最初から再スタート
      }

      min = array[i]-num;
      max = array[i]+num;
      if(Math.sign(min) == -1){
        min = 0;
      }

      //①ここから
      console.log('loopは'+loop+'回目');
      if(loop == 100 && Math.floor(max_len)-1 == len){//無限ループ対策
        loop = 0;
        console.log('無限ループ脱出');
        break;
      }
      loop++;
      //①ここまで

    }
  }
  array.push(random);//配列に被らない数値を追加
  console.log(random+'を追加');

  if(Math.floor(max_len)-1 == len){//最後のループになったらwhileループを抜けるための条件式
    alert('配列と数値、範囲が被らない数値は【 '+array+' 】です');
    break;
  }
}
</script>

①…
このソースコードだと、配列が最大6つまで入るんだけど配列に入ってる数値によっては6つ目で無限ループ起こすので最後の配列に来たら100回まではループしてそれでも見つからなかったらループ抜けるように書いてる

本当は被らない数値見つからなかったら、配列を空にしてもう一度最初からってしたかったけど書き方がわからない

以下参考

 

次は応用で、ランダム配置する画像の位置を取得して数値の範囲が極力被らないようにするコード書こうと思う
ランダムの処理何もしないと結構画像が偏ったりするので均等に配置したい