本番環境からコピー

scripts/main.js

@@ -0,0 +1,128 @@
+const canvas = document.getElementById ('canvas');
+const ctx = canvas.getContext ('2d');
+
+const bg = (function ()
+    {
+      const _ = document.createElement('canvas');
+      const img = new Image ();
+
+      _.width = 1920;
+      _.height = 1080;
+
+      const ctx = _.getContext ('2d');
+
+      img.onload = (function ()
+          {
+            ctx.drawImage (img, 0, 0);
+          });
+
+      img.src = './assets/bg.jpg';
+
+      return _;
+    }) ();
+
+const nizikaList = Array (24).fill ().map (function (__, i)
+    {
+      const _ = document.createElement('canvas');
+      const img = new Image ();
+
+      _.width = 300;
+      _.height = 300;
+
+      const ctx = _.getContext ('2d');
+
+      img.onload = (function ()
+          {
+            ctx.drawImage (img, 0, 0);
+            replaceColorWithTransparent (_);
+          });
+
+      img.src = `./assets/nizika/${String (i + 1).padStart (3, '0')}.png`;
+
+      return _;
+    });
+
+const kitaList = Array (40).fill ().map (function (__, i)
+    {
+      const _ = document.createElement('canvas');
+      const img = new Image ();
+
+      _.width = 428;
+      _.height = 240;
+
+      const ctx = _.getContext ('2d');
+
+      img.onload = (function ()
+          {
+            ctx.drawImage (img, 0, 0);
+          });
+
+      img.src = `./assets/kita/${String (i + 41).padStart (3, '0')}.png`;
+
+      return _;
+    });
+
+let canvasX;
+let canvasY;
+let frame = 0;
+
+let nizikaData = [];
+
+preprocess ();
+
+window.setInterval (() => reDraw (), 16);
+
+
+function
+preprocess ()
+{
+  reDraw ();
+}
+
+
+function
+reDraw ()
+{
+  canvasX = window.innerWidth;
+  canvasY = window.innerHeight;
+
+  canvas.width = canvasX;
+  canvas.height = canvasY;
+
+  ctx.drawImage (bg, 0, 0, canvasX, canvasY);
+
+  nizikaData.push ({x: Math.random () * canvasX - 150,
+                    y: Math.random () * canvasY - 150});
+
+  if (nizikaData.length > 100)
+    nizikaData.shift ();
+
+  nizikaData.forEach (function (nizika)
+      {
+        ctx.drawImage (nizikaList[frame % 24], nizika.x, nizika.y);
+      });
+
+  ++frame;
+}
+
+
+function
+replaceColorWithTransparent (canvas)
+{
+  const context = canvas.getContext ('2d');
+  const imageData = context.getImageData (0, 0, canvas.width, canvas.height);
+  const pixels = imageData.data;
+
+  for (let i = 0; i < pixels.length; i += 4)
+    {
+      const r = pixels[i];
+      const g = pixels[i + 1];
+      const b = pixels[i + 2];
+
+      if (r < 64 && g >= 96 && b < 96)
+        pixels[i + 3] = 0;
+    }
+
+  context.putImageData (imageData, 0, 0);
+}
+