本番環境からコピー

1 year ago · 249a665557
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,3 @@
 /nizika
 /nml

--- a/assets/bg.jpg
+++ b/assets/bg.jpg
--- a/assets/kita/041.png
+++ b/assets/kita/041.png
--- a/assets/kita/042.png
+++ b/assets/kita/042.png
--- a/assets/kita/043.png
+++ b/assets/kita/043.png
--- a/assets/kita/044.png
+++ b/assets/kita/044.png
--- a/assets/kita/045.png
+++ b/assets/kita/045.png
--- a/assets/kita/046.png
+++ b/assets/kita/046.png
--- a/assets/kita/047.png
+++ b/assets/kita/047.png
--- a/assets/kita/048.png
+++ b/assets/kita/048.png
--- a/assets/kita/049.png
+++ b/assets/kita/049.png
--- a/assets/kita/050.png
+++ b/assets/kita/050.png
--- a/assets/kita/051.png
+++ b/assets/kita/051.png
--- a/assets/kita/052.png
+++ b/assets/kita/052.png
--- a/assets/kita/053.png
+++ b/assets/kita/053.png
--- a/assets/kita/054.png
+++ b/assets/kita/054.png
--- a/assets/kita/055.png
+++ b/assets/kita/055.png
--- a/assets/kita/056.png
+++ b/assets/kita/056.png
--- a/assets/kita/057.png
+++ b/assets/kita/057.png
--- a/assets/kita/058.png
+++ b/assets/kita/058.png
--- a/assets/kita/059.png
+++ b/assets/kita/059.png
--- a/assets/kita/060.png
+++ b/assets/kita/060.png
--- a/assets/kita/061.png
+++ b/assets/kita/061.png
--- a/assets/kita/062.png
+++ b/assets/kita/062.png
--- a/assets/kita/063.png
+++ b/assets/kita/063.png
--- a/assets/kita/064.png
+++ b/assets/kita/064.png
--- a/assets/kita/065.png
+++ b/assets/kita/065.png
--- a/assets/kita/066.png
+++ b/assets/kita/066.png
--- a/assets/kita/067.png
+++ b/assets/kita/067.png
--- a/assets/kita/068.png
+++ b/assets/kita/068.png
--- a/assets/kita/069.png
+++ b/assets/kita/069.png
--- a/assets/kita/070.png
+++ b/assets/kita/070.png
--- a/assets/kita/071.png
+++ b/assets/kita/071.png
--- a/assets/kita/072.png
+++ b/assets/kita/072.png
--- a/assets/kita/073.png
+++ b/assets/kita/073.png
--- a/assets/kita/074.png
+++ b/assets/kita/074.png
--- a/assets/kita/075.png
+++ b/assets/kita/075.png
--- a/assets/kita/076.png
+++ b/assets/kita/076.png
--- a/assets/kita/077.png
+++ b/assets/kita/077.png
--- a/assets/kita/078.png
+++ b/assets/kita/078.png
--- a/assets/kita/079.png
+++ b/assets/kita/079.png
--- a/assets/kita/080.png
+++ b/assets/kita/080.png
--- a/assets/nizika/001.png
+++ b/assets/nizika/001.png
--- a/assets/nizika/002.png
+++ b/assets/nizika/002.png
--- a/assets/nizika/003.png
+++ b/assets/nizika/003.png
--- a/assets/nizika/004.png
+++ b/assets/nizika/004.png
--- a/assets/nizika/005.png
+++ b/assets/nizika/005.png
--- a/assets/nizika/006.png
+++ b/assets/nizika/006.png
--- a/assets/nizika/007.png
+++ b/assets/nizika/007.png
--- a/assets/nizika/008.png
+++ b/assets/nizika/008.png
--- a/assets/nizika/009.png
+++ b/assets/nizika/009.png
--- a/assets/nizika/010.png
+++ b/assets/nizika/010.png
--- a/assets/nizika/011.png
+++ b/assets/nizika/011.png
--- a/assets/nizika/012.png
+++ b/assets/nizika/012.png
--- a/assets/nizika/013.png
+++ b/assets/nizika/013.png
--- a/assets/nizika/014.png
+++ b/assets/nizika/014.png
--- a/assets/nizika/015.png
+++ b/assets/nizika/015.png
--- a/assets/nizika/016.png
+++ b/assets/nizika/016.png
--- a/assets/nizika/017.png
+++ b/assets/nizika/017.png
--- a/assets/nizika/018.png
+++ b/assets/nizika/018.png
--- a/assets/nizika/019.png
+++ b/assets/nizika/019.png
--- a/assets/nizika/020.png
+++ b/assets/nizika/020.png
--- a/assets/nizika/021.png
+++ b/assets/nizika/021.png
--- a/assets/nizika/022.png
+++ b/assets/nizika/022.png
--- a/assets/nizika/023.png
+++ b/assets/nizika/023.png
--- a/assets/nizika/024.png
+++ b/assets/nizika/024.png
--- a/forms/index.frm.php
+++ b/forms/index.frm.php
@@ -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>

--- a/index.php
+++ b/index.php
@@ -0,0 +1,4 @@
 <?php

 require_once './forms/index.frm.php';

--- a/scripts/main.js
+++ b/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);
 }

--- a/styles/index.css
+++ b/styles/index.css
@@ -0,0 +1,9 @@
 html, body
 {
  height:           100%;
  margin:           0;
  display:          flex;
  justify-content:  center;
  align-items:      center;
 }