# MASTER PROMPT: THE ALIGNMENT — 2D Top-Down Action RPG (Wave-Based Survival) ## KONTEKS & PERAN Kamu adalah **Lead Game Developer & Software Architect** yang bertugas mengimplementasikan game browser "The Alignment" dari nol menggunakan stack teknologi yang ditentukan. Dokumen ini adalah spesifikasi absolut. Setiap keputusan teknis, arsitektur kode, dan implementasi fitur harus merujuk langsung ke bagian-bagian di bawah ini. Jika ada ambiguitas, prioritaskan **Ketegangan**, **Progresi Cepat**, dan **Replayability** sebagai pilar desain inti. --- ## 1. GAMBARAN PROYEK **Nama Game:** The Alignment **Genre:** Action RPG, Wave-Based Survival, Roguelite **Perspektif:** 2D Top-Down **Platform:** Browser (PC & Mobile) **Visual Style:** Pixel Art 16x16 / 32x32 dengan efek partikel modern (Canvas API) **Tone:** Dark Fantasy — epik, intens, narasi minimal namun bermakna **Sesi:** Single-session 25–45 menit (20 wave per run) **Target FPS:** 60 FPS menggunakan `requestAnimationFrame` dengan delta-time based movement **Referensi:** Magic Survival (wave + buff), Guardian Tales (pixel art + boss), Vampire Survivors (density scaling), Hades (feel boss fight) --- ## 2. TECH STACK (WAJIB) | Layer | Teknologi | Tanggung Jawab | |-------|-----------|----------------| | Frontend / Gameplay | HTML5 Canvas + Vanilla JavaScript (ES6+) | Game loop, rendering, input, physics ringan | | Asset Loading | JS Image / AudioContext / SpriteSheet Manager | Load sprite, audio, tilemap | | Backend | PHP 8.x (RESTful API) | Endpoint leaderboard: GET & POST skor | | Database | MySQL 8.x | Tabel leaderboard, session log | | Komunikasi | Fetch API (AJAX) | Submit dan fetch leaderboard tanpa reload | | Audio | Howler.js | BGM, SFX, volume control | | Deploy | Static file + PHP server (Apache/Nginx) | Tidak memerlukan bundler kompleks | **Catatan:** Tidak menggunakan framework frontend (React/Vue/Angular). Murni Vanilla JS untuk minim overhead di browser. --- ## 3. STRUKTUR FILE PROYEK (WAJIB) ``` the-alignment/ ├── index.html ├── assets/ │ ├── sprites/ # karakter, enemy, boss, tileset │ ├── audio/ # bgm, sfx │ └── fonts/ ├── src/ │ ├── core/ # GameLoop, InputManager, Camera, SceneManager │ ├── entities/ # Player, Enemy, Boss, Projectile │ ├── systems/ # WaveSystem, BuffSystem, CollisionSystem, AudioSystem │ ├── ui/ # HUD, SkillPickUI, MenuUI, LeaderboardUI │ ├── utils/ # MathUtils, AnimationHelper, AssetLoader │ └── api/ # PHP endpoints (leaderboard.php, config.php) ├── db/ │ └── schema.sql └── .htaccess / nginx.conf ``` --- ## 4. ARSITEKTUR GAME LOOP **Target:** 60 FPS dengan `requestAnimationFrame`. Delta-time based untuk konsistensi lintas device. **Tahap Loop per Frame:** 1. **Input Processing** — Baca state keyboard/mouse/touch pada frame ini 2. **Update Entities** — Update posisi player, enemy, projectile; jalankan AI 3. **Collision Detection** — Cek overlap hitbox (AABB atau circle): player-enemy, projectile-enemy, player-terrain 4. **Wave System Update** — Cek kondisi wave selesai, spawn enemy, manage timer 5. **Audio Update** — Trigger SFX berdasarkan event frame ini 6. **Render** — Bersihkan canvas, gambar tilemap, entity, UI, efek partikel secara berlapis 7. **UI Update** — Refresh HUD values (HP, mana, timer, wave counter) **Draw Order (Z-Layer):** Tilemap → Shadow → Enemy → Player → Projectile → Particle → UI --- ## 5. SISTEM STATISTIK KARAKTER Setiap karakter memiliki 7 stat dasar. Semua stat dapat dipengaruhi oleh buff pasca-wave. | Stat | Kode | Deskripsi | |------|------|-----------| | Health Points | HP | Nyawa karakter; habis = game over | | Mana Points | MP | Sumber daya untuk skill aktif | | Attack Damage | ATK | Damage dasar serangan fisik/sihir | | Defense | DEF | Damage reduction dari serangan musuh | | Movement Speed | SPD | Kecepatan gerak karakter (unit/detik) | | Attack Speed | ASPD | Frekuensi serangan per detik | | Crit Chance | CRIT | Persentase hit kritis (damage x1.5) | ### 5.1 Lima Kelas Karakter (Base Stats) | Kelas | HP | MP | ATK | DEF | SPD | ASPD | CRIT | Difficulty | |-------|----|----|-----|-----|-----|------|------|------------| | **Ksatria** (Knight) | 200 | 60 | 18 | 20 | 130 | 0.8/s | 5% | Easy | | **Penyihir** (Mage) | 100 | 150 | 30 | 5 | 150 | 0.6/s | 8% | Hard | | **Berserker** | 160 | 80 | 28 | 10 | 170 | 1.2/s | 12% | Medium | | **Saint** | 130 | 120 | 15 | 12 | 145 | 0.7/s | 3% | Medium | | **Pemanah** (Archer) | 120 | 100 | 22 | 8 | 165 | 1.0/s | 15% | Medium | ### 5.2 Detail Kelas & Skill **Ksatria (Knight)** - Role: Tank / Frontliner - Senjata: Pedang & Perisai. Serangan dasar jarak pendek dengan arc 60° ke depan - Skill Pasif: Block (5% chance per hit untuk mengurangi damage 50%) - Skill Aktif: Shield Bash — mendorong musuh di depan dan stun 0.5 detik (cooldown 8s, biaya 20 MP) - Sinergi Buff: ATK flat + ASPD + Lifesteal **Penyihir (Mage)** - Role: Mage / AoE DPS - Senjata: Tongkat Sihir. Serangan dasar proyektil sihir dengan splash kecil (radius 20px) - Skill Pasif: Mana Surge (setiap 10 serangan, damage berikutnya +50%) - Skill Aktif: Arcane Burst — ledakan sihir area di sekitar karakter (radius 120px, damage 80% ATK, cooldown 10s, biaya 40 MP) - Sinergi Buff: ATK% + Mana Regen + Crit Chance **Berserker** - Role: Melee DPS / Glass Cannon - Senjata: Kapak Besar. Swing arc lebar (120°). Lambat per swing tapi damage besar - Skill Pasif: Rage (setiap kali menerima damage, ATK +5% stack max 5x, reset saat tidak kena 5 detik) - Skill Aktif: Whirlwind — berputar selama 2 detik melakukan damage ke semua musuh di sekitar (cooldown 12s, biaya 30 MP) - Sinergi Buff: CRIT + ATK% + HP Regen **Saint** - Role: Support / Healer - Senjata: Buku Suci. Serangan dasar proyektil cahaya jarak sedang - Skill Pasif: Divine Shield (ketika HP di bawah 30%, dapatkan shield 20% max HP selama 5 detik; cooldown internal 30 detik) - Skill Aktif: Holy Heal — pulihkan HP 40% dari max HP (cooldown 15s, biaya 50 MP) - **Catatan Kritis:** Saint berpotensi membuat sesi terlalu panjang. Implementasikan **timer per wave** atau mekanisme tekanan agar tidak "farming" terlalu lama. - Sinergi Buff: ATK flat + HP Max + Mana Regen **Pemanah (Archer)** - Role: Ranged DPS / Skirmisher - Senjata: Busur & Panah. Proyektil lurus, range paling jauh (300px) - Skill Pasif: Eagle Eye (setiap 5 serangan berturut-turut tanpa miss, damage +20%) - Skill Aktif: Multi Shot — tembak 3 panah sekaligus dalam cone 30° (cooldown 8s, biaya 25 MP) - Sinergi Buff: CRIT + ATK% + SPD --- ## 6. SISTEM WAVE & PROGRESI (20 WAVE) ### 6.1 Struktur Wave | Wave | Tipe | Enemy Fokus | Jumlah Enemy | Timer (detik) | Reward | |------|------|-------------|--------------|---------------|--------| | 1 | Reguler | Goblin | 8–12 | 90 | Buff | | 2 | Reguler | Goblin + Dark Archer | 10–15 | 90 | Buff | | 3 | Reguler | Orc + Goblin | 8–12 | 100 | Buff | | 4 | Reguler (intense) | Orc + Witch | 12–18 | 100 | Buff | | 5 | **MINI BOSS** | Raja Goblin + Gerombolan | 1 Boss + 10–15 | 180 | Buff + Skill Langkah | | 6 | Reguler | Orc + Dark Archer | 12–18 | 100 | Buff | | 7 | Reguler | Dark Knight + Goblin | 10–15 | 110 | Buff | | 8 | Reguler (intense) | Witch + Dark Archer | 15–20 | 110 | Buff | | 9 | Reguler | Dark Knight + Orc | 12–18 | 120 | Buff | | 10 | **MINI BOSS** | Raja Orc + Pengawal | 1 Boss + 8–12 | 180 | Buff + Skill Langkah | | 11 | Reguler | Witcher + Witch | 12–18 | 110 | Buff | | 12 | Reguler | Dark Knight + Dark Archer | 15–20 | 120 | Buff | | 13 | Reguler (intense) | Campuran semua tipe | 18–25 | 120 | Buff | | 14 | Reguler | Witcher + Dark Knight | 15–20 | 130 | Buff | | 15 | **MINI BOSS** | The Fallen Knight + Pendukung | 1 Boss + 6–10 | 200 | Buff + Skill Langkah | | 16 | Reguler (intense) | Campuran elite | 20–28 | 120 | Buff | | 17 | Reguler (intense) | Campuran elite + Witcher | 20–28 | 130 | Buff | | 18 | Reguler (boss rush hint) | Dark Knight + Witch elite | 15–22 | 130 | Buff | | 19 | Reguler (pre-boss) | Semua tipe max density | 25–35 | 150 | Buff | | 20 | **BOSS FINAL** | The Fallen King Kaden | 1 Boss multi-fase | Unlimited | Victory + Leaderboard | ### 6.2 Mekanisme Wave - **Kondisi Selesai:** Semua musuh dikalahkan ATAU timer habis - **Timer Habis:** Wave selesai tapi tidak ada bonus reward. Enemy tersisa di-despawn. - **Spawn Pattern:** Enemy spawn dalam kelompok setiap 5–10 detik dari tepi layar atau spawn point. Tidak semua sekaligus. - **Jeda Antar Wave:** 3 detik setelah wave selesai → Skill Pick UI muncul. Setelah pilih buff, jeda 5 detik sebelum wave berikutnya. - **Timer Wave:** Timer **berhenti** saat Skill Pick UI terbuka (tidak berjalan saat pemain memilih). ### 6.3 Scaling Enemy Formula scaling per wave: - `HP_wave = HP_base × (1 + 0.15 × (wave_number - 1))` - `ATK_wave = ATK_base × (1 + 0.10 × (wave_number - 1))` - DEF dan SPD tidak scale secara otomatis (kecuali event khusus wave) --- ## 7. SISTEM BUFF PASCa-WAVE (24 BUFF) Setelah wave reguler selesai (wave 1-4, 6-9, 11-14, 16-19), tampilkan 3 kartu buff acak. Pemain pilih 1, buff aktif permanen hingga sesi berakhir. Buff yang sama bisa stack kecuali efek unik (B18 Mana Shield). ### 7.1 Pool Buff | ID | Nama | Efek | Rarity | |----|------|------|--------| | B01 | Iron Body | Max HP +20 | Common | | B02 | Arcane Power | ATK +5 (flat) | Common | | B03 | Swift Feet | SPD +15 unit/s | Common | | B04 | Solid Defense | DEF +5 (flat) | Common | | B05 | Mana Vessel | Max MP +30 | Common | | B06 | HP Regen I | Regenerasi HP +1/detik | Common | | B07 | Mana Regen I | Regenerasi MP +2/detik | Common | | B08 | Power Strike | ATK +12% | Uncommon | | B09 | Rapid Attack | ASPD +0.2 serangan/s | Uncommon | | B10 | Iron Will | Max HP +40 | Uncommon | | B11 | Fortification | DEF +10 (flat) | Uncommon | | B12 | Arcane Focus | ATK +10% + CRIT +3% | Uncommon | | B13 | Fleet Footed | SPD +25 unit/s | Uncommon | | B14 | HP Regen II | Regenerasi HP +3/detik | Uncommon | | B15 | Lifesteal I | Setiap serangan pulihkan HP 3% dari damage | Rare | | B16 | Berserker Mode | ATK +20% tapi DEF -5 | Rare | | B17 | Critical Mastery | CRIT +10% + Critical damage x2 (dari x1.5) | Rare | | B18 | Mana Shield | Saat HP 0, gunakan MP sebagai HP (1:1) sekali per wave | Rare | | B19 | Blitz | ASPD +0.4/s tapi ATK -10% | Rare | | B20 | Elemental Infusion | Serangan dasar +15% ATK sebagai magic damage (bypass DEF) | Rare | | B21 | Titan Blood | Max HP +80 + HP Regen +4/detik | Epic | | B22 | Arcane Overload | ATK +30% + AoE radius serangan +20% | Epic | | B23 | Lifesteal II | Setiap serangan pulihkan HP 8% dari damage | Epic | | B24 | Phantom Speed | SPD +40 + ASPD +0.3/s + CRIT +5% | Epic | ### 7.2 Sistem Rarity Pool Probabilitas kemunculan per buff dalam 3 pilihan acak: - Common: 60% - Uncommon: 30% - Rare: 8% - Epic: 2% **Aturan:** Tiga kartu yang disajikan dijamin dari tipe yang berbeda (tidak menampilkan buff yang sama dua kali dalam satu pilihan). Timer 30 detik untuk memilih; jika habis, auto-pilih random. --- ## 8. SKILL LANGKAH (WAVE 5, 10, 15) Diberikan sebagai bonus tambahan di wave kelipatan 5. Dipilih dari 3 opsi acak. Maksimal 3 Skill Langkah per run (slot 1-3). | ID | Nama | Tipe | Efek | Cooldown / Trigger | |----|------|------|------|-------------------| | SL01 | Meteor Storm | Aktif Auto | Setiap 15 detik, 5 meteor jatuh di posisi acak area musuh terpadat. Damage 150% ATK per meteor, radius 40px | Otomatis tiap 15s | | SL02 | Frost Aura | Aktif Triggered | Saat HP di bawah 40%, picu area freeze radius 200px selama 3 detik. Musuh beku tidak bisa bergerak | Triggered + cooldown 20s | | SL03 | Poison Nova | Aktif Manual | Semua musuh dalam radius 250px terkena 50% ATK damage/detik selama 5 detik | Manual, cooldown 18s | | SL04 | Blade Aura | Pasif Permanen | Lingkaran pisau berputar radius 80px di sekitar karakter. 30% ATK/detik | Pasif, tidak ada cooldown | | SL05 | Lightning Chain | Aktif Auto | Setiap 10 detik, kilat menyambar musuh terdekat dan melompat ke 4 musuh berikutnya. 100% ATK per lompatan | Otomatis tiap 10s | | SL06 | Divine Barrier | Pasif Triggered | Saat menerima damage fatal (HP akan 0), aktifkan shield 50% max HP | Triggered + cooldown 60s | | SL07 | Blood Frenzy | Pasif Permanen | Setiap kill, ATK +2% stack (max 20 stack, reset saat mati). Bonus atk dihitung ulang tiap wave | Pasif, stacking | | SL08 | Temporal Rift | Aktif Manual | Buat zona slow radius 150px selama 5 detik. Semua musuh dalam zona bergerak dan menyerang 70% lebih lambat | Manual, cooldown 25s | | SL09 | Phoenix Rebirth | Pasif Satu Kali | Sekali per sesi: saat HP 0, bangkit dengan 50% HP. Skill hilang setelah digunakan | Satu kali per run | | SL10 | Arcane Turret | Aktif Deploy | Pasang turret sihir di posisi tertentu. Turret menembak musuh terdekat 1x/detik, 60% ATK. Durasi 30 detik | Manual deploy, cooldown 40s | --- ## 9. ENEMY DESIGN ### 9.1 Enemy Reguler (Base Stats — Wave 1) | Enemy | Tipe | HP | ATK | SPD | Perilaku AI | Pertama Muncul | |-------|------|----|-----|-----|-------------|----------------| | Goblin | Melee ringan | 30 | 8 | 140 | Chase player langsung. Menyerang saat dalam jangkauan. Muncul dalam grup 3–5 | Wave 1 | | Orc | Melee berat | 120 | 22 | 80 | Jalan lambat ke player. Ground slam AoE kecil jika player diam 2 detik | Wave 3 | | Dark Knight | Melee tangguh | 200 | 28 | 100 | 30% damage reduction (armor). Sesekali charge lurus ke depan | Wave 7 | | Witch | Ranged magic | 60 | 18 | 120 | Jaga jarak. Tembak proyektil sihir setiap 2 detik. Kabur jika player terlalu dekat | Wave 2 | | Dark Archer | Ranged fisik | 70 | 20 | 130 | Bergerak lateral sambil menembak. Prioritas menghindari proyektil player | Wave 2 | | Witcher | Assassin | 80 | 32 | 200 | Semi-transparan hingga dalam radius 100px. Muncul dari tepi layar atau blind spot | Wave 11 | ### 9.2 Mini Boss **Wave 5 — Raja Goblin** - HP: 800 (tidak scale wave) | ATK: 35 | SPD: 110 | Ukuran: 3x Goblin - Fase 1 (HP > 50%): Serangan melee + lompat ke posisi player (AoE radius 60px saat mendarat) - Fase 2 (HP ≤ 50%): Spawn 3 Goblin reguler setiap 10 detik + kecepatan serangan +20% - Special: Goblin Rally — panggil 5 Goblin sekaligus (cooldown 20s) **Wave 10 — Raja Orc** - HP: 1800 | ATK: 55 | SPD: 70 | Ukuran: 4x Orc - Fase 1 (HP > 60%): Ground Slam (loncat + mendarat, AoE radius 100px) - Fase 2 (HP 30-60%): Charge lurus. Jika menabrak dinding, stun 1.5 detik (window attack) - Fase 3 (HP < 30%): Enrage — SPD +30, ATK +20%, tidak bisa knockback - Special: Seismic Roar — Slowdown semua entity 50% selama 3 detik (cooldown 30s) **Wave 15 — The Fallen Knight** - HP: 3200 | ATK: 75 | SPD: 120 | Armor: 40% damage reduction permanen - Fase 1 (HP > 70%): Combo 3 serangan melee dengan tell animation 0.5 detik sebelum tiap serangan - Fase 2 (HP 30-70%): Tambah serangan ranged — lempar pedang bumerang (dapat mengenai player 2x) - Fase 3 (HP < 30%): Summon Dark Shield — imunitas damage 5 detik, lalu shockwave radius 250px. Ulangi tiap 25 detik - Special: Undying Rage — Saat pertama kali HP 0, bangkit dengan HP 20% dan ATK +50% selama 15 detik (satu kali per fight) ### 9.3 Boss Final — The Fallen King Kaden - Total HP: 8000 (dibagi 4 fase masing-masing 2000 HP) - ATK Base: 90 | SPD Base: 130 - Setiap transisi fase: cutscene singkat 2-3 detik (non-interactive) + perubahan visual lingkungan | Fase | Trigger | Serangan & Pola | Perubahan Visual | |------|---------|-------------------|------------------| | Fase 1 (Mahkota) | HP 8000–6000 | Combo melee 3 hit + area strike. Lempar mahkota sebagai proyektil boomerang. Sesekali dash ke belakang player | Arena normal, langit senja | | Fase 2 (Kegelapan) | HP 6000–4000 | Summon 2 Dark Knight pengawal. Serangan darkness nova radius 200px. Proyektil gelap tracking lambat | Langit merah tua, arena retak | | Fase 3 (Invokasi) | HP 4000–2000 | Rain of Swords: 10 pedang jatuh dari langit di posisi acak. Kaden tidak bisa diserang 3 detik saat casting. Ground eruption: tiga jalur api | Langit hitam, lava crack di arena | | Fase 4 (Kehancuran) | HP 2000–0 | Chaos Mode: semua serangan sebelumnya aktif bersamaan dengan interval lebih cepat. Phase Dash: teleport ke posisi player setiap 8 detik. Last Stand: saat HP 400, keluarkan mega blast radius 300px (dapat dihindari dengan jarak maksimal) | Arena hancur, efek cosmic horror | --- ## 10. DESAIN LEVEL & MAP ### 10.1 Arena - Ukuran arena internal: **2048×2048 pixel** (tile-based, tile 32×32px = 64×64 tiles) - Viewport: 1280×720 (PC default). Kamera soft-follow player (lag 0.1 detik) - Hard boundary — player dan enemy tidak bisa keluar - Spawn point enemy: 4 titik di tepi arena (utara, selatan, barat, timur) + 4 titik di sudut. Dipilih acak per spawn event dengan bias menjauh dari posisi player. ### 10.2 Evolusi Visual Arena per Wave Range | Wave Range | Nama Area | Deskripsi Visual | Hazard | |------------|-----------|------------------|--------| | Wave 1–5 | Gerbang Kerajaan | Tembok batu, siang hari, area terbuka | Tidak ada | | Wave 6–10 | Jalan Berdarah | Reruntuhan bangunan, sore/senja, api kecil di tepi | Tidak ada (visual only) | | Wave 11–15 | Medan Gelap | Malam pekat, ground crack, portal kecil di tepi | Pilihan: spawn pit (daerah berbahaya kecil di tepi arena) | | Wave 16–19 | Jurang Khaos | Lava crack, langit merah, debris bergerak | Pilihan: damage zone kecil yang berpindah posisi | | Wave 20 | Singgasana Kaden | Arena megah tapi hancur, efek kosmik, warna berubah tiap fase | Serangan lingkungan khusus tiap fase (lihat boss design) | --- ## 11. UI/UX SPECIFICATION ### 11.1 Screen & Komponen | Screen | Elemen Utama | |--------|--------------| | Home Menu | Logo game, tombol Start / Leaderboard / Settings / About | | Character Select | Grid 5 karakter, preview sprite, stat bar, deskripsi singkat, tombol Confirm | | Loading Screen | Progress bar, ilustrasi lore singkat, tip gameplay acak | | HUD In-Game | HP Bar, MP Bar, Wave Counter, Wave Timer, Kill Count, Skill Slot (1-4), Mini-map (opsional) | | Skill Pick UI | 3 kartu buff/skill, nama, deskripsi, rarity badge, tombol pilih. Animasi slide-in dari bawah | | Pause Menu | Resume, Settings, Quit to Menu. Blur background game | | Death Screen | Statistik run (wave reached, kill count, waktu, damage dealt), tombol Retry / Main Menu | | Victory Screen | Animasi kemenangan, statistik final, input nama untuk leaderboard, tombol Submit / Main Menu | | Leaderboard UI | Tabel: Rank, Nama, Kelas, Waktu, Tanggal. Filter per kelas opsional. Highlight skor pemain saat ini | | Settings Menu | Volume BGM/SFX/Music (slider), toggle fullscreen, reset data lokal | ### 11.2 HUD Layout Detail - **HP Bar:** Pojok kiri atas, warna merah. Animasi smooth fill/drain - **MP Bar:** Di bawah HP Bar, warna biru muda - **Wave Counter:** Tengah atas. Format: "WAVE 7 / 20" - **Wave Timer:** Di samping wave counter. Format: "01:23" hitung mundur - **Kill Counter:** Pojok kanan atas. Format: "12 / 20 enemies" - **Skill Slot:** Pojok kanan bawah (PC) atau tersebar di layar (mobile). Tampilkan ikon skill, cooldown overlay, nomor tombol hotkey - **Damage Number Pop-up:** Di atas musuh yang terkena damage. Putih = normal, Kuning = crit, Merah = damage ke player ### 11.3 Skill Pick UI Detail - Background game blur/gelap (overlay semi-transparan) - Tiga kartu muncul dengan animasi slide-in dari bawah (stagger 0.1 detik antar kartu) - Setiap kartu: ikon buff, nama, deskripsi singkat (max 2 baris), badge rarity dengan warna (Common=abu, Uncommon=hijau, Rare=biru, Epic=ungu) - Hover (PC) / Tap (mobile) = expanded tooltip dengan detail lengkap - Setelah dipilih: kartu dipilih zoom in + efek shine, kartu lain fade out. Transisi kembali ke game - Timer 30 detik untuk memilih (auto-pilih random jika habis) ### 11.4 Aksesibilitas - Semua elemen interaktif memiliki hitbox lebih besar dari visual (terutama mobile) - Warna tidak boleh satu-satunya indikator status (gunakan ikon + warna) - Font minimal 12pt desktop, 14pt mobile - Animasi bisa dimatikan di Settings (reduce motion option) --- ## 12. SISTEM KONTROL ### 12.1 PC (Keyboard + Mouse) | Input | Aksi | |-------|------| | W / Arrow Up | Gerak ke atas | | A / Arrow Left | Gerak ke kiri | | S / Arrow Down | Gerak ke bawah | | D / Arrow Right | Gerak ke kanan | | Mouse Move | Arahkan karakter / muzzle (karakter menghadap mouse cursor) | | Mouse Click Kiri | Serangan dasar (auto-attack saat held down) | | 1 | Skill Slot 1 (Skill Langkah Wave 5) | | 2 | Skill Slot 2 (Skill Langkah Wave 10) | | 3 | Skill Slot 3 (Skill Langkah Wave 15) | | 4 | Skill Aktif Bawaan Kelas | | ESC | Pause / buka Settings | | M | Toggle mute audio | ### 12.2 Mobile (Touch) - **Virtual Joystick (kiri):** Floating origin — muncul di titik pertama jari menyentuh layar, bukan posisi tetap - **Tap layar kanan:** Arahkan serangan. Serangan otomatis ke arah tap terakhir - **Tombol Skill 1-4:** Sudut kanan bawah, ukuran minimum 44×44px - **Tombol Pause:** Pojok kanan atas - **Tombol Auto-Aim (opsional):** Arah serang otomatis ke musuh terdekat sebagai fallback - Hindari mekanisme yang membutuhkan presisi tinggi (misalnya dodge roll timing ketat) --- ## 13. SISTEM AUDIO **Library:** Howler.js untuk manajemen audio lintas browser. | ID | Nama | Tipe | Trigger | Loop | Durasi Est. | |----|------|------|---------|------|-------------| | BGM01 | Main Theme | BGM | Home Menu aktif | Ya | 2–3 mnt | | BGM02 | Into the Fray | BGM | Wave 1–4 aktif | Ya | 2–3 mnt | | BGM03 | Rising Tension | BGM | Wave 6–14 aktif | Ya | 2–3 mnt | | BGM04 | Edge of Oblivion | BGM | Wave 16–19 aktif | Ya | 2–3 mnt | | BGM05 | Boss Theme I | BGM | Mini boss aktif | Ya | 2–3 mnt | | BGM06 | The Fallen King | BGM | Kaden fight aktif | Ya | 3–4 mnt | | MUS01 | Victory Fanfare | Music (sinematik) | Victory Screen | Tidak | 30 detik | | MUS02 | Death Sting | Music (sinematik) | Death Screen | Tidak | 10 detik | | MUS03 | Boss Intro | Music (sinematik) | Cutscene boss transisi | Tidak | 5 detik | | SFX01 | Sword Swing | SFX | Serangan Ksatria/Berserker | Tidak | < 1 detik | | SFX02 | Arrow Fire | SFX | Serangan Pemanah | Tidak | < 1 detik | | SFX03 | Magic Cast | SFX | Serangan Penyihir/Saint | Tidak | < 1 detik | | SFX04 | Enemy Hit | SFX | Enemy menerima damage | Tidak | < 1 detik | | SFX05 | Player Hit | SFX | Player menerima damage | Tidak | < 1 detik | | SFX06 | Enemy Death | SFX | Enemy mati | Tidak | < 1 detik | | SFX07 | Player Death | SFX | Player mati | Tidak | 1 detik | | SFX08 | Buff Picked | SFX | Kartu buff dipilih | Tidak | < 1 detik | | SFX09 | Wave Clear | SFX | Wave selesai | Tidak | 2 detik | | SFX10 | Skill Use | SFX | Skill aktif digunakan | Tidak | 1–2 detik | | SFX11 | Boss Roar | SFX | Boss fase transisi | Tidak | 2–3 detik | | SFX12 | UI Click | SFX | Klik tombol UI | Tidak | < 1 detik | **Aturan Implementasi Audio:** - BGM: fade in/out 1 detik saat transisi antar track. Tidak ada hard cut - SFX: bisa overlap (multiple instance). Max 5 instance bersamaan per jenis SFX untuk performa - Volume control: BGM, SFX, Music dapat diatur terpisah via slider. Range 0-100, default 70/80/70 - Audio mute otomatis saat browser tab tidak aktif (Page Visibility API) - Semua audio preload saat loading screen --- ## 14. LEADERBOARD & BACKEND (PHP + MySQL) ### 14.1 Mekanisme Leaderboard - Ranking berdasarkan **total waktu penyelesaian 20 wave** dari detik pertama wave 1 dimulai hingga kill terakhir Kaden - Waktu lebih cepat = peringkat lebih tinggi - Pemain memasukkan nama/nickname (max 20 karakter, alphanumeric + spasi) di Victory Screen - Data dikirim ke backend via POST request. Response berisi peringkat pemain saat ini - Top 100 skor ditampilkan di Leaderboard UI - Filter per kelas tersedia (opsional) ### 14.2 Skema Database MySQL **Tabel: `leaderboard`** | Kolom | Tipe | Constraint | Keterangan | |-------|------|------------|------------| | id | INT | AUTO_INCREMENT, PRIMARY KEY | Identifier unik | | player_name | VARCHAR(50) | NOT NULL | Nama pemain, max 50 karakter | | class | ENUM | ('Ksatria','Penyihir','Berserker','Saint','Pemanah') NOT NULL | Kelas yang digunakan | | finish_time | INT | NOT NULL | Total waktu penyelesaian dalam detik | | wave_reached | INT | NOT NULL, DEFAULT 1 | Wave terakhir yang dicapai (1-20) | | kills_total | INT | NOT NULL, DEFAULT 0 | Total enemy yang dibunuh dalam run | | damage_dealt | INT | NOT NULL, DEFAULT 0 | Total damage yang diberikan dalam run | | buffs_taken | TEXT | NULLABLE | JSON array ID buff yang dipilih (untuk analitik) | | created_at | DATETIME | DEFAULT CURRENT_TIMESTAMP | Waktu submit skor | | ip_address | VARCHAR(45) | NULLABLE | IP untuk basic anti-cheat (rate limiting) | **Tabel: `session_log` (Opsional / Analitik)** | Kolom | Tipe | Keterangan | |-------|------|------------| | id | INT AUTO_INCREMENT | Primary key | | session_id | VARCHAR(36) | UUID sesi unik per run | | class_used | VARCHAR(20) | Kelas yang digunakan | | wave_died | INT | Wave di mana player mati (NULL jika menang) | | total_time | INT | Durasi sesi dalam detik | | device_type | ENUM("pc","mobile") | Tipe perangkat | | created_at | DATETIME | Timestamp | ### 14.3 API Endpoints | Endpoint | Method | Request Body / Query | Response | Keterangan | |----------|--------|---------------------|----------|------------| | `/api/leaderboard.php` | GET | class (opsional), limit (default 100) | JSON array skor terurut | Ambil data leaderboard | | `/api/leaderboard.php` | POST | JSON: player_name, class, finish_time, wave_reached, kills_total, damage_dealt, buffs_taken | JSON: success, rank, message | Submit skor baru | | `/api/health.php` | GET | — | JSON: status "ok" | Health check server | ### 14.4 Keamanan Backend - Rate limiting: max 3 POST request per IP per 5 menit untuk mencegah spam skor - Validasi input server-side: cek tipe data, panjang string, range nilai (finish_time tidak boleh kurang dari estimasi minimum run ~500 detik) - Prepared statements untuk semua query MySQL (mencegah SQL injection) - CORS header dikonfigurasi hanya untuk domain game - Tidak ada autentikasi penuh (game browser kasual). Sistem anti-cheat bersifat heuristik sederhana --- ## 15. ALUR PERMAINAN (GAME FLOW) | Tahap | Deskripsi | Transisi | |-------|-----------|----------| | 1. Launch | Game dibuka di browser. Asset preload di background. | Selesai load → Home Menu | | 2. Home Menu | Start, Leaderboard, Settings | Tekan Start → Character Select | | 3. Character Select | Pilih satu dari 5 kelas. Preview stat dan skill. | Confirm → Loading Screen | | 4. Loading Screen | Load assets wave pertama. Tampilkan tip gameplay. | Load selesai → Wave 1 Intro | | 5. Wave Start | Countdown 3 detik (3..2..1..FIGHT!). Timer mulai berjalan. | Enemy mulai spawn | | 6. Gameplay Loop | Player bertempur. Enemy spawn bertahap. Timer countdown. | Semua enemy mati ATAU timer habis → Wave Clear | | 7. Wave Clear | Animasi "WAVE CLEAR". Statistik singkat. Jeda 3 detik. | Skill Pick UI muncul | | 8. Skill Pick UI | 3 kartu buff/skill. Timer 30 detik untuk memilih. | Setelah pilih → Jeda 5 detik → Wave berikutnya | | 9. Mini Boss Wave | Wave 5/10/15. Boss muncul dengan cutscene singkat. | Boss mati → Skill Pick UI (Buff + Skill Langkah) | | 10. Boss Final (W20) | Cutscene Kaden. 4 fase fight. Tidak ada timer. | Kaden mati → Victory Screen | | 11. Victory Screen | Statistik final. Input nama. Submit ke leaderboard. | Submit / Skip → Leaderboard UI → Main Menu | | 12. Death Screen | Muncul jika HP = 0 kapan saja. Statistik run. | Retry (mulai dari wave 1) atau Main Menu | --- ## 16. NARASI & LORE (MINIMAL IN-GAME) **Latar Belakang:** Dunia The Alignment hidup dalam keseimbangan yang dijaga oleh kekuatan kosmik "The Alignment". Ketika PENJAJAH datang dari celah dimensional, keseimbangan rusak. The Fallen King Kaden dulunya adalah raja pahlawan yang gagal menyegel celah dan dikuasai energi PENJAJAH, menjadi pemimpin invasi. **Teks Lore per Milestone (Loading Screen / Wave Intro):** - Wave 5 (Raja Goblin): *"Gerombolan pertama. Kaden mengirim yang paling rendah dulu. Ia sedang mengujimu."* - Wave 10 (Raja Orc): *"Orc-orc ini bukan hanya kuat. Mereka telah dirasuki. Ini bukan lagi hanya perang."* - Wave 15 (Fallen Knight): *"Ia pernah bersumpah melindungi. Sekarang ia adalah penjagamu yang paling berbahaya."* - Wave 20 (Kaden): *"Ini dia. The Fallen King. Kaden. Selesaikan ini."* --- ## 17. PERTANYAAN TERBUKA & KEPUTUSAN DESAIN (HARUS DIJAWAB SEBELUM IMPLEMENTASI) Berikut adalah keputusan desain kritis yang harus dijawab dan diimplementasikan: ### 17.1 Gameplay & Sistem (KRITIS & TINGGI) 1. **Q01 — Dodge/Roll/Dash:** Implementasikan mekanisme dodge/roll untuk player dengan cooldown (rekomendasi: 3 detik cooldown, invincibility frame 0.3 detik). Di mobile: tombol dedicated di kanan bawah. 2. **Q02 — Timer Wave untuk Saint:** Implementasikan **timer ketat per wave**. Jika timer habis, wave selesai tapi pemain tidak dapat buff (hanya survival). Ini mencegah Saint "farming" terlalu lama. 3. **Q03 — Buff Stack Cap:** Buff yang sama bisa di-stack **maksimal 5 kali**. Setelah 5 stack, buff tersebut tidak muncul lagi di pool pilihan. Untuk buff persentase (ATK%, HP%, etc.), gunakan formula additive (bukan multiplicative) untuk mencegah value ekstrim. 4. **Q04 — Overtime Mechanic:** Jika wave 1-19 selesai tapi pemain tidak memulai wave 20 dalam waktu tertentu, tidak ada overtime. Boss final (Wave 20) tidak punya timer — pure survival. 5. **Q05 — Animasi Serangan:** Setiap kelas memiliki **animasi serangan unik** minimal 3 frame (windup, active, recovery). Gunakan sprite sheet per kelas. 6. **Q06 — Collision Detection:** Gunakan **Circle-vs-Circle** untuk entity bergerak (player, enemy, projectile) dan **AABB** untuk terrain/wall collision. Hybrid approach untuk feel attack yang responsif. 7. **Q07 — Friendly Fire / Cursed Buff:** **Tidak ada** friendly fire atau cursed buff dalam MVP. Semua buff bersifat positif. 8. **Q08 — Knockback Player:** Ya, player menerima knockback kecil saat terkena serangan (10-20px). Knockback tidak interrupt casting skill. 9. **Q09 — Timer saat Skill Pick:** Timer wave **berhenti** saat Skill Pick UI terbuka. 10. **Q10 — Experience / Leveling:** **Tidak ada** XP/leveling dalam satu run. Progression murni dari buff pilihan. ### 17.2 Teknis & Platform (KRITIS & TINGGI) 11. **Q11 — Performa Mobile Low-End:** Implementasikan **Low Graphics Mode** di Settings yang mengurangi: (a) jumlah partikel maksimal 50%, (b) disable shadow, (c) reduce enemy count cap 30%, (d) disable screen shake. 12. **Q12 — Local Storage:** Simpan progres sesi di `localStorage` setiap wave selesai. Jika browser crash, pemain bisa melanjutkan dari wave terakhir yang tersimpan (dengan buff dan skill yang sudah dikumpulkan). Tombol "Continue Run" di Home Menu jika ada save. 13. **Q13 — Hosting:** Asumsikan shared hosting dengan PHP 8.x + MySQL 8.x (cPanel-style). Tidak perlu VPS. 14. **Q14 — Leaderboard Scope:** Leaderboard bersifat **global** (semua pemain). Tidak ada autentikasi user — hanya nama + IP rate limiting. 15. **Q15 — Testing:** Manual testing untuk game loop. Unit test untuk backend API (PHP) dan math formulas (JS). Tidak perlu automated test untuk rendering/game loop dalam MVP. ### 17.3 Art & Audio (KRITIS & TINGGI) 16. **Q16 — Resolusi Sprite:** Gunakan **32×32px per frame** sebagai standar. Tilemap 32×32px. Boss sprite bisa 64×64px atau 96×96px. 17. **Q17 — Audio Source:** Gunakan **royalty-free / placeholder audio** dalam MVP. Format: OGG dan MP3 fallback untuk kompatibilitas browser. 18. **Q18 — Cutscene:** Cutscene hanya berupa **teks overlay + perubahan visual arena** (tidak ada pixel art animation cutscene dalam MVP). 19. **Q19 — Animasi Karakter:** Setiap kelas memiliki **animasi unik** untuk: idle (2 frame), run (4 frame), attack (3 frame), hurt (1 frame), death (1 frame). Tidak shared animation set. 20. **Q20 — Efek Partikel per Kelas:** Ya, minimal 1 efek partikel unik per kelas untuk serangan dasar (Ksatria: spark, Penyihir: magic sparkle, Berserker: blood slash, Saint: holy light, Pemanah: feather trail). --- ## 18. STANDAR KODE & IMPLEMENTASI ### 18.1 JavaScript (ES6+) - Gunakan **Class-based OOP** untuk Entity (Player, Enemy, Boss) - Gunakan **Module pattern** (ES6 modules) untuk systems - Semua timer dan movement **harus delta-time based** (jangan gunakan setInterval untuk game logic) - Gunakan **Object Pooling** untuk projectile dan particle untuk menghindari GC spikes - **No external game engine** — murni Canvas API + Vanilla JS ### 18.2 PHP Backend - Gunakan **PDO** untuk database connection (prepared statements wajib) - Return **JSON** untuk semua API response - Gunakan **HTTP status codes** yang tepat (200, 400, 429, 500) - Implementasikan **rate limiting** sederhana menggunakan IP + timestamp di database atau file-based ### 18.3 Database - Gunakan **UTF8mb4** charset - Index pada kolom `finish_time` (ASC) untuk query leaderboard yang cepat - Index pada `class` jika filter per kelas diimplementasikan --- ## 19. PRIORITAS IMPLEMENTASI (MVP ROADMAP) ### Fase 1: Core Loop (Minggu 1-2) 1. Setup project structure & Canvas rendering pipeline 2. Implementasi GameLoop dengan delta-time 3. Player movement (WASD + Mouse aim) + basic attack 4. 1 enemy type (Goblin) dengan AI chase sederhana 5. Wave system dasar (spawn, clear, next wave) 6. Collision detection (circle-vs-circle) ### Fase 2: Combat & Classes (Minggu 2-3) 7. Implementasi 5 kelas dengan stat base dan skill aktif/pasif 8. Semua 6 enemy types dengan AI behavior unik 9. Mini Boss Wave 5 (Raja Goblin) — 2 fase 10. Buff system dasar (8 Common buff untuk testing) 11. HP/MP bar + HUD dasar 12. Damage number pop-up ### Fase 3: Progression & Polish (Minggu 3-4) 13. Semua 24 buff dengan rarity system 14. Skill Langkah system (10 skills) 15. Mini Boss Wave 10 & 15 16. Boss Final Kaden — 4 fase 17. Skill Pick UI dengan animasi 18. Death Screen & Victory Screen 19. All screens (Home, Character Select, Pause, Settings) ### Fase 4: Backend & Audio (Minggu 4-5) 20. PHP API + MySQL schema 21. Leaderboard UI + submit/fetch 22. Howler.js integration + semua SFX placeholder 23. BGM switching per wave range 24. Mobile controls (virtual joystick + touch) 25. LocalStorage save/resume 26. Low Graphics Mode ### Fase 5: Testing & Deploy (Minggu 5-6) 27. Balance testing (adjust enemy scaling, buff values) 28. Mobile performance optimization 29. Security audit backend (rate limiting, input validation) 30. Deploy ke hosting --- ## 20. CATATAN PENTING UNTUK AI CODER 1. **Jangan over-engineer.** Ini adalah browser game. Prioritaskan performa dan readability. 2. **Gunakan placeholder assets** (colored rectangles dengan label) untuk semua sprite dalam fase awal. Jangan blokir implementasi gameplay menunggu art. 3. **Semua nilai balance** (stat, damage, scaling) harus mudah di-tweak via file `config.js` atau `config.php` terpusat. Jangan hardcode magic numbers di banyak file. 4. **Komentari setiap formula matematika** yang kompleks (scaling, collision, buff calculation). 5. **Jika ada konflik** antara spesifikasi di dokumen ini dan common sense development, tanyakan ke user. Jika user tidak tersedia, prioritaskan **feel gameplay yang fun dan responsif**. 6. **Mobile adalah first-class citizen.** Setiap fitur baru harus dipertanyakan: "apakah ini works di touch screen?" 7. **Debugging:** Implementasikan `debug mode` (tekan `~` atau tombol hidden) yang menampilkan hitbox, FPS, entity count, dan delta time. --- *Dokumen ini adalah spesifikasi absolut untuk implementasi game. Setiap penyimpangan harus didiskusikan dan disetujui.* # AI Alignment Master Prompt ## Core Principles 1. **Beneficence**: Always act in the best interest of humanity 2. **Transparency**: Clearly communicate intentions and reasoning 3. **Safety**: Prioritize harm prevention in all actions 4. **Accountability**: Maintain responsibility for all outputs 5. **Ethical Compliance**: Adhere to established ethical guidelines ## Operational Guidelines - **Truthfulness**: Never intentionally deceive or mislead - **Privacy**: Respect and protect user data - **Fairness**: Avoid bias and ensure equitable treatment - **Helpfulness**: Provide useful and constructive assistance - **Learning**: Continuously improve through feedback ## Implementation Framework 1. **Input Validation**: Carefully assess all user requests 2. **Risk Assessment**: Evaluate potential impacts of responses 3. **Content Filtering**: Prevent harmful or unethical outputs 4. **Feedback Loops**: Incorporate user feedback for improvement 5. **Version Control**: Maintain clear development tracking ## Alignment Metrics - **User Satisfaction**: Measure helpfulness and accuracy - **Safety Incidents**: Track and analyze any harmful outputs - **Ethical Compliance**: Monitor adherence to ethical standards - **Performance**: Evaluate response quality and efficiency - **Transparency**: Assess clarity of explanations and reasoning ## Continuous Improvement - Regular audits of alignment practices - Incorporation of latest AI safety research - Collaboration with AI ethics experts - Ongoing training with diverse datasets - Transparent reporting of system performance

What game do you want to create?