ساخت یک مینیگیم مرورگر با موضوع رنگآمیزی برای پنهان شدن
من یک بازی مرورگر با الهام از Meccha Chameleon ساختم. در آن بازی، پنهانشوندگان بدن خود را رنگ میکنند تا با دیوارها یا جعبهها هماهنگ شوند. جستجوگران سعی میکنند آنها را پیدا کنند.
من دو ابزار بر پایه این ایده ساختم.
- Camo Lab این ابزار رنگها، الگوها و ژستهای دقیق را برای هر سطحی به شما میدهد. من از یک SVG inline واحد برای آفتابپرست استفاده کردم. رنگها بر اساس پالت سطح تغییر میکنند.
متوجه شدم که تغییر رنگهای SVG با استفاده از متغیرها آسانتر از تولید تصویر است. هر سطح یک شیء دادهای (data object) کوچک است که شامل سه رنگ هگز (hex)، یک الگو و یک امتیاز ترکیب (blend score) است. اضافه کردن یک سطح جدید تنها با یک خط کد امکانپذیر است.
- Minigame این یک شبکه قابل بازی از کاشیها است. برخی از کاشیها یک آفتابپرست را پنهان کردهاند. شما باید قبل از تمام شدن زمان، با ضربه زدن روی کاشیها آنها را پیدا کنید. من این را با استفاده از React state ساختم. از canvas یا موتور بازی (game engine) استفاده نکردم. این کار باعث میشود حجم فایل کم و سرعت بارگذاری بالا بماند.
پشته تکنولوژی (Tech stack):
- Next.js
- Cloudflare Workers از طریق OpenNext
این سایت از صفحات استاتیک در edge استفاده میکند. بخشهای تعاملی در سمت کلاینت hydrate میشوند.
ابزارها را اینجا امتحان کنید: Camo Lab: [Link] بازی مرورگر: [Link]
اگر سوالی درباره رنگآمیزی SVG یا تنظیمات OpenNext دارید، از من بپرسید.
منبع: https://dev.to/hblai_filmlook/building-a-paint-to-hide-browser-minigame-with-nextjs-and-svg-18fn