ファイル構成だけなんとかした（中身はまだ）．

scripts/script.js

@@ -0,0 +1,169 @@
+const music = new Audio ('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;
+    }
+}
+