<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Misi Penjaga Nusantara: Operasi Flora Fauna</title>
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Quicksand:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #1b4332;
--secondary: #2d6a4f;
--accent: #ff9f1c;
--danger: #e63946;
--success: #52b788;
--light: #f8f9fa;
}
body {
font-family: 'Quicksand', sans-serif;
background-color: var(--primary);
color: #fff;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
#game-container {
width: 95%;
max-width: 850px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(15px);
border-radius: 24px;
padding: 25px;
box-shadow: 0 15px 40px rgba(0,0,0,0.6);
border: 2px solid rgba(255, 255, 255, 0.1);
text-align: center;
position: relative;
}
h1 { font-family: 'Fredoka One', cursive; color: var(--accent); font-size: 2.2em; margin-top: 0; text-shadow: 2px 2px 0px #000; }
.stats-bar {
display: flex;
justify-content: space-around;
background: rgba(0,0,0,0.4);
padding: 12px;
border-radius: 100px;
margin-bottom: 20px;
font-weight: bold;
border: 1px solid var(--secondary);
}
.timer-bar {
width: 100%;
height: 12px;
background: #222;
border-radius: 10px;
margin-bottom: 20px;
overflow: hidden;
border: 1px solid #444;
}
#timer-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent), #ff4d00);
width: 100%;
transition: width 1s linear;
}
.question-box {
font-size: 1.3em;
line-height: 1.4;
margin-bottom: 25px;
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
}
.options-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
button {
padding: 18px 15px;
border: none;
border-radius: 15px;
background: var(--light);
color: var(--primary);
font-weight: 700;
font-size: 1em;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 4px 0px #ccc;
}
button:hover { transform: translateY(-3px); background: var(--secondary); color: white; box-shadow: 0 7px 0px #1b4332; }
button:active { transform: translateY(2px); box-shadow: 0 1px 0px #1b4332; }
input[type="text"] {
padding: 15px;
border-radius: 12px;
border: 2px solid var(--accent);
width: 70%;
margin-bottom: 20px;
background: #fdf0d5;
font-size: 1.1em;
text-align: center;
font-family: inherit;
}
.hidden { display: none; }
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 90; }
#feedback-modal {
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
background: white; color: #333; padding: 30px; border-radius: 24px;
z-index: 100; width: 85%; max-width: 450px; text-align: center;
}
#fb-title { font-family: 'Fredoka One'; font-size: 1.8em; margin: 10px 0; }
.badge-icon { font-size: 4em; margin-bottom: 10px; }
@media (max-width: 600px) {
.options-grid { grid-template-columns: 1fr; }
h1 { font-size: 1.6em; }
}
</style>
</head>
<body>
<div id="game-container">
<div id="start-screen">
<div class="badge-icon">🕵️♂️</div>
<h1>MISI: PENJAGA NUSANTARA</h1>
<p>Identitasmu diperlukan untuk mengakses basis data biologi Indonesia.</p>
<input type="text" id="player-name" placeholder="Ketik Nama Kodemu..." maxlength="15"><br>
<p style="font-size: 0.9em; opacity: 0.8;">Tugasmu: Pulihkan 33 data dalam 30 detik per soal!</p>
<div style="display:flex; gap:10px; justify-content:center;">
<button onclick="startGame(5)">MODE PEMULA</button>
<button onclick="startGame(3)" style="background:var(--danger); color:white;">MODE AHLI</button>
</div>
</div>
<div id="quiz-screen" class="hidden">
<div class="stats-bar">
<span>🛡️ <span id="display-name"></span></span>
<span>⭐ <span id="score">0</span></span>
<span>⚡ <span id="hp">3</span></span>
<span>📁 <span id="q-count">1</span>/33</span>
</div>
<div class="timer-bar"><div id="timer-fill"></div></div>
<div class="question-box" id="question-text">Memproses data...</div>
<div class="options-grid" id="options-container"></div>
</div>
<div id="result-screen" class="hidden">
<h1 id="result-title">OPERASI SELESAI</h1>
<div id="badge-display" class="badge-icon">🏅</div>
<h2 id="final-rank">Gelar: -</h2>
<p id="result-text"></p>
<button onclick="location.reload()">RE-BOOT SISTEM</button>
</div>
</div>
<div id="feedback-overlay" class="overlay hidden"></div>
<div id="feedback-modal" class="hidden">
<div id="fb-icon" style="font-size: 3em;"></div>
<h2 id="fb-title"></h2>
<p id="fb-text" style="font-size: 1.1em; line-height: 1.4;"></p>
<button id="next-btn" onclick="closeFeedback()" style="width: 100%; margin-top: 15px;">LANJUTKAN MISI</button>
</div>
<script>
let audioCtx;
let bgmInterval;
// Fungsi inisialisasi Audio saat interaksi pertama
function initAudio() {
if (!audioCtx) {
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
}
if (audioCtx.state === 'suspended') {
audioCtx.resume();
}
}
function playNote(freq, type, dur, vol = 0.1) {
if(!audioCtx) return;
const osc = audioCtx.createOscillator();
const g = audioCtx.createGain();
osc.type = type;
osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
g.gain.setValueAtTime(vol, audioCtx.currentTime);
g.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + dur);
osc.connect(g); g.connect(audioCtx.destination);
osc.start(); osc.stop(audioCtx.currentTime + dur);
}
const sfx = {
correct: () => { playNote(523.25, 'sine', 0.5); setTimeout(()=>playNote(659.25, 'sine', 0.5), 100); },
wrong: () => { playNote(110, 'sawtooth', 0.4, 0.2); },
click: () => { playNote(800, 'square', 0.05, 0.05); },
ticking: () => { playNote(150, 'sine', 0.05, 0.05); },
start: () => { [261, 329, 392, 523].forEach((f, i) => setTimeout(()=>playNote(f, 'sine', 0.3), i*100)); },
// Background Beat (Mendebarkan)
heartbeat: () => {
playNote(60, 'sine', 0.2, 0.03);
setTimeout(() => playNote(55, 'sine', 0.3, 0.02), 150);
}
};
const questions = [
{ q: "Hutan hujan Sumatera sangat lebat. Jika pohon-pohon besar ditebang habis, apa nasib bunga Rafflesia?", o: ["Tumbuh lebih besar", "Punah karena kehilangan inang & keteduhan", "Pindah ke kebun warga", "Berubah jadi tanaman hias"], a: 1, fb: "Rafflesia adalah parasit yang butuh inang. Tanpa pohon besar, ia tak bisa hidup!" },
{ q: "Mengapa burung di Papua (Cendrawasih) punya warna cerah, sedangkan burung di Jawa cenderung tidak secerah itu?", o: ["Papua lebih panas", "Evolusi adaptasi di hutan yang sangat lebat", "Karena sering dicat manusia", "Efek terlalu banyak makan buah"], a: 1, fb: "Warna cerah membantu menarik pasangan di tengah rimbunnya hutan Papua yang gelap!" },
{ q: "Komodo hanya ada di NTT. Jika suhu bumi naik drastis (Pemanasan Global), bahaya apa yang paling mengancamnya?", o: ["Kulitnya menghitam", "Naiknya air laut menenggelamkan habitatnya", "Komodo jadi rajin berenang", "Populasi kambing meningkat"], a: 1, fb: "Habitat pulau kecil sangat rentan terhadap kenaikan permukaan laut!" },
{ q: "Garis Weber memisahkan tipe apa?", o: ["Peralihan & Australis", "Asiatis & Peralihan", "Sumatera & Jawa", "Indonesia & Malaysia"], a: 0, fb: "Garis Weber adalah batas imajiner di sebelah timur Sulawesi!" },
{ q: "Kenapa Kanguru pohon ada di Papua tapi tidak ada di Kalimantan?", o: ["Di Kalimantan terlalu banyak harimau", "Papua dulunya satu daratan dengan Australia", "Kanguru takut menyeberang laut", "Hanya kebetulan"], a: 1, fb: "Papua berada di Paparan Sahul yang dulu menyatu dengan Benua Australia!" },
{ q: "Apa dampak paling nyata jika Gajah Sumatera kehilangan jalur migrasinya akibat perkebunan sawit?", o: ["Gajah jadi kurus", "Konflik gajah masuk ke pemukiman warga", "Gajah berteman dengan petani", "Gajah pindah ke Kalimantan"], a: 1, fb: "Gajah memiliki ingatan jalur migrasi yang kuat!" },
{ q: "Jika kamu menemukan hewan berkantung, berambut tipis, dan bertelur, kemungkinan besar itu fauna tipe?", o: ["Asiatis", "Peralihan", "Australis", "Eropa"], a: 2, fb: "Hewan berkantung adalah ciri khas zona Australis!" },
{ q: "Anoa dan Babi Rusa adalah hewan unik yang hanya ada di Sulawesi. Ini membuktikan bahwa Sulawesi adalah zona...", o: ["Eksklusif", "Peralihan (Endemik)", "Benua Asia", "Benua Australia"], a: 1, fb: "Sulawesi adalah zona 'laboratorium alam' dengan banyak hewan unik!" }
];
for(let i=9; i<=33; i++) {
questions.push({
q: `Analisis Misi #${i}: Mengapa pelestarian Flora/Fauna harus melibatkan penduduk lokal?`,
o: ["Biar pemerintah hemat", "Warga lokal paling tahu & menjaga alam sehari-hari", "Warga lokal ingin dibayar", "Supaya warga tidak demo"],
a: 1,
fb: "Kearifan lokal adalah kunci utama perlindungan alam!"
});
}
let currentQ = 0, score = 0, hp = 3, timer, timeLeft = 30, playerName = "";
function startGame(initialHp) {
initAudio(); // Aktifkan audio konteks
playerName = document.getElementById('player-name').value.trim() || "Agen X";
hp = initialHp;
document.getElementById('display-name').innerText = playerName;
document.getElementById('hp').innerText = hp;
sfx.start();
// Start Background Beat
if(bgmInterval) clearInterval(bgmInterval);
bgmInterval = setInterval(() => sfx.heartbeat(), 1200);
document.getElementById('start-screen').classList.add('hidden');
document.getElementById('quiz-screen').classList.remove('hidden');
showQuestion();
}
function showQuestion() {
if (currentQ >= 33 || hp <= 0) return endGame();
const q = questions[currentQ];
document.getElementById('q-count').innerText = currentQ + 1;
document.getElementById('question-text').innerText = q.q;
const container = document.getElementById('options-container');
container.innerHTML = '';
q.o.forEach((opt, i) => {
const btn = document.createElement('button');
btn.innerText = opt;
btn.onclick = () => { sfx.click(); checkAnswer(i); };
container.appendChild(btn);
});
startTimer();
}
function startTimer() {
timeLeft = 30;
document.getElementById('timer-fill').style.width = '100%';
clearInterval(timer);
timer = setInterval(() => {
timeLeft--;
document.getElementById('timer-fill').style.width = (timeLeft/30*100) + '%';
if(timeLeft < 5) sfx.ticking();
if(timeLeft <= 0) { clearInterval(timer); checkAnswer(-1); }
}, 1000);
}
function checkAnswer(idx) {
clearInterval(timer);
const q = questions[currentQ];
const isCorrect = idx === q.a;
const modal = document.getElementById('feedback-modal');
const overlay = document.getElementById('feedback-overlay');
const title = document.getElementById('fb-title');
const text = document.getElementById('fb-text');
const icon = document.getElementById('fb-icon');
if(isCorrect) {
score += (10 + timeLeft);
sfx.correct();
title.innerText = "DATA TERVERIFIKASI!";
title.style.color = "var(--success)";
icon.innerText = "✅";
text.innerText = q.fb;
} else {
hp--;
sfx.wrong();
title.innerText = idx === -1 ? "WAKTU HABIS!" : "SISTEM ERROR!";
title.style.color = "var(--danger)";
icon.innerText = "⚠️";
text.innerText = idx === -1 ? "Kecepatanmu harus ditingkatkan, Agen!" : "Jawaban kurang tepat. Habitat terancam kabut lupa!";
}
document.getElementById('score').innerText = score;
document.getElementById('hp').innerText = hp;
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
}
function closeFeedback() {
document.getElementById('feedback-modal').classList.add('hidden');
document.getElementById('feedback-overlay').classList.add('hidden');
currentQ++;
showQuestion();
}
function endGame() {
clearInterval(bgmInterval);
document.getElementById('quiz-screen').classList.add('hidden');
document.getElementById('result-screen').classList.remove('hidden');
const rank = document.getElementById('final-rank');
const badge = document.getElementById('badge-display');
const desc = document.getElementById('result-text');
if(hp <= 0) {
rank.innerText = "Gelar: Agen Tereliminasi";
badge.innerText = "🥀";
desc.innerText = `Maaf ${playerName}, Kabut Lupa memenangkan pertempuran. Skor: ${score}.`;
} else if(score > 600) {
rank.innerText = "Gelar: Penjaga Utama Nusantara";
badge.innerText = "👑";
desc.innerText = `Luar Biasa ${playerName}! Seluruh 33 data telah diamankan. Skor: ${score}`;
} else {
rank.innerText = "Gelar: Agen Konservasi";
badge.innerText = "🌿";
desc.innerText = `Kerja bagus ${playerName}. Skor: ${score}`;
}
}
</script>
</body>
</html>