const music = new Audio ('./assets/music.mp3'); // BGM let playing = false; // 再生フラグ let nowPlay = true; // 再生すべきかどぅか document.getElementById ('sort').addEventListener ('change', sortChange); /* * BGM を再生しよぅとする. * * 戻り値は,なし. */ async function PlayMusic () { // 再生中でなぃ場合 if (playing === false) { // BGM を再生しよぅとする. try { await music.play (); music.loop = true; playing = true; nowPlay = true; // オン/オフ・ボタン document.getElementById ('mute').innerHTML = 'BGM がうるさい人用'; } catch (err) { playing = false; } } } /* * BGM の消音切替 * * 戻り値は,なし. */ function PauseMusic () { // 切替 if (nowPlay && playing) // 再生中の場合 { music.muted = true; document.getElementById ('mute').innerHTML = 'やっぱり BGM が恋しい人用'; nowPlay = false; } else // 消音中の場合 { music.muted = false; document.getElementById ('mute').innerHTML = 'BGM がうるさい人用'; nowPlay = true; } } // 1000 ms ごとに BGM 再生試行 window.setInterval (function () { PlayMusic (); }, 1000); // 画面クリックで BGM 再生試行 document.addEventListener ('click', function () { PlayMusic (); }); // 画面タッチで BGM 再生試行 document.addEventListener ('touchstart', function () { PlayMusic (); }); const body = document.getElementsByTagName ('body')[0]; // body 要素 const cv = document.getElementById ('work'); // 作業用 Canvas const g = cv.getContext ('2d'); // 作業用 Canvas のコンテクスト const list = ['magenta', 'lime', 'cyan', 'yellow', 'orange', 'pink', 'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'bisque', 'lightgreen', 'linen', 'lightsalmon', 'darkorange', 'palegreen']; // 色リスト let nowColour = Math.floor (Math.random () * list.length); // 前の色番号 let nextColour = Math.floor (Math.random () * list.length); // 次の色番号 let [tempR, tempG, tempB] = getRGB (list[nowColour]); // 現在の RGB 値 // 3000 ms ごとに次の色指定 window.setInterval (function () { nowColour = nextColour; nextColour = Math.floor (Math.random () * list.length); }, 3000); // 20 ms ごとに,ぢょぢょに,色変更 window.setInterval (function () { let [nowR, nowG, nowB] = getRGB (list[nowColour]); let [nextR, nextG, nextB] = getRGB (list[nextColour]); body.style.backgroundColor = `rgb(${tempR}, ${tempG}, ${tempB})`; tempR += (nextR - nowR) / 150; tempG += (nextG - nowG) / 150; tempB += (nextB - nowB) / 150; }, 20); /* * カラ・コゥド c を RGB 値に変換する. * * 戻り値は,RGB 値排列. */ function getRGB (c) { g.fillStyle = c; g.fillRect (0, 0, 1, 1); const img = g.getImageData (0, 0, 1, 1); const px = img.data; const rgb = [px[0], px[1], px[2]]; return rgb; } function sortChange (evt) { const searchParams = new URLSearchParams (window.location.search); switch (evt.currentTarget.value) { default: window.location.href = `./?thread=${searchParams.get ('thread')}&sort=td`; break; case 'evaluate-good': window.location.href = `./?thread=${searchParams.get ('thread')}&sort=eg`; break; case 'time-asc': window.location.href = `./?thread=${searchParams.get ('thread')}&sort=ta`; break; case 'evaluate-bad': window.location.href = `./?thread=${searchParams.get ('thread')}&sort=eb`; break; } }