ぼちぼち

scripts/main.js

@@ -1,7 +1,8 @@
 const canvas = document.getElementById ('canvas');
 const ctx = canvas.getContext ('2d');
 
-const bg = (function ()
+const bg = (
+    function ()
     {
       const _ = document.createElement('canvas');
       const img = new Image ();
@@ -11,7 +12,8 @@ const bg = (function ()
 
       const ctx = _.getContext ('2d');
 
-      img.onload = (function ()
+      img.onload = (
+          function ()
           {
             ctx.drawImage (img, 0, 0);
           });
@@ -21,7 +23,8 @@ const bg = (function ()
       return _;
     }) ();
 
-const nizikaList = Array (24).fill ().map (function (__, i)
+const nizikaList = Array (24).fill ().map (
+    function (__, i)
     {
       const _ = document.createElement('canvas');
       const img = new Image ();
@@ -31,7 +34,8 @@ const nizikaList = Array (24).fill ().map (function (__, i)
 
       const ctx = _.getContext ('2d');
 
-      img.onload = (function ()
+      img.onload = (
+          function ()
           {
             ctx.drawImage (img, 0, 0);
             replaceColorWithTransparent (_);
@@ -42,7 +46,8 @@ const nizikaList = Array (24).fill ().map (function (__, i)
       return _;
     });
 
-const kitaList = Array (40).fill ().map (function (__, i)
+const kitaList = Array (40).fill ().map (
+    function (__, i)
     {
       const _ = document.createElement('canvas');
       const img = new Image ();
@@ -52,7 +57,8 @@ const kitaList = Array (40).fill ().map (function (__, i)
 
       const ctx = _.getContext ('2d');
 
-      img.onload = (function ()
+      img.onload = (
+          function ()
           {
             ctx.drawImage (img, 0, 0);
           });
@@ -69,6 +75,12 @@ let canvasY;
 let frame = 0;
 
 let nizikaData = [];
+let kitaData = [];
+
+const nizikaVel = 0.1;
+
+let runawayFlag = false;
+let runawayFrame = 0;
 
 preprocess ();
 
@@ -78,8 +90,17 @@ window.setInterval (() => reDraw (), 16);
 function
 preprocess ()
 {
-  canvas.addEventListener ('click', function ()
+  canvas.addEventListener ('click',
+      function f (e)
       {
+        this.removeEventListener ('click', f);
+
+        kitaData.push ({x: e.clientX - 214,
+                        y: e.clientY - 120});
+
+        runawayFlag = true;
+        runawayFrame = frame;
+
         runawayGuitar.play ();
       });
 
@@ -98,15 +119,36 @@ reDraw ()
 
   ctx.drawImage (bg, 0, 0, canvasX, canvasY);
 
-  nizikaData.push ({x: Math.random () * canvasX - 150,
-                    y: Math.random () * canvasY - 150});
+  if (!(runawayFlag))
+    {
+      nizikaData.push ({x: Math.random () * canvasX - 150,
+                        y: Math.random () * canvasY - 150});
+    }
 
   if (nizikaData.length > 100)
     nizikaData.shift ();
 
-  nizikaData.forEach (function (nizika)
+  kitaData.forEach (
+      function (kita)
+      {
+        ctx.drawImage (kitaList[frame % 40], kita.x, kita.y);
+      });
+
+  nizikaData.forEach (
+      function (nizika)
       {
         ctx.drawImage (nizikaList[frame % 24], nizika.x, nizika.y);
+
+        if (runawayFlag)
+          {
+            const l = Math.sqrt (Math.pow (kitaData[0].x - nizika.x, 2)
+                                 + Math.pow (kitaData[0].y - nizika.y, 2));
+            const t = Math.atan2 (kitaData[0].y - nizika.y,
+                                  kitaData[0].x - nizika.x);
+
+            nizika.x += nizikaVel * cos (t);
+            nizika.y += nizikaVel * sin (t);
+          }
       });
 
   ++frame;