ഒരു 'പെയിന്റ് ടു ഹൈഡ്' ബ്രൗസർ മിനിഗെയിം നിർമ്മിക്കുന്നു
Meccha Chameleon എന്ന ഗെയിമിനെ ആസ്പദമാക്കി ഞാൻ ഒരു ബ്രൗസർ ഗെയിം നിർമ്മിച്ചു. ആ ഗെയിമിൽ, ഒളിച്ചിരിക്കുന്നവർ (hiders) ചുവരുകളുമായോ പെട്ടികളുമായോ (crates) ചേരുന്ന രീതിയിൽ തങ്ങളുടെ ശരീരത്തിൽ പെയിന്റ് ചെയ്യുന്നു. അവരെ കണ്ടെത്താൻ അന്വേഷകർ (seekers) ശ്രമിക്കുന്നു.
ഈ ആശയത്തെ അടിസ്ഥാനമാക്കി ഞാൻ രണ്ട് ടൂളുകൾ നിർമ്മിച്ചു.
- The Camo Lab ഏത് ഉപരിതലത്തിനും (surface) അനുയോജ്യമായ കൃത്യമായ നിറങ്ങൾ, പാറ്റേണുകൾ, പോസുകൾ എന്നിവ ഈ ടൂൾ നൽകുന്നു. കമാലിയന് (chameleon) വേണ്ടി ഞാൻ ഒരു സിംഗിൾ ഇൻലൈൻ SVG ആണ് ഉപയോഗിച്ചത്. ഉപരിതലത്തിലെ നിറങ്ങൾക്കനുസരിച്ച് (surface palette) നിറങ്ങൾ മാറുന്നു.
ഇമേജുകൾ നിർമ്മിക്കുന്നതിനേക്കാൾ എളുപ്പത്തിൽ വേരിയബിളുകൾ ഉപയോഗിച്ച് SVG നിറങ്ങൾ മാറ്റാൻ കഴിയുമെന്ന് ഞാൻ കണ്ടെത്തി. ഓരോ ഉപരിതലവും ഒരു ചെറിയ ഡാറ്റാ ഒബ്ജക്റ്റ് ആണ്. ഇതിൽ മൂന്ന് ഹെക്സ് (hex) നിറങ്ങൾ, ഒരു പാറ്റേൺ, ഒരു ബ്ലെൻഡ് സ്കോർ എന്നിവ ഉൾപ്പെടുന്നു. ഒരു പുതിയ ഉപരിതലം ചേർക്കാൻ ഒരു വരി കോഡ് മതിയാകും.
- The Minigame ഇത് കളിക്കാൻ കഴിയുന്ന ടൈലുകളുടെ ഒരു ഗ്രിഡ് ആണ്. ചില ടൈലുകൾക്കുള്ളിൽ ഒരു കമാലിയൻ ഒളിച്ചിരിക്കുന്നു. സമയം കഴിയുന്നതിന് മുമ്പ് അവ കണ്ടെത്താനായി നിങ്ങൾ ടൈലുകളിൽ ടാപ്പ് ചെയ്യണം. React state ഉപയോഗിച്ചാണ് ഞാൻ ഇത് നിർമ്മിച്ചത്. ഞാൻ ഒരു canvas അല്ലെങ്കിൽ ഗെയിം എഞ്ചിൻ ഉപയോഗിച്ചിട്ടില്ല. ഇത് ഫയൽ സൈസ് കുറയ്ക്കാനും ലോഡ് സമയം വേഗത്തിലാക്കാനും സഹായിക്കുന്നു.
The tech stack:
- Next.js
- OpenNext വഴിയുള്ള Cloudflare Workers
ഈ സൈറ്റ് എഡ്ജിൽ (edge) സ്റ്റാറ്റിക് പേജുകൾ ഉപയോഗിക്കുന്നു. ഇന്ററാക്ടീവ് ആയ ഭാഗങ്ങൾ ക്ലയന്റ് സൈഡിൽ ഹൈഡ്രേറ്റ് (hydrate) ആകുന്നു.
Try the tools here: Camo Lab: [Link] Browser Game: [Link]
SVG കളറിംഗിനെക്കുറിച്ചോ OpenNext സെറ്റപ്പിനെക്കുറിച്ചോ നിങ്ങൾക്ക് എന്തെങ്കിലും ചോദ്യങ്ങളുണ്ടെങ്കിൽ ചോദിക്കാവുന്നതാണ്.
Source: https://dev.to/hblai_filmlook/building-a-paint-to-hide-browser-minigame-with-nextjs-and-svg-18fn