キケッツ掲示板のリポジトリです. https://bbs.kekec.wiki
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

170 lines
3.8 KiB

  1. const music = new Audio ('./assets/music.mp3'); // BGM
  2. let playing = false; // 再生フラグ
  3. let nowPlay = true; // 再生すべきかどぅか
  4. document.getElementById ('sort').addEventListener ('change', sortChange);
  5. /*
  6. * BGM を再生しよぅとする.
  7. *
  8. * 戻り値は,なし.
  9. */
  10. async function
  11. PlayMusic ()
  12. {
  13. // 再生中でなぃ場合
  14. if (playing === false)
  15. {
  16. // BGM を再生しよぅとする.
  17. try
  18. {
  19. await music.play ();
  20. music.loop = true;
  21. playing = true;
  22. nowPlay = true;
  23. // オン/オフ・ボタン
  24. document.getElementById ('mute').innerHTML = 'BGM がうるさい人用';
  25. }
  26. catch (err)
  27. {
  28. playing = false;
  29. }
  30. }
  31. }
  32. /*
  33. * BGM の消音切替
  34. *
  35. * 戻り値は,なし.
  36. */
  37. function
  38. PauseMusic ()
  39. {
  40. // 切替
  41. if (nowPlay && playing) // 再生中の場合
  42. {
  43. music.muted = true;
  44. document.getElementById ('mute').innerHTML = 'やっぱり BGM が恋しい人用';
  45. nowPlay = false;
  46. }
  47. else // 消音中の場合
  48. {
  49. music.muted = false;
  50. document.getElementById ('mute').innerHTML = 'BGM がうるさい人用';
  51. nowPlay = true;
  52. }
  53. }
  54. // 1000 ms ごとに BGM 再生試行
  55. window.setInterval (function
  56. ()
  57. {
  58. PlayMusic ();
  59. },
  60. 1000);
  61. // 画面クリックで BGM 再生試行
  62. document.addEventListener ('click', function
  63. ()
  64. {
  65. PlayMusic ();
  66. });
  67. // 画面タッチで BGM 再生試行
  68. document.addEventListener ('touchstart', function
  69. ()
  70. {
  71. PlayMusic ();
  72. });
  73. const body = document.getElementsByTagName ('body')[0]; // body 要素
  74. const cv = document.getElementById ('work'); // 作業用 Canvas
  75. const g = cv.getContext ('2d'); // 作業用 Canvas のコンテクスト
  76. const list = ['magenta', 'lime', 'cyan', 'yellow', 'orange', 'pink', 'aliceblue',
  77. 'antiquewhite', 'aqua', 'aquamarine', 'bisque', 'lightgreen', 'linen',
  78. 'lightsalmon', 'darkorange', 'palegreen'];
  79. // 色リスト
  80. let nowColour = Math.floor (Math.random () * list.length);
  81. // 前の色番号
  82. let nextColour = Math.floor (Math.random () * list.length);
  83. // 次の色番号
  84. let [tempR, tempG, tempB] = getRGB (list[nowColour]);
  85. // 現在の RGB 値
  86. // 3000 ms ごとに次の色指定
  87. window.setInterval (function
  88. ()
  89. {
  90. nowColour = nextColour;
  91. nextColour = Math.floor (Math.random () * list.length);
  92. },
  93. 3000);
  94. // 20 ms ごとに,ぢょぢょに,色変更
  95. window.setInterval (function
  96. ()
  97. {
  98. let [nowR, nowG, nowB] = getRGB (list[nowColour]);
  99. let [nextR, nextG, nextB] = getRGB (list[nextColour]);
  100. body.style.backgroundColor = `rgb(${tempR}, ${tempG}, ${tempB})`;
  101. tempR += (nextR - nowR) / 150;
  102. tempG += (nextG - nowG) / 150;
  103. tempB += (nextB - nowB) / 150;
  104. },
  105. 20);
  106. /*
  107. * カラ・コゥド c を RGB 値に変換する.
  108. *
  109. * 戻り値は,RGB 値排列.
  110. */
  111. function
  112. getRGB (c)
  113. {
  114. g.fillStyle = c;
  115. g.fillRect (0, 0, 1, 1);
  116. const img = g.getImageData (0, 0, 1, 1);
  117. const px = img.data;
  118. const rgb = [px[0], px[1], px[2]];
  119. return rgb;
  120. }
  121. function
  122. sortChange (evt)
  123. {
  124. const searchParams = new URLSearchParams (window.location.search);
  125. switch (evt.currentTarget.value)
  126. {
  127. default:
  128. window.location.href = `./?thread=${searchParams.get ('thread')}&sort=td`;
  129. break;
  130. case 'evaluate-good':
  131. window.location.href = `./?thread=${searchParams.get ('thread')}&sort=eg`;
  132. break;
  133. case 'time-asc':
  134. window.location.href = `./?thread=${searchParams.get ('thread')}&sort=ta`;
  135. break;
  136. case 'evaluate-bad':
  137. window.location.href = `./?thread=${searchParams.get ('thread')}&sort=eb`;
  138. break;
  139. }
  140. }