<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ZAKOS消耗部隊</title>
<style>
.flash {
animation: flash 0.8s infinite;
}
@keyframes flash {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div id="app">
<button id="cultivate" onclick="startRound1()">ZAKOS補充</button>
</div>
<script>
const app = document.querySelector('#app');
const cultivateBtn = document.querySelector('#cultivate');
const CANDIDATES_A1 = ['アキ', 'マユ', 'リエ', 'ナオ', 'ミホ'];
const CANDIDATES_A2 = ['切れ長の目をした', '美しい瞳をした', '整った鼻を持つ', '口元が魅力的な', '長いまつげが印象的な'];
const CANDIDATES_A3 = ['思いやりが強い', '責任感がある', '勇気がある', 'やさしさを持つ', '行動的な'];
const CANDIDATES_A4 = ['ボブカット', 'ロングヘア', 'ショートヘア', 'ポニーテール', 'ツインテール'];
const CANDIDATES_A5 = ['黒のレオタード', 'ロングブーツ', '網タイツ', '手袋', 'メガネ'];
const CANDIDATES_A6 = ['スレンダーな体型', '豊満なバスト', 'くびれのあるウエスト', '美しい脚', '健康的な肌'];
let zako = {
name: '',
a2: '',
a3: '',
a4: '',
a5: '',
a6: '',
hp: 10,
mp: 5,
sp: 10,
phrase: ''
};
function startRound1() {
app.innerHTML = '<p class="flash">ZAKOSを培養中…</p>';
setTimeout(() => {
zako.name = CANDIDATES_A1[Math.floor(Math.random() * CANDIDATES_A1.length)];
zako.a2 = CANDIDATES_A2[Math.floor(Math.random() * CANDIDATES_A2.length)];
zako.a3 = CANDIDATES_A3[Math.floor(Math.random() * CANDIDATES_A3.length)];
zako.a4 = CANDIDATES_A4[Math.floor(Math.random() * CANDIDATES_A4.length)];
zako.a5 = CANDIDATES_A5[Math.floor(Math.random() * CANDIDATES_A5.length)];
zako.a6 = CANDIDATES_A6[Math.floor(Math.random() * CANDIDATES_A6.length)];
zako.phrase = '新たなZAKOが誕生した';
app.innerHTML = `<p>${zako.phrase}</p>`;
setTimeout(() => {
startRound2();
}, 3000);
}, 3000);
}
function startRound2() {
let a1Index = Math.floor(Math.random() * CANDIDATES_A1.length);
app.innerHTML += `
<p>${(a1Index + 1)}. 名前：${zako.name}</p>
<p> 顔立ち：${zako.a2}</p>
<p> 性格：${zako.a3}</p>
<p> 髪型：${zako.a4}</p>
<p> 装備：${zako.a5}</p>
<p> 体つき：${zako.a6}</p>
<button id="deploy" onclick="startRound3()">配備</button>
`;
}
function startRound3() {
document.querySelector('#deploy').remove();
app.innerHTML += '<p>ZAKOを作戦地域に投入します</p>';
setTimeout(() => {
if (zako.mp > 0 && zako.sp > 0) {
let randomIndex = Math.floor(Math.random() * 5);
let spDecrease = 0;
let mpDecrease = 0;
let hpDecrease = 0;
let phraseCandidates = [
`${zako.name}は見張りをしている...`,
`${zako.name}は偵察に出ている...`,
`${zako.name}は囮になっている...`,
`${zako.name}は交戦中！！`,
`${zako.name}は拘束されて尋問を受けた…`
];
switch (randomIndex) {
case 0:
zako.sp -= 1;
spDecrease = 1;
break;
case 1:
zako.mp -= 1;
mpDecrease = 1;
break;
case 2:
zako.sp -= 2;
spDecrease = 2;
zako.mp -= 4;
mpDecrease = 4;
zako.hp -= 4;
hpDecrease = 4;
break;
case 3:
zako.sp -= 5;
spDecrease = 5;
zako.mp -= 3;
mpDecrease = 3;
zako.hp -= 8;
hpDecrease = 8;
break;
case 4:
zako.sp -= 10;
spDecrease = 10;
zako.mp -= 1;
mpDecrease = 1;
zako.hp -= 6;
hpDecrease = 6;
break;
}
zako.phrase = phraseCandidates[randomIndex];
app.innerHTML += `<p>${zako.phrase}</p>`;
app.innerHTML += `<p>HP: ${zako.hp}</p>`;
setTimeout(() => {
startRound4(spDecrease, mpDecrease, hpDecrease);
}, 3000);
} else {
startRound6();
}
}, 3000);
}
function startRound4(spDecrease, mpDecrease, hpDecrease) {
if (zako.mp <= 0) {
zako.phrase = `${zako.name}は食料にありついた`;
zako.mp = 5;
} else if (zako.sp <= 0) {
zako.phrase = `${zako.name}は仮眠している...`;
zako.sp = 10;
} else {
let randomIndex = Math.floor(Math.random() * 5);
let phraseCandidates = [
`${zako.name}：「うーん、ちょっと眠いかな」`,
`${zako.name}：「こんな場所に誰もいないなぁ」`,
`${zako.name}：「この作戦って何でしたっけ？」`,
`${zako.name}：「何かいい派遣先ないかなぁ」`,
`${zako.name}：「まだまだ行動できるぞ！」`
];
zako.phrase = phraseCandidates[randomIndex];
}
app.innerHTML += `<p>${zako.phrase}</p>`;
zako.sp -= spDecrease;
zako.mp -= mpDecrease;
zako.hp -= hpDecrease;
app.innerHTML += `<p>HP: ${zako.hp}</p>`;
setTimeout(() => {
if (zako.hp > 0) {
startRound3();
} else {
startRound5();
}
}, 3000);
}
function startRound5() {
let c1Candidates = [
`${zako.name}：「ああ…もうだめかな…」`,
`${zako.name}：「この場所は誰も守れなかった…」`,
`${zako.name}：「ぐああ…無念だ…」`
];
let c2 = `${zako.name}の反応が消失しました…。新たなZAKOSを補充してください`;
app.innerHTML = `
<p>${c1Candidates[Math.floor(Math.random() * c1Candidates.length)]}</p>
<p>${c2}</p>
<button onclick="startRound1()">再挑戦</button>
`;
}
function startRound6() {
app.innerHTML += '<p>ZAKOS補充</p>';
setTimeout(() => {
startRound1();
}, 3000);
}
</script>
</body>
</html>
