本番環境からコピー

2023-05-23 05:05:16 +09:00
commit 249a665557
70 changed files with 157 additions and 0 deletions
@@ -0,0 +1,3 @@
+/nizika
+/nml
+
@@ -0,0 +1,13 @@
+<html lang="ja">
+    <head>
+        <meta charset="utf8" />
+        <link rel="stylesheet" href="./styles/index.css" />
+        <script src="./scripts/main.js" defer="defer"></script>
+        <title>伊地知ニジカ - 鑑賞編</title>
+    </head>
+
+    <body>
+        <canvas id="canvas"></canvas>
+    </body>
+</html>
+
@@ -0,0 +1,4 @@
+<?php
+
+require_once './forms/index.frm.php';
+
@@ -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);
+}
+
@@ -0,0 +1,9 @@
+html, body
+{
+  height:           100%;
+  margin:           0;
+  display:          flex;
+  justify-content:  center;
+  align-items:      center;
+}
+