きたちゃん追っかけ対応

scripts/main.js

@@ -77,7 +77,7 @@ let frame = 0;
 let nizikaData = [];
 let kitaData = [];
 
-const nizikaVel = 0.1;
+const nizikaVel = 5;
 
 let runawayFlag = false;
 let runawayFrame = 0;
@@ -95,8 +95,8 @@ preprocess ()
       {
         this.removeEventListener ('click', f);
 
-        kitaData.push ({x: e.clientX - 214,
-                        y: e.clientY - 120});
+        kitaData.push ({x: e.clientX,
+                        y: e.clientY});
 
         runawayFlag = true;
         runawayFrame = frame;
@@ -121,8 +121,8 @@ reDraw ()
 
   if (!(runawayFlag))
     {
-      nizikaData.push ({x: Math.random () * canvasX - 150,
-                        y: Math.random () * canvasY - 150});
+      nizikaData.push ({x: Math.random () * canvasX,
+                        y: Math.random () * canvasY});
     }
 
   if (nizikaData.length > 100)
@@ -131,23 +131,25 @@ reDraw ()
   kitaData.forEach (
       function (kita)
       {
-        ctx.drawImage (kitaList[frame % 40], kita.x, kita.y);
+        ctx.drawImage (kitaList[frame % 40], kita.x - 214, kita.y - 120);
       });
 
   nizikaData.forEach (
       function (nizika)
       {
-        ctx.drawImage (nizikaList[frame % 24], nizika.x, nizika.y);
+        ctx.drawImage (nizikaList[frame % 24], nizika.x - 150, nizika.y - 150);
 
         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);
+            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));
 
-            nizika.x += nizikaVel * cos (t);
-            nizika.y += nizikaVel * sin (t);
+            nizika.x += nizikaVel * Math.cos (t);
+            nizika.y += nizikaVel * Math.sin (t);
           }
       });
 
@@ -175,3 +177,22 @@ replaceColorWithTransparent (canvas)
   context.putImageData (imageData, 0, 0);
 }
 
+
+function
+changeAlpha (canvas, alpha)
+{
+  const toCanvas  = document.createElement('canvas');
+  const toCtx = toCanvas.getContext ('2d');
+
+  const ctx = canvas.getContext ('2d');
+  const imageData = ctx.getImageData (0, 0, canvas.width, canvas.height);
+  const pxs = imageData.data;
+
+  for (let i = 0; i < pxs.length; i += 4)
+    pxs[i + 3] = alpha;
+
+  toCtx.putImageData (imageData, 0, 0);
+
+  return toCanvas;
+}
+