ニジカもんすたぁ!! トップ・ページ https://nizika.monster
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.

main.js 4.0 KiB

1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. const canvas = document.getElementById ('canvas');
  2. const ctx = canvas.getContext ('2d');
  3. const bg = (
  4. function ()
  5. {
  6. const _ = document.createElement('canvas');
  7. const img = new Image ();
  8. _.width = 1920;
  9. _.height = 1080;
  10. const ctx = _.getContext ('2d');
  11. img.onload = (
  12. function ()
  13. {
  14. ctx.drawImage (img, 0, 0);
  15. });
  16. img.src = './assets/bg.jpg';
  17. return _;
  18. }) ();
  19. const nizikaList = Array (24).fill ().map (
  20. function (__, i)
  21. {
  22. const _ = document.createElement('canvas');
  23. const img = new Image ();
  24. _.width = 300;
  25. _.height = 300;
  26. const ctx = _.getContext ('2d');
  27. img.onload = (
  28. function ()
  29. {
  30. ctx.drawImage (img, 0, 0);
  31. replaceColorWithTransparent (_);
  32. });
  33. img.src = `./assets/nizika/${String (i + 1).padStart (3, '0')}.png`;
  34. return _;
  35. });
  36. const kitaList = Array (40).fill ().map (
  37. function (__, i)
  38. {
  39. const _ = document.createElement('canvas');
  40. const img = new Image ();
  41. _.width = 428;
  42. _.height = 240;
  43. const ctx = _.getContext ('2d');
  44. img.onload = (
  45. function ()
  46. {
  47. ctx.drawImage (img, 0, 0);
  48. });
  49. img.src = `./assets/kita/${String (i + 41).padStart (3, '0')}.png`;
  50. return _;
  51. });
  52. const runawayGuitar = new Audio ('./assets/kita.wav');
  53. let canvasX;
  54. let canvasY;
  55. let frame = 0;
  56. let nizikaData = [];
  57. let kitaData = [];
  58. const nizikaVel = 5;
  59. let runawayFlag = false;
  60. let runawayFrame = 0;
  61. preprocess ();
  62. window.setInterval (() => reDraw (), 16);
  63. function
  64. preprocess ()
  65. {
  66. canvas.addEventListener ('click',
  67. function f (e)
  68. {
  69. this.removeEventListener ('click', f);
  70. kitaData.push ({x: e.clientX,
  71. y: e.clientY});
  72. runawayFlag = true;
  73. runawayFrame = frame;
  74. runawayGuitar.play ();
  75. });
  76. reDraw ();
  77. }
  78. function
  79. reDraw ()
  80. {
  81. canvasX = window.innerWidth;
  82. canvasY = window.innerHeight;
  83. canvas.width = canvasX;
  84. canvas.height = canvasY;
  85. ctx.drawImage (bg, 0, 0, canvasX, canvasY);
  86. if (!(runawayFlag))
  87. {
  88. nizikaData.push ({x: Math.random () * canvasX,
  89. y: Math.random () * canvasY});
  90. }
  91. if (nizikaData.length > 100)
  92. nizikaData.shift ();
  93. kitaData.forEach (
  94. function (kita)
  95. {
  96. ctx.drawImage (kitaList[frame % 40], kita.x - 214, kita.y - 120);
  97. });
  98. nizikaData.forEach (
  99. function (nizika)
  100. {
  101. ctx.drawImage (nizikaList[frame % 24], nizika.x - 150, nizika.y - 150);
  102. if (runawayFlag)
  103. {
  104. const l = Math.sqrt (Math.pow (((kitaData[0].x - 214)
  105. - (nizika.x - 150)), 2)
  106. + Math.pow (((kitaData[0].y - 120)
  107. - (nizika.y - 150)), 2));
  108. const t = Math.atan2 ((kitaData[0].y - 120) - (nizika.y - 150),
  109. (kitaData[0].x - 214) - (nizika.x - 150));
  110. nizika.x += nizikaVel * Math.cos (t);
  111. nizika.y += nizikaVel * Math.sin (t);
  112. }
  113. });
  114. ++frame;
  115. }
  116. function
  117. replaceColorWithTransparent (canvas)
  118. {
  119. const context = canvas.getContext ('2d');
  120. const imageData = context.getImageData (0, 0, canvas.width, canvas.height);
  121. const pixels = imageData.data;
  122. for (let i = 0; i < pixels.length; i += 4)
  123. {
  124. const r = pixels[i];
  125. const g = pixels[i + 1];
  126. const b = pixels[i + 2];
  127. if (r < 64 && g >= 96 && b < 96)
  128. pixels[i + 3] = 0;
  129. }
  130. context.putImageData (imageData, 0, 0);
  131. }
  132. function
  133. changeAlpha (canvas, alpha)
  134. {
  135. const toCanvas = document.createElement('canvas');
  136. const toCtx = toCanvas.getContext ('2d');
  137. const ctx = canvas.getContext ('2d');
  138. const imageData = ctx.getImageData (0, 0, canvas.width, canvas.height);
  139. const pxs = imageData.data;
  140. for (let i = 0; i < pxs.length; i += 4)
  141. pxs[i + 3] = alpha;
  142. toCtx.putImageData (imageData, 0, 0);
  143. return toCanvas;
  144. }