ZAKOS Patrol Mission 🚀👾✨
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ZAKOS Patrol Mission 🚀👾✨</title>
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
@keyframes shake {
0% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
50% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
100% { transform: rotate(0deg); }
}
.fade-in {
animation: fadeIn 1s ease-in-out;
}
.bounce {
animation: bounce 1s infinite;
}
.shake {
animation: shake 0.5s;
}
</style>
</head>
<body>
<div style="max-width:400px; max-height:400px; width:100%; height:100%; margin: auto; padding: 10px; box-sizing: border-box; font-family: Arial, sans-serif; background: #f0f8ff; border: 2px solid #add8e6; border-radius: 10px; overflow: hidden;">
<div id="header" style="text-align:center; font-size:24px; margin-bottom:10px;">
ZAKOS Patrol Mission 🚀👾✨
</div>
<div id="zakos-container" style="display:flex; justify-content:space-around; margin-bottom:10px;">
<!-- ZAKO Profiles -->
</div>
<div id="action" style="font-size:14px; margin-bottom:10px;">
<!-- Actions -->
</div>
<div id="conversation" style="font-size:14px; margin-bottom:10px;">
<!-- Conversations -->
</div>
<div id="event" style="font-size:14px; margin-bottom:10px;">
<!-- Events like Encounter or Security Reports -->
</div>
<div style="text-align:center;">
<button id="next-turn" style="padding:10px 20px; font-size:16px; cursor:pointer; border:none; border-radius:5px; background-color:#ff69b4; color:white;" onclick="nextTurn()">次のターン ➡️</button>
</div>
</div>
<script>
const zakosData = {
names: ["サクラ", "ミユキ", "アヤナ", "リナ", "ユリ", "ナナ", "カオリ", "マリ", "エリ", "ナツキ"],
personalities: ["元気いっぱい😊", "おっとり😌", "クール😎", "お茶目😜", "しっかり者💪"],
colors: ["赤", "青", "緑", "紫", "ピンク", "黄色"],
actions: [
"🔭 任務を遂行中！",
"🚶♀️ 散歩している。",
"📡 通信をチェック中。",
"🛠️ 装備を整えている。",
"📚 作戦会議をしている。"
],
conversations: [
"「今日も頑張ろうね！💖」",
"「あのエリアは気をつけてね！🔍」",
"「一緒に行動しよう！👯♀️」",
"「任務完了！やったー！🎉」",
"「疲れた～😴」"
],
encounterMessages: [
"⚠️ エンカウンターが現れた！⚠️",
"👾 不審な動きが！👾"
],
deathDescriptions: [
{
scream: "「ぎゃん！…」",
face: "美人の顔立ちが💔",
hair: "長いツインテールがなびく💁♀️",
body: "剥き出しの腰が見える…",
posture: "脱力して地面に倒れ込む…"
},
{
scream: "「ふぐぅ…」",
face: "可愛い笑顔が消えた😢",
hair: "ショートヘアが乱れる💇♀️",
body: "胸が見えるレオタード💖",
posture: "ゆっくりと息絶える姿…"
},
{
scream: "「やばい…」",
face: "キュートな目が閉じる👀",
hair: "ポニーテールが乱れる🐴",
body: "剥き出しの胸元✨",
posture: "地面に倒れ、動かない…"
}
],
securityReports: [
"📝 **警備報告書** 📝\n本日の警備は順調に進行。",
"📝 **警備報告書** 📝\n小さな異常なし。全員元気。",
"📝 **警備報告書** 📝\n若干の緊張感あり。警戒を続ける。",
"📝 **警備報告書** 📝\n特記事項なし。平穏な一日。"
]
};
let zakos = [];
let turn = 1;
let autoTurnTimer;
function getRandomElement(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
function createZAKO() {
return {
name: getRandomElement(zakosData.names),
age: Math.floor(Math.random() * 10) + 15,
personality: getRandomElement(zakosData.personalities),
color: getRandomElement(zakosData.colors),
health: 1
};
}
function initializeZAKOs() {
zakos = [];
for(let i=0; i<3; i++) {
zakos.push(createZAKO());
}
displayZAKOs();
}
function displayZAKOs() {
const container = document.getElementById('zakos-container');
container.innerHTML = '';
zakos.forEach((zak, index) => {
const zakDiv = document.createElement('div');
zakDiv.style.border = "1px solid #ccc";
zakDiv.style.borderRadius = "5px";
zakDiv.style.padding = "5px";
zakDiv.style.textAlign = "center";
zakDiv.style.width = "30%";
zakDiv.classList.add('fade-in');
zakDiv.innerHTML = `
<div style="font-size:18px;">${zak.name} 🎀</div>
<div>年齢: ${zak.age}</div>
<div>性格: ${zak.personality}</div>
<div>レオタード色: ${zak.color}</div>
<div>💖 体力: ${zak.health}</div>
`;
container.appendChild(zakDiv);
});
}
function processTurn() {
let eventOccurred = false;
let eventHTML = '';
// Actions
let actionText = '';
zakos.forEach(zak => {
if(zak.health > 0){
actionText += `<div>${zak.name} ${getRandomElement(zakosData.actions)}</div>`;
}
});
document.getElementById('action').innerHTML = actionText;
// Conversations
let convoText = '';
zakos.forEach(zak => {
if(zak.health > 0){
convoText += `<div>${zak.name}: ${getRandomElement(zakosData.conversations)}</div>`;
}
});
document.getElementById('conversation').innerHTML = convoText;
// Encounter
if(Math.random() < 0.2){
eventOccurred = true;
const encounterMsg = getRandomElement(zakosData.encounterMessages);
eventHTML += `<div class="shake">${encounterMsg}</div>`;
// Choose a random ZAKO to be affected
const aliveZakos = zakos.filter(z => z.health > 0);
if(aliveZakos.length > 0){
const affectedZako = getRandomElement(aliveZakos);
affectedZako.health = 0;
// Display death description
const deathDesc = getRandomElement(zakosData.deathDescriptions);
eventHTML += `
<div>${deathDesc.scream}</div>
<div>${deathDesc.face}</div>
<div>${deathDesc.hair}</div>
<div>${deathDesc.body}</div>
<div>${deathDesc.posture}</div>
`;
setTimeout(() => {
replaceZAKO(affectedZako);
document.getElementById('event').innerHTML = '';
displayZAKOs();
}, 10000);
}
}
// Security Report
if(turn %10 ===0){
const report = getRandomElement(zakosData.securityReports);
eventHTML += `<div>${report}</div>`;
}
document.getElementById('event').innerHTML += eventHTML;
// Increment turn
turn++;
}
function replaceZAKO(zako) {
const index = zakos.indexOf(zako);
if(index !== -1){
zakos[index] = createZAKO();
zakos[index].health = 1;
}
}
function nextTurn() {
clearTimeout(autoTurnTimer);
processTurn();
autoTurnTimer = setTimeout(nextTurn, 20000);
}
window.onload = function(){
initializeZAKOs();
autoTurnTimer = setTimeout(nextTurn, 20000);
}
</script>
</body>
</html>
```