ब्राउझरमध्ये लपण्यासाठी रंगकाम करणारे मिनीगेम तयार करणे
मी Meccha Chameleon कडून प्रेरणा घेऊन एक ब्राउझर गेम तयार केला आहे. त्या गेममध्ये, लपणारे लोक भिंती किंवा क्रेट्सशी जुळवून घेण्यासाठी स्वतःच्या शरीराला रंगवतात. शोधणारे लोक त्यांना शोधण्याचा प्रयत्न करतात.
मी या कल्पनेवर आधारित दोन साधने तयार केली आहेत.
- The Camo Lab हे साधन तुम्हाला कोणत्याही पृष्ठभागासाठी (surface) अचूक रंग, नमुने (patterns) आणि पोझ (poses) देते. मी गिरगिटासाठी (chameleon) एका सिंगल इनलाइन SVG चा वापर केला आहे. पृष्ठभागाच्या पॅलेटनुसार (palette) रंग बदलतात.
मला असे आढळले की इमेज तयार करण्यापेक्षा व्हेरिएबल्सचा (variables) वापर करून SVG चे रंग बदलणे अधिक सोपे आहे. प्रत्येक पृष्ठभाग हा एक छोटा डेटा ऑब्जेक्ट आहे. यामध्ये तीन हेक्स (hex) रंग, एक नमुना आणि एक ब्लेंड स्कोअर समाविष्ट आहे. नवीन पृष्ठभाग जोडण्यासाठी फक्त एक ओळ कोड लागतो.
- The Minigame हे टाइल्सचे एक खेळण्यायोग्य ग्रिड आहे. काही टाइल्समध्ये गिरगिट लपलेले असते. टाइमर संपण्यापूर्वी त्यांना शोधण्यासाठी तुम्ही टाइल्सवर टॅप करता. मी हे React state वापरून तयार केले आहे. मी यासाठी canvas किंवा गेम इंजिनचा वापर केलेला नाही. यामुळे फाईलचा आकार लहान राहतो आणि लोड होण्याचा वेगही वाढतो.
टेक स्टॅक (Tech stack):
- Next.js
- OpenNext द्वारे Cloudflare Workers
ही साइट 'edge' वर स्टॅटिक पेजेस वापरते. इंटरअॅक्टिव्ह भाग क्लायंट साइडवर हायड्रेट (hydrate) होतात.
ही साधने येथे तपासा: Camo Lab: [Link] Browser Game: [Link]
SVG कलरिंग किंवा OpenNext सेटअपबद्दल मला प्रश्न विचारा.
स्त्रोत: https://dev.to/hblai_filmlook/building-a-paint-to-hide-browser-minigame-with-nextjs-and-svg-18fn