黒い正方形が明滅するだけのプログラム〜それぞれ初期値のカウントを保持〜

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

黒い正方形が明滅するだけのプログラムです。
前回は２分の１の確率で明滅していましたが、今回は特定パターンで明滅を繰り返すようにしました。
https://chico-shikaku.com/2019/09/black-rectangle-sprinkle/

その特定パターンは
1.それぞれの正方形が１〜９のカウントを持つ
2.1秒ごとにそれぞれのカウントが減り、カウントが0になると正方形が消える
3.消えた正方形はまた初期値である１〜９のカウントから始め、カウントが0になると正方形が再度現れる
となっております。

JavaScriptは用意されている関数が微妙なものが多いため、無理やり実現しています。
よってソースはかなり汚いです。

以前の２分の１の確率で明滅するパターンよりも、どこかイルミネーションに向いている作品になっています。

gitにソースを公開しております。
https://github.com/Chico27/black-rectangle-sprinkle-count

jsはこんな感じに作られております。
コメントアウトは気にしないでください。

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()*9)+1
      const div = document.createElement('div');
      div.id='black_rectangele_' + k;
      div.classList.add('box');
      div.classList.add('flex');
      div.classList.add('having_ct_' + selectChangeCt);
      div.classList.add('change_ct_' + selectChangeCt);
      document.body.appendChild(div);
      k++;
    }
    const div2 = document.createElement('div');
    document.body.appendChild(div2);
  }
}

//現在時刻を表示する関数
function sprinkle(){
  ct = 1;
  while(ct <= maxRectangle){
    let attr = document.getElementById("black_rectangele_" + ct);
    let attrClass =  attr.className;
    let chars = attrClass.split(' ');
    let containDisappear = false;

    if (chars.includes("box_disappear")) {
      chars.splice(chars.indexOf("box_disappear"), 1);
      containDisappear = true;
    }

    let having_ct = chars[2].slice(-1);
    let change_string = chars[3];
    let change_ct = change_string.slice(-1);
    change_ct--;
    if (change_ct == 0){
      // console.log(containDisappear)
      if (!containDisappear) {
        // console.log(true)
        attr.classList.add("box_disappear");
      } else {
        // console.log(false)
        attr.classList.remove("box_disappear");
      }
      change_ct = having_ct;
    }
    attr.classList.remove(change_string)
    attr.classList.add('change_ct_' + change_ct)
    // if(!chars.indexOf(pattern)){
    //   console.log(chars[string.indexOf(pattern)])
    // }
    ct++;
  }
}