１秒ごとに数多の正方形の色が特定の色に変わる可能性のあるだけのプログラム

2019年9月8日2019年9月21日

１秒ごとに数多の正方形の色が特定の色に変わる可能性のあるだけのプログラムです。
色の種類は
赤、オレンジ、黄色、緑、水色、青、紫の合計７パターンです。
虹の色と同じですね。

以前色の種類が
16×16×16×16×16×16パターンのものを公開しましたが、色の種類が多すぎて野暮ったくなるので色の種類を７種類に減らしました。
数多の正方形の色が１秒ごとに変わるだけのプログラム

色の種類が３種類のものも試しました。
色の種類は
赤、黄色、青です。
こちらはどこか子供っぽい色合いになりました。

gitにソースを公開しております。
こちらのソースは７色のものになります。
https://github.com/Chico27/change-color-rectangle2

jsはこんな感じに作られております。
ところどころコメントがありますが気にしないでください。
function setColorのcolorList1をcolorList2に変えれば３色になります。

const line = 10;
const column = 10;
const maxRectangle = line*column;
var limitCt = 0;
window.onload = function() {
  setInterval("sprinkle()", 1000);

  let k = 1;
  for (let i = 1; i <= line; i++) {
    for (let j = 1; j <= column; j++) {
      // selectChangeCt = Math.floor(Math.random()*10)+1
      const div = document.createElement('div');
      div.id='black_rectangele_' + k;
      div.classList.add('box');
      div.classList.add('flex');
      // div.classList.add('change_ct_' + selectChangeCt);
      document.body.appendChild(div);
      k++;
    }
    const div2 = document.createElement('div');
    document.body.appendChild(div2);
  }
  sprinkle();
}

function sprinkle(){
  ct = 1;
  // console.log(ct);
  // console.log(colorString);
  let colorString = setColor();
  while(ct <= maxRectangle){
    let colorString = setColor();
    // randomNum = Math.random();
    // if (randomNum < 0.5){
      let attr = document.getElementById("black_rectangele_" + ct);
      // if (!attr.classList.contains('box_disappear')) {
        attr.style.background = colorString;
        // console.log(colorString);
      // } else {
      //   attr.classList.remove("box_disappear");
      // }
    // }
    ct++;
  };
}

function setColor(){

  // let colorString = "#";
  let colorList1 = ['red', 'orange', 'yellow', 'green', 'aqua', 'blue', 'purple'];
  let colorList2 = ['red', 'yellow', 'blue'];

  // for (let i = 0;i < 6; i++){
    colornum = Math.floor(Math.random()*colorList1.length);
    let colorString = colorList1[colornum];
    // console.log(colorString);
  // }

  return colorString;
}