[!NOTE] Konoha Fighting adalah proyek turunan dari AETHER CLASH karya Bang Tutorial (repo asli, tutorial YouTube). Kode asli berlisensi MIT; aset bawaan (karakter, seni, audio, panduan) berlisensi CC BY-NC 4.0, jadi tidak untuk penggunaan komersial. Perubahan di sini: roster karakter diganti dengan karakter parodi buatan sendiri, ditambah mode, toko, efek jurus, dan menu baru. Rincian kredit ada di bagian Kredit dan lisensi.

Konoha Fighting

Game fighting 2D di browser dengan tokoh publik versi parodi: Bro Wo, Mega Chan, Son of Solo Man, Ethanol Man, A Nice, Solo Man, dan Gufron, plus 5 slot misteri. Semua karakter adalah karikatur untuk hiburan; nama dan jurus hanya plesetan. Tanpa instalasi, tanpa dependensi.

Menjalankan

python3 serve.py 8141   # server lokal tanpa cache

Buka http://localhost:8141/?touch=0. (Mode sentuh otomatis di HP.)

Cukup server file statis apa pun; tidak ada langkah build. Sajikan lewat http://localhost atau HTTPS agar layar loading dan cache service worker aktif. Membuka index.html langsung dari disk (file://) tetap bisa dimainkan, hanya tanpa cache. Browser yang didukung: Chrome, Edge, Firefox, dan Safari terbaru (desktop dan HP). Audio mulai setelah klik atau ketukan pertama.

Kontrol

Tombol	Fungsi
A D / W / S	jalan, lompat (W dua kali = lompat ganda), jongkok
Spasi	serang (ketuk 3x = kombo)
↓ ↓ + Spasi	uppercut (menjatuhkan lawan)
↓ → + Spasi	tinju maju
I / O / P	skill 1, skill 2, ultimate
K	jurus toko
L (tahan) / L (ketuk)	blok / parry
J	lempar (menembus blok)
Esc	jeda
R	ulang (ronde di Latihan, pertandingan di VS Komputer)
P2: ← → ↑ N M , .	jalan, lompat, serang, skill 1, skill 2, ultimate

Di menu: W A S D atau tombol panah untuk memilih, Enter untuk konfirmasi, Esc untuk kembali.

Sentuh (HP dan tablet): pad arah di kiri, tombol serang besar dengan skill dan ultimate di kanan lengkap dengan hitungan cooldown, ditambah tombol jurus perintah, blok, dan lempar. HP otomatis membuka mobile.html dalam tampilan landscape; ?touch=1 memaksa tampilan sentuh di desktop dan ?touch=0 mematikannya.

Atur tombol dan pasang aplikasi: di layar sentuh, Pengaturan memuat baris Tata letak tombol (ATUR): seret kotak pad arah, tombol aksi, atau tombol tambahan untuk memindahkannya dan tarik lingkaran di sudutnya untuk mengubah ukuran; tombol ATUR ULANG mengembalikan ke bawaan. Tata letak tersimpan di perangkat. Bila peramban mengizinkan (Chrome, Edge, Android), Pengaturan juga menampilkan Pasang aplikasi agar game bisa dibuka layar penuh dari layar utama; di iPhone/iPad pasang lewat Bagikan, lalu Tambah ke Layar Utama.

Fitur

• Mode: VS Komputer (4 tingkat, best of 3 ronde), Arcade, Survival, Dua Pemain, dan Latihan.
• Ultimate sinematik dan mode pasca-ultimate untuk setiap karakter (A Nice berubah jadi Senator).
• Efek jurus yang bergerak sendiri (gelombang, jurus area, lari dengan bayangan, genangan) dan rasa kena (hit-stop, getaran layar, K.O. gerak lambat, angka damage, peringkat kombo).
• Blok, parry, dan lempar; koin, toko (jurus toko, varian skill, skin warna), menu Karakter, 20 pencapaian, dan easter egg.
• Peringkat karakter versi simulator (tier S sampai C, bagian kecil di menu Koleksi), dibuat otomatis dari ratusan ronde bot melawan CPU; angkanya bukan kebenaran mutlak.
• Lima arena, pengumuman ronde, dan kutipan acak di layar loading.
• Menu utama berlatar kolase tujuh petarung, tanpa gambar tambahan: seluruhnya disusun dengan CSS dari potret yang sudah ada, dan geraknya menghormati pengaturan "kurangi gerak" di perangkat.
• Daftar "Yang baru" di layar About, dengan pemberitahuan singkat satu kali saat ada pembaruan.
• Rencana pengembangan: RENCANA.md (urutan kerja) dan ROADMAP.md (katalog ide).

