scripts/main.js

@@ -4,7 +4,7 @@ const ctx = canvas.getContext ('2d');
 const bg = (
     function ()
     {
-      const _ = document.createElement('canvas');
+      const _ = document.createElement ('canvas');
       const img = new Image ();
 
       _.width = 1920;
@@ -26,7 +26,7 @@ const bg = (
 const nizikaList = Array (24).fill ().map (
     function (__, i)
     {
-      const _ = document.createElement('canvas');
+      const _ = document.createElement ('canvas');
       const img = new Image ();
 
       _.width = 300;
@@ -49,7 +49,7 @@ const nizikaList = Array (24).fill ().map (
 const kitaList = Array (40).fill ().map (
     function (__, i)
     {
-      const _ = document.createElement('canvas');
+      const _ = document.createElement ('canvas');
       const img = new Image ();
 
       _.width = 428;
@@ -68,6 +68,8 @@ const kitaList = Array (40).fill ().map (
       return _;
     });
 
+const upperKita = document.createElement ('canvas');
+
 const runawayGuitar = new Audio ('./assets/kita.wav');
 
 let canvasX;
@@ -104,6 +106,9 @@ preprocess ()
         runawayGuitar.play ();
       });
 
+  upperKita.width = 428;
+  upperKita.height = 240;
+
   reDraw ();
 }
 
@@ -141,18 +146,23 @@ reDraw ()
 
         if (runawayFlag)
           {
-            const l = Math.sqrt (Math.pow (((kitaData[0].x - 214)
-                                            - (nizika.x - 150)), 2)
-                                 + Math.pow (((kitaData[0].y - 120)
-                                              - (nizika.y - 150)), 2));
-            const t = Math.atan2 ((kitaData[0].y - 120) - (nizika.y - 150),
-                                  (kitaData[0].x - 214) - (nizika.x - 150));
+            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 * Math.cos (t);
             nizika.y += nizikaVel * Math.sin (t);
           }
       });
 
+  if (runawayFlag)
+    {
+      changeAlpha (upperKita, kitaList[frame % 40],
+                   Math.max (runawayFrame - frame + 85, 0) * 3);
+      ctx.drawImage (upperKita, kitaData[0].x - 214, kitaData[0].y - 120);
+    }
+
   ++frame;
 }
 
@@ -179,9 +189,8 @@ replaceColorWithTransparent (canvas)
 
 
 function
-changeAlpha (canvas, alpha)
+changeAlpha (toCanvas, canvas, alpha)
 {
-  const toCanvas  = document.createElement('canvas');
   const toCtx = toCanvas.getContext ('2d');
 
   const ctx = canvas.getContext ('2d');
@@ -192,7 +201,5 @@ changeAlpha (canvas, alpha)
     pxs[i + 3] = alpha;
 
   toCtx.putImageData (imageData, 0, 0);
-
-  return toCanvas;
 }