ਇੱਕ 'paint to hide' ਬ੍ਰਾਊਜ਼ਰ ਮਿਨੀਗੇਮ ਬਣਾਉਣਾ
ਮੈਂ Meccha Chameleon ਤੋਂ ਪ੍ਰੇਰਿਤ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਗੇਮ ਬਣਾਈ ਹੈ। ਉਸ ਗੇਮ ਵਿੱਚ, ਲੁਕਣ ਵਾਲੇ (hiders) ਕੰਧਾਂ ਜਾਂ ਪੇਟੀਆਂ ਨਾਲ ਮੇਲ ਖਾਣ ਲਈ ਆਪਣੇ ਸਰੀਰ ਨੂੰ ਰੰਗਦੇ ਹਨ। ਲੱਭਣ ਵਾਲੇ (seekers) ਉਹਨਾਂ ਨੂੰ ਲੱਭਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਨ।
ਮੈਂ ਇਸ ਵਿਚਾਰ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਦੋ ਟੂਲ ਬਣਾਏ ਹਨ।
- The Camo Lab ਇਹ ਟੂਲ ਤੁਹਾਨੂੰ ਕਿਸੇ ਵੀ ਸਤਹ (surface) ਲਈ ਸਹੀ ਰੰਗ, ਪੈਟਰਨ ਅਤੇ ਪੋਜ਼ ਦਿੰਦਾ ਹੈ। ਮੈਂ ਕੈਮਲੀਅਨ ਲਈ ਇੱਕ ਸਿੰਗਲ inline SVG ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਹੈ। ਰੰਗ ਸਤਹ ਦੇ ਪੈਲੇਟ (palette) ਦੇ ਅਧਾਰ 'ਤੇ ਬਦਲਦੇ ਹਨ।
ਮੈਂ ਪਾਇਆ ਕਿ ਚਿੱਤਰ (images) ਬਣਾਉਣ ਨਾਲੋਂ ਵੇਰੀਏਬਲਜ਼ (variables) ਦੀ ਵਰਤੋਂ ਕਰਕੇ SVG ਰੰਗ ਬਦਲਣਾ ਵਧੇਰੇ ਆਸਾਨ ਹੈ। ਹਰ ਸਤਹ ਇੱਕ ਛੋਟਾ ਡਾਟਾ ਆਬਜੈਕਟ ਹੈ। ਇਸ ਵਿੱਚ ਤਿੰਨ hex ਰੰਗ, ਇੱਕ ਪੈਟਰਨ ਅਤੇ ਇੱਕ ਬਲੈਂਡ ਸਕੋਰ ਸ਼ਾਮਲ ਹੈ। ਇੱਕ ਨਵੀਂ ਸਤਹ ਜੋੜਨ ਲਈ ਸਿਰਫ਼ ਇੱਕ ਲਾਈਨ ਕੋਡ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
- The Minigame ਇਹ ਟਾਈਲਾਂ ਦਾ ਇੱਕ ਖੇਡਣਯੋਗ ਗਰਿੱਡ ਹੈ। ਕੁਝ ਟਾਈਲਾਂ ਵਿੱਚ ਕੈਮਲੀਅਨ ਲੁਕੇ ਹੁੰਦੇ ਹਨ। ਟਾਈਮਰ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਉਹਨਾਂ ਨੂੰ ਲੱਭਣ ਲਈ ਤੁਸੀਂ ਟਾਈਲਾਂ 'ਤੇ ਟੈਪ ਕਰਦੇ ਹੋ। ਮੈਂ ਇਸਨੂੰ React state ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਣਾਇਆ ਹੈ। ਮੈਂ ਕਿਸੇ canvas ਜਾਂ ਗੇਮ ਇੰਜਣ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕੀਤੀ। ਇਸ ਨਾਲ ਫਾਈਲ ਦਾ ਆਕਾਰ ਛੋਟਾ ਅਤੇ ਲੋਡ ਹੋਣ ਦਾ ਸਮਾਂ ਤੇਜ਼ ਰਹਿੰਦਾ ਹੈ।
ਟੈਕ ਸਟੈਕ:
- Next.js
- Cloudflare Workers via OpenNext
ਸਾਈਟ edge 'ਤੇ ਸਟੈਟਿਕ ਪੇਜਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ। ਇੰਟਰਐਕਟਿਵ ਹਿੱਸੇ 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