Struktur proyek

.
├── index.html        # pintu masuk desktop: menu, HUD, dialog, urutan skrip
├── mobile.html       # cangkang landscape untuk HP (rotasi, layar penuh)
├── style.css         # HUD arena, cut-in, kontrol sentuh
├── menu.css          # menu utama, pilih karakter dan arena, hasil, latar kolase, About
├── feel.css          # peringkat kombo
├── meta.css          # toko, karakter, koleksi, toast
├── mystery.css       # gaya slot misteri di layar pilih karakter
├── game.js           # mesin: loop, fisika, pertarungan, otak CPU, rendering, HUD
├── menu.js           # menu: alur layar, roster, arena, tingkat kesulitan, kolase latar
├── match.js          # aturan ronde, timer, arena, penyetelan tingkat CPU
├── feel.js           # rasa kena: hit-stop, getaran, K.O. gerak lambat
├── meta.js           # koin, toko, skin, pencapaian, Arcade/Survival
├── mystery.js        # slot misteri yang hidup: siluet dan petunjuk bertahap dari kemajuan pemain
├── brand.js          # kutipan layar loading dan daftar "Yang baru"
├── content/          # data teks: loading.js (kutipan), changelog.js (Yang baru), mystery.js (petunjuk slot misteri), tiers.js (peringkat, dibuat simulator)
├── announcer.js      # antrean suara pengumuman
├── touch.js          # kontrol sentuh di layar
├── touchlayout.js    # editor tata letak tombol sentuh (+ touchlayout.css)
├── pwa.js            # tombol "Pasang aplikasi" (beforeinstallprompt); manifest.webmanifest, offline.html, assets/pwa/
├── browo.js, fenr.js # kit tulisan tangan (karakter lain berbasis data di assets/<id>/manifest.js)
├── preload.js        # layar boot kunjungan pertama, mengisi cache
├── precache.js       # daftar berkas runtime (dibuat oleh tools/build_precache.py)
├── sw.js             # service worker: gambar dari cache, kode dari jaringan dulu
├── tests/            # uji headless (Playwright): node tests/all.mjs (semua), harness.mjs smoke, balance.mjs (simulator)
├── docs/             # catatan mesin untuk pengembang (ENGINE_NOTES.md) dan laporan keseimbangan (balance-report.md)
├── guide/            # panduan produksi warisan AETHER CLASH
├── LICENSE           # MIT (kode)
├── LICENSE-ASSETS.md # CC BY-NC 4.0 (seni, audio, panduan) dan pengecualian
└── assets/
    ├── <petarung>/   # atlas sprite (WebP) + manifest.js, potret, ikon, FX
    ├── audio/        # klip pengumuman dan musik latar
    ├── menu/         # seni pilih karakter dan latar arena
    ├── ui/           # seni HUD bersama
    └── fonts/        # Rajdhani (SIL Open Font License)

Cara kerja

• Simulasi langkah tetap. Game maju dalam langkah 1/120 detik dengan pengacak berbenih, jadi pertarungan berjalan sama di setiap perangkat.
• Sprite. Tiap petarung berupa atlas sprite WebP (diam, jalan, lari, lompat, jongkok, tiga serangan, dua skill, ultimate, terkena, jatuh, bangun) dengan manifest berisi bingkai, titik pijak, dan titik pukul terukur.
• Kit. Aturan tiap petarung (damage, jangkauan, cooldown, perilaku proyektil) ada di data manifest; pemain dan CPU memakai data yang persis sama.
• Otak CPU. CPU bereaksi dengan jeda mirip manusia: melompati proyektil, mundur dari serangan, menghukum saat lawan lengah, dan melanjutkan kombo yang benar-benar kena. Tiap tingkat kesulitan mengubah waktu reaksi, agresi, dan kesalahan.
• Loading. precache.js mendaftar semua berkas runtime beserta hash isinya. preload.js mengunduhnya ke Cache Storage di balik layar boot, dan sw.js melayani gambar dan font dari sana. Pada kunjungan berikutnya hanya berkas yang berubah yang diunduh lagi. Setelah menambah atau mengubah berkas, jalankan python3 tools/build_precache.py.

Pengujian dan keseimbangan

Uji headless memakai Playwright (sudah terpasang di mesin pengembang) dan tidak perlu npm install:

node tests/all.mjs                  # satu perintah: sintaks semua JS, smoke, 49 pasangan karakter singkat, data peringkat; kode keluar 0 bila lolos
node tests/harness.mjs smoke        # smoke saja (7 karakter melawan CPU, gagal bila ada galat halaman)
BAL_N=8 BAL_WORKERS=2 node tests/harness.mjs tests/balance.mjs 2026-10-05   # simulator keseimbangan, tulis docs/balance-report.md
BAL_TIERS=1 BAL_N=8 node tests/harness.mjs tests/balance.mjs 2026-10-05     # juga membuat ulang content/tiers.js (peringkat di menu Koleksi)

Simulator memainkan setiap pasangan 7 x 7 karakter di kedua posisi (bot pemain melawan CPU tingkat hard) tanpa render, lalu menulis tabel menang-kalah dan persen menang per karakter. Cara membaca hasil, riwayat penyetelan angka, dan batasannya ada di docs/balance-report.md; rincian env dan struktur kode ada di docs/ENGINE_NOTES.md.

Penerapan

Unggah folder ke hosting file statis (nginx, Apache, LiteSpeed, Caddy, GitHub Pages, Netlify, dan sejenisnya). Semua jalur bersifat relatif, jadi bisa di akar domain atau subfolder. Buka game dengan garis miring penutup, kirim Cache-Control: no-cache untuk berkas game, dan sajikan MP3 dan MP4 dengan permintaan rentang dan tanpa gzip. Langkah rinci untuk nginx, Apache/LiteSpeed, dan Caddy, beserta skrip pemeriksa berkas setelah unggah, ada di DEPLOY.md (berbahasa Inggris, dari proyek asal). .htaccess untuk Apache/LiteSpeed sudah disertakan.

Kredit dan lisensi

• Berbasis AETHER CLASH oleh Bang Tutorial (repo asli, tutorial YouTube): kerangka mesin, sistem menu, layar loading, pengumuman, kontrol sentuh, dan panduan di folder guide/ berasal dari karya itu. Game asalnya dibuat langkah demi langkah di YouTube (berbahasa Indonesia).
• Visual awal dibuat dengan Higgsfield (GPT Image); suara dan pengumuman memakai suara ElevenLabs lewat Higgsfield; musik latar "Midday Showdown" dibuat dengan Suno.
• Tipografi: Rajdhani oleh Indian Type Foundry, lisensi SIL Open Font License (lihat assets/fonts/OFL.txt).
• Kode (HTML, CSS, JavaScript) berlisensi MIT.
• Aset bawaan (karakter, sprite, ilustrasi, efek, video, suara, musik latar, tangkapan layar, dan dokumen guide/) berlisensi CC BY-NC 4.0: bebas dibagikan dan diadaptasi dengan menyebut sumber, tetapi tidak untuk penggunaan komersial.
• Pengecualian: font Rajdhani tetap di bawah SIL Open Font License. Lihat LICENSE-ASSETS.md.
• Semua karakter di Konoha Fighting adalah karikatur untuk hiburan, bukan pernyataan tentang orang sebenarnya.