|
|
@@ -1,169 +0,0 @@ |
|
|
|
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; |
|
|
|
} |
|
|
|
} |
|
|
|
|