```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>製造部門ZAKOSの評価シミュレータ</title>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-20px); }
60% { transform: translateY(-10px); }
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.bounce {
animation: bounce 1s;
}
.shake {
animation: shake 0.5s;
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; border: 2px solid #000; margin: auto; padding: 10px; box-sizing: border-box; overflow-y: auto; background-color: #f0f8ff;">
<div id="content" style="font-family: 'Arial', sans-serif; font-size: 14px; color: #333;"></div>
<div id="controls" style="margin-top: 10px;">
<input type="button" id="startBtn" value="評価開始 🚀" style="padding: 10px; font-size: 16px; cursor: pointer; border: none; border-radius: 5px; background-color: #4CAF50; color: white;">
</div>
</div>
<script>
const content = document.getElementById('content');
const startBtn = document.getElementById('startBtn');
let fatigue = 0;
let isAttacked = false;
const missions = [
"🌟 ZAKOは培養装置の維持管理を開始した。慎重に装置の各パートをチェックし、異常がないか確認する。",
"🔧 ZAKOは培養装置でのZAKOSの育成に取り組んだ。専用の培養液を準備し、適切な環境を整える。",
"🔍 ZAKOは育成したZAKOSの品質チェックを行った。細部にわたって検査を実施し、基準を満たしていることを確認する。"
];
const zakos = [
{
型式: "ZK-Alpha",
名前: "さくら",
顔立と髪型: "大きな瞳とショートカットの髪型が特徴",
容姿: "スリムで活発な体型",
性格: "明るく社交的"
},
{
型式: "ZK-Beta",
名前: "みずき",
顔立と髪型: "優しい表情とロングヘア",
容姿: "柔らかな曲線を持つ",
性格: "穏やかで思いやり深い"
},
{
型式: "ZK-Gamma",
名前: "りん",
顔立と髪型: "鋭い目つきとポニーテール",
容姿: "引き締まった体格",
性格: "冷静沈着で分析的"
}
];
const reuseTexts = [
"♻️ 不良品の再利用プロセスが開始された。ZAKOは新たな役割に適応するためのトレーニングを受けている。",
"🔄 ZAKOの不良品が慰安要員として再教育されている。専門の技術を学び、効率的に訓練が進められる。",
"🛠️ 抱き枕ZAKOの製造が進行中。希望者への配布準備が整えられている。"
];
const privateTimes = [
"☕ ZAKOS同士で楽しい会話が繰り広げられ、リラックスしたひとときを過ごす。",
"🚿 就寝前に爽やかなシャワーを浴び、疲れを癒やすZAKOたち。",
"💖 ZAKOがボディーソープを使って身体を丁寧に洗い、疲労度がわずかに改善される。",
"💞 一部のZAKOは抱き枕ZAKOを希望し、疲労度が少し改善される。"
];
const attackMessages = [
"⚠️ 基地が襲撃を受けた!ZAKOは迎撃に向かった!",
"💥 基地への不審な攻撃が発生!ZAKOが防衛を開始!",
"🚨 緊急事態!基地が攻撃され、ZAKOが立ち向かう!"
];
const fightMessages = [
"🥊 ZAKOは敵と激しく戦ったが、無傷で退けた!",
"⚔️ 激戦の末、ZAKOは怪我を負ったが、勝利を収めた!",
"💪 ZAKOは勇敢に戦ったものの、倒れてしまった…。新たなZAKOを生産する必要がある。"
];
startBtn.addEventListener('click', () => {
startBtn.style.display = 'none';
addText("🎉 評価が開始されました!ZAKOS基地内の活動を観察します。");
startTurn();
});
function addText(text) {
const p = document.createElement('p');
p.innerHTML = text;
p.style.margin = '5px 0';
content.appendChild(p);
content.scrollTop = content.scrollHeight;
}
function startTurn() {
// Turn 1
setTimeout(() => {
missions.forEach(mission => {
addText(mission);
fatigue +=1;
});
checkFatigue();
// Turn 2
displayNewZako();
}, 1000);
// Turn 4 starts after Turn 2
setInterval(() => {
updatePrivateTime();
randomAttack();
}, 10000);
}
function displayNewZako() {
const zako = zakos[Math.floor(Math.random() * zakos.length)];
addText("✨ 新たなZAKOが誕生した! 🌸");
addText(`型式: ${zako.型式} 🛠️`);
addText(`名前: ${zako.名前} 👩`);
addText(`顔立と髪型: ${zako.顔立と髪型} 💇♀️`);
addText(`容姿: ${zako.容姿} 🕺`);
addText(`性格: ${zako.性格} 😊`);
addText(`疲労度: ${fatigue} 😴`);
}
function updatePrivateTime() {
const text = privateTimes[Math.floor(Math.random() * privateTimes.length)];
addText(text);
// Improve fatigue
if (text.includes("疲労度がわずかに改善")) {
fatigue = Math.max(0, fatigue -1);
} else if (text.includes("疲労度が大幅に改善")) {
fatigue = Math.max(0, fatigue -5);
} else if (text.includes("疲労度が少し改善")) {
fatigue = Math.max(0, fatigue -2);
}
addText(`疲労度: ${fatigue} 😌`);
checkFatigue();
}
function randomAttack() {
if (Math.random() < 0.05) {
const attack = attackMessages[Math.floor(Math.random() * attackMessages.length)];
addText(attack);
addText("⚔️ ZAKOは迎撃のため戦います!");
setTimeout(() => {
const fightResult = fightMessages[Math.floor(Math.random() * fightMessages.length)];
addText(fightResult);
if (fightResult.includes("倒れてしまった")) {
fatigue = 0;
displayNewZako();
}
}, 2000);
}
}
function checkFatigue() {
if (fatigue > 20) {
addText("💀 疲労度が限界を超え、ZAKOが倒れてしまいました...");
fatigue = 0;
displayNewZako();
}
}
// Click animations
content.addEventListener('click', () => {
content.classList.add('bounce');
setTimeout(() => {
content.classList.remove('bounce');
}, 1000);
});
</script>
</body>
</html>
```