１秒ごとに数多の正方形の色が変わったり明滅するだけのプログラム
１秒ごとに数多の正方形の色が変わったり明滅するだけのプログラムです。
色の種類は
16×16×16×16×16×16パターンです。
こちらの「黒い正方形が明滅するだけのプログラム〜２分の１の確率で明滅〜」と「数多の正方形の色が１秒ごとに変わるだけのプログラム」を組み合わせたものになります。
黒い正方形が明滅するだけのプログラム〜２分の１の確率で明滅〜
数多の正方形の色が１秒ごとに変わるだけのプログラム
残像がちょっと見えたりするのが面白いですね。
gitにソースを公開しております。
https://github.com/Chico27/change-rectangle-sprinkle
jsはこんな感じに作られております。
ところどころコメントがありますが気にしないでください。
|
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
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(); let attr = document.getElementById("black_rectangele_" + ct); attr.style.background = colorString; randomNum = Math.random(); if (randomNum < 0.5){ if (!attr.classList.contains('box_disappear')) { attr.classList.add("box_disappear"); attr.style.background = "#FFF"; } else { attr.classList.remove("box_disappear"); } } ct++; }; } function setColor(){ let colorString = "#"; for (let i = 0;i < 6; i++){ colornum = Math.floor(Math.random()*16); colorString += colornum.toString(16); // console.log(colorString); } return colorString; } |
私の今までの成果物はこちらです。
成果物一覧