|
- 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 _;
- });
-
- const upperKita = document.createElement ('canvas');
-
- const runawayGuitar = new Audio ('./assets/kita.wav');
-
- let canvasX;
- let canvasY;
- let frame = 0;
-
- let nizikaData = [];
- let kitaData = [];
-
- const nizikaVel = 5;
-
- let runawayFlag = false;
- let runawayFrame = 0;
-
- preprocess ();
-
- window.setInterval (() => reDraw (), 16);
-
-
- function
- preprocess ()
- {
- canvas.addEventListener ('click',
- function f (e)
- {
- this.removeEventListener ('click', f);
-
- kitaData.push ({x: e.clientX,
- y: e.clientY});
-
- runawayFlag = true;
- runawayFrame = frame;
-
- runawayGuitar.play ();
- });
-
- upperKita.width = 428;
- upperKita.height = 240;
-
- reDraw ();
- }
-
-
- function
- reDraw ()
- {
- canvasX = window.innerWidth;
- canvasY = window.innerHeight;
-
- canvas.width = canvasX;
- canvas.height = canvasY;
-
- ctx.drawImage (bg, 0, 0, canvasX, canvasY);
-
- if (!(runawayFlag))
- {
- nizikaData.push ({x: Math.random () * canvasX,
- y: Math.random () * canvasY});
- }
-
- if (nizikaData.length > 100)
- nizikaData.shift ();
-
- kitaData.forEach (
- function (kita)
- {
- ctx.drawImage (kitaList[frame % 40], kita.x - 214, kita.y - 120);
- });
-
- nizikaData.forEach (
- function (nizika)
- {
- 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);
-
- 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;
- }
-
-
- 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);
- }
-
-
- function
- changeAlpha (toCanvas, canvas, alpha)
- {
- 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);
- }
|