براؤزر میں چھپنے کے لیے پینٹ والا منی گیم بنانا
میں نے Meccha Chameleon سے متاثر ہو کر ایک براؤزر گیم بنائی ہے۔ اس گیم میں، چھپنے والے (hiders) دیواروں یا کریٹس (crates) سے میل کھانے کے لیے اپنے جسموں پر رنگ کرتے ہیں۔ تلاش کرنے والے (seekers) انہیں ڈھونڈنے کی کوشش کرتے ہیں۔
میں نے اس آئیڈیا کے گرد دو ٹولز بنائے ہیں۔
- The Camo Lab یہ ٹول آپ کو کسی بھی سطح (surface) کے لیے درست رنگ، پیٹرنز اور پوز فراہم کرتا ہے۔ میں نے chameleon کے لیے ایک ہی inline SVG استعمال کیا ہے۔ رنگ سطح کے پیلیٹ (palette) کے مطابق تبدیل ہوتے ہیں۔
میں نے محسوس کیا کہ تصاویر بنانے کے مقابلے میں ویری ایبلز (variables) کے ذریعے SVG رنگوں کو تبدیل کرنا زیادہ آسان ہے۔ ہر سطح ایک چھوٹا ڈیٹا آبجیکٹ ہے۔ اس میں تین hex رنگ، ایک پیٹرن اور ایک بلینڈ اسکور شامل ہے۔ ایک نئی سطح شامل کرنے کے لیے کوڈ کی صرف ایک لائن درکار ہوتی ہے۔
- The Minigame یہ ٹائلز کا ایک قابلِ کھیل گرڈ (grid) ہے۔ کچھ ٹائلز کے پیچھے chameleon چھپا ہوتا ہے۔ ٹائمر ختم ہونے سے پہلے انہیں تلاش کرنے کے لیے آپ ٹائلز پر ٹیپ کرتے ہیں۔ میں نے اسے React state کا استعمال کرتے ہوئے بنایا ہے۔ میں نے canvas یا کسی گیم انجن کا استعمال نہیں کیا۔ اس سے فائل کا سائز چھوٹا اور لوڈ ہونے کا وقت تیز رہتا ہے۔
ٹیک اسٹیک (Tech stack):
- Next.js
- OpenNext کے ذریعے Cloudflare Workers
سائٹ edge پر static pages استعمال کرتی ہے۔ انٹرایکٹو حصے client side پر 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