diff --git a/scripts/main.js b/scripts/main.js index 19739d2..dc329b9 100644 --- a/scripts/main.js +++ b/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;