miteruzo
/
nizika
0
0
Fork 0
Code Issues 5 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Merge pull request 'NIZIKA_DEV-001' (#2) from NIZIKA_DEV-001 into develop/main 

Reviewed-on: http://miteruzo.ml:3000/miteruzo/nizika/pulls/2
pull/5/head
みてるぞ 1 year ago
parent
249a665557 7db6a857ea
commit
1328148f01
8 changed files with 119 additions and 14 deletions
Split 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
/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">
<head>
<meta charset="utf8" />
<link rel="stylesheet" href="./styles/index.css" />
<script src="./scripts/main.js" defer="defer"></script>
<title>伊地知ニジカ - 鑑賞編</title>
<title>ニジカもんすたぁ!! - 入口</title>
</head>

<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 ctx = canvas.getContext ('2d');

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

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

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

img.onload = (function ()
img.onload = (
function ()
{
ctx.drawImage (img, 0, 0);
});
@@ -21,9 +23,10 @@ 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 _ = document.createElement ('canvas');
const img = new Image ();

_.width = 300;
@@ -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,9 +46,10 @@ 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 _ = document.createElement ('canvas');
const img = new Image ();

_.width = 428;
@@ -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);
});
@@ -62,11 +68,21 @@ const kitaList = Array (40).fill ().map (function (__, i)
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 ();

@@ -76,6 +92,23 @@ 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 ();
}

@@ -91,17 +124,45 @@ 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,
y: Math.random () * canvasY});
}

if (nizikaData.length > 100)
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;
}

@@ -126,3 +187,19 @@ replaceColorWithTransparent (canvas)
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