Membina permainan mini pelayar "paint to hide"
Saya telah membina sebuah permainan pelayar yang diinspirasikan oleh Meccha Chameleon. Dalam permainan tersebut, pemain yang bersembunyi akan mengecat badan mereka supaya sepadan dengan dinding atau peti. Pencari pula akan cuba mencari mereka.
Saya telah membina dua alatan berasaskan idea ini.
- The Camo Lab Alatan ini memberikan anda warna, corak, dan gaya (pose) yang tepat untuk sebarang permukaan. Saya menggunakan satu inline SVG untuk bunglon tersebut. Warnanya berubah berdasarkan palet permukaan.
Saya mendapati bahawa menukar warna SVG dengan pemboleh ubah adalah lebih mudah daripada menjana imej. Setiap permukaan adalah satu objek data kecil. Ia merangkumi tiga warna hex, satu corak, dan skor campuran (blend score). Menambah permukaan baharu hanya memerlukan satu baris kod.
- Permainan Mini Ini adalah grid jubin yang boleh dimainkan. Beberapa jubin menyembunyikan seekor bunglon. Anda perlu mengetik jubin tersebut untuk mencarinya sebelum pemasa tamat. Saya membina ini menggunakan React state. Saya tidak menggunakan canvas atau enjin permainan (game engine). Ini memastikan saiz fail kekal kecil dan masa pemuatan adalah pantas.
Stack teknologi:
- Next.js
- Cloudflare Workers melalui OpenNext
Laman web ini menggunakan halaman statik di edge. Bahagian interaktif akan dihidrasi (hydrate) pada bahagian klien.
Cuba alatan ini di sini: Camo Lab: [Link] Permainan Pelayar: [Link]
Tanya saya soalan tentang pewarnaan SVG atau tetapan OpenNext.
Sumber: https://dev.to/hblai_filmlook/building-a-paint-to-hide-browser-minigame-with-nextjs-and-svg-18fn