Membangun minigame browser "paint to hide"
Saya membuat sebuah game browser yang terinspirasi oleh Meccha Chameleon. Dalam game tersebut, pemain yang bersembunyi (hiders) mewarnai tubuh mereka agar sesuai dengan dinding atau peti. Pencari (seekers) mencoba menemukan mereka.
Saya membangun dua alat berdasarkan ide ini.
- The Camo Lab Alat ini memberikan warna, pola, dan pose yang tepat untuk permukaan apa pun. Saya menggunakan satu inline SVG untuk bunglonnya. Warnanya berubah berdasarkan palet permukaan.
Saya menemukan bahwa mengubah warna SVG dengan variabel lebih mudah daripada menghasilkan gambar. Setiap permukaan adalah sebuah objek data kecil. Ini mencakup tiga warna hex, sebuah pola, dan skor pencampuran (blend score). Menambahkan permukaan baru hanya membutuhkan satu baris kode.
- The Minigame Ini adalah grid ubin (tiles) yang dapat dimainkan. Beberapa ubin menyembunyikan seekor bunglon. Anda mengetuk ubin untuk menemukannya sebelum waktu habis. Saya membangun ini menggunakan React state. Saya tidak menggunakan canvas atau game engine. Hal ini menjaga ukuran file tetap kecil dan waktu pemuatan tetap cepat.
Tech stack yang digunakan:
- Next.js
- Cloudflare Workers via OpenNext
Situs ini menggunakan halaman statis di edge. Bagian interaktifnya melakukan hidrasi (hydrate) di sisi klien.
Coba alat-alatnya di sini: Camo Lab: [Link] Browser Game: [Link]
Ajukan pertanyaan kepada saya tentang pewarnaan SVG atau pengaturan OpenNext.
Sumber: https://dev.to/hblai_filmlook/building-a-paint-to-hide-browser-minigame-with-nextjs-and-svg-18fn