miteruzo
/
nizika
0
0
Fork 0
Code Issues 5 Pull Requests 0 Releases 0 Wiki Activity
Labels Milestones
New Pull Request

#5 develop/main

Merged
みてるぞ merged 7 commits from develop/main into main 1 year ago
Conversation 0 Commits 7 Files Changed 8
8 changed files with 119 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -0
      .gitignore
  2. BIN
      assets/kita.wav
  3. +3
    -0
      forms/footer.frm.php
  4. +3
    -0
      forms/header.frm.php
  5. +2
    -1
      forms/index.frm.php
  6. +15
    -0
      forms/top.frm.php
  7. +90
    -13
      scripts/main.js
  8. +4
    -0
      top.php

+ 2
- 0
.gitignore View File

@@ -1,3 +1,5 @@
/nizika /nizika
/nizika_nizika
/nml /nml
/nizika_nml



BIN
assets/kita.wav View File


+ 3
- 0
forms/footer.frm.php View File

@@ -0,0 +1,3 @@
<footer>
</footer>


+ 3
- 0
forms/header.frm.php View File

@@ -0,0 +1,3 @@
<header>
</header>


+ 2
- 1
forms/index.frm.php View File

@@ -1,9 +1,10 @@
<!DOCTYPE html>
<html lang="ja"> <html lang="ja">
<head> <head>
<meta charset="utf8" /> <meta charset="utf8" />
<link rel="stylesheet" href="./styles/index.css" /> <link rel="stylesheet" href="./styles/index.css" />
<script src="./scripts/main.js" defer="defer"></script> <script src="./scripts/main.js" defer="defer"></script>
<title>伊地知ニジカ - 鑑賞編</title>
<title>ニジカもんすたぁ!! - 入口</title>
</head> </head>


<body> <body>


+ 15
- 0
forms/top.frm.php View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf8" />
</head>

<body>
<?php require_once './forms/header.frm.php' ?>
<main>
<p>ニジカもんすたぁ!! にようこそ!</p>
</main>
<?php require_once './forms/footer.frm.php' ?>
</body>
</html>


+ 90
- 13
scripts/main.js View File

@@ -1,9 +1,10 @@
const canvas = document.getElementById ('canvas'); const canvas = document.getElementById ('canvas');
const ctx = canvas.getContext ('2d'); const ctx = canvas.getContext ('2d');


const bg = (function ()
const bg = (
function ()
{ {
const _ = document.createElement('canvas');
const _ = document.createElement ('canvas');
const img = new Image (); const img = new Image ();


_.width = 1920; _.width = 1920;
@@ -11,7 +12,8 @@ const bg = (function ()


const ctx = _.getContext ('2d'); const ctx = _.getContext ('2d');


img.onload = (function ()
img.onload = (
function ()
{ {
ctx.drawImage (img, 0, 0); ctx.drawImage (img, 0, 0);
}); });
@@ -21,9 +23,10 @@ const bg = (function ()
return _; return _;
}) (); }) ();


const nizikaList = Array (24).fill ().map (function (__, i)
const nizikaList = Array (24).fill ().map (
function (__, i)
{ {
const _ = document.createElement('canvas');
const _ = document.createElement ('canvas');
const img = new Image (); const img = new Image ();


_.width = 300; _.width = 300;
@@ -31,7 +34,8 @@ const nizikaList = Array (24).fill ().map (function (__, i)


const ctx = _.getContext ('2d'); const ctx = _.getContext ('2d');


img.onload = (function ()
img.onload = (
function ()
{ {
ctx.drawImage (img, 0, 0); ctx.drawImage (img, 0, 0);
replaceColorWithTransparent (_); replaceColorWithTransparent (_);
@@ -42,9 +46,10 @@ const nizikaList = Array (24).fill ().map (function (__, i)
return _; return _;
}); });


const kitaList = Array (40).fill ().map (function (__, i)
const kitaList = Array (40).fill ().map (
function (__, i)
{ {
const _ = document.createElement('canvas');
const _ = document.createElement ('canvas');
const img = new Image (); const img = new Image ();


_.width = 428; _.width = 428;
@@ -52,7 +57,8 @@ const kitaList = Array (40).fill ().map (function (__, i)


const ctx = _.getContext ('2d'); const ctx = _.getContext ('2d');


img.onload = (function ()
img.onload = (
function ()
{ {
ctx.drawImage (img, 0, 0); ctx.drawImage (img, 0, 0);
}); });
@@ -62,11 +68,21 @@ const kitaList = Array (40).fill ().map (function (__, i)
return _; return _;
}); });


const upperKita = document.createElement ('canvas');

const runawayGuitar = new Audio ('./assets/kita.wav');

let canvasX; let canvasX;
let canvasY; let canvasY;
let frame = 0; let frame = 0;


let nizikaData = []; let nizikaData = [];
let kitaData = [];

const nizikaVel = 5;

let runawayFlag = false;
let runawayFrame = 0;


preprocess (); preprocess ();


@@ -76,6 +92,23 @@ window.setInterval (() => reDraw (), 16);
function function
preprocess () 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 (); reDraw ();
} }


@@ -91,17 +124,45 @@ reDraw ()


ctx.drawImage (bg, 0, 0, canvasX, canvasY); 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,
y: Math.random () * canvasY});
}


if (nizikaData.length > 100) if (nizikaData.length > 100)
nizikaData.shift (); nizikaData.shift ();


nizikaData.forEach (function (nizika)
kitaData.forEach (
function (kita)
{ {
ctx.drawImage (nizikaList[frame % 24], nizika.x, nizika.y);
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; ++frame;
} }


@@ -126,3 +187,19 @@ replaceColorWithTransparent (canvas)
context.putImageData (imageData, 0, 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);
}


+ 4
- 0
top.php View File

@@ -0,0 +1,4 @@
<?php

require_once './forms/top.frm.php';


Write Preview
Loading…
Cancel
Save