Gemini की मदद से बच्चों के लिए कोई गेम बनाएं और Firebase की मदद से पब्लिश करें!

29 मिनट बाकी हैं

इस कोडलैब (कोड बनाना सीखने के लिए ट्यूटोरियल) के बारे में जानकारी

पिछली बार मई 13, 2025 को अपडेट किया गया

Riccardo Carlesso ने लिखा

1. परिचय

25 मार्च, 2025 को Google ने Gemini 2.5 लॉन्च किया. इस लॉन्च की सबसे खास बात यह थी कि इसमें सभी को "ऐडवांस कोडिंग" सुविधा [ वीडियो] आज़माने का मौका मिला:

Gemini 2.5: एक लाइन के प्रॉम्प्ट से अपना डायनासोर गेम बनाएं

इस कोडलैब में, आपको बच्चों के लिए बनाए गए एक आसान ऐप्लिकेशन "वाइब कोडिंग" के बारे में जानकारी मिलेगी. इसमें, सामान्य प्रॉम्प्ट से शुरू करके, अपनी पसंद के मुताबिक ऐप्लिकेशन बनाने का तरीका बताया गया है. हम ऐप्लिकेशन को p5.js पर टेस्ट करेंगे. आखिर में, हम इन बदलावों को Firebase Hosting पर लागू कर देंगे.इस बारे में सबसे खास बात यह है कि फ़िलहाल, पूरा स्टैक मुफ़्त है!

आपको क्या सीखने को मिलेगा

गेम ऐप्लिकेशन को वाइब-कोड करने के लिए, Gemini 2.5 का इस्तेमाल करें.
p5js.org पर कोड की जांच करें
अपने प्रॉम्प्ट / ऐप्लिकेशन को बेहतर बनाने और उसमें बार-बार बदलाव करने का तरीका.
Firebase पर स्टैटिक ऐप्लिकेशन होस्ट करने का तरीका

ध्यान दें कि यह कोडलैब, एआई से जनरेट किए गए कोड का इस्तेमाल करता है. यह कोड, हर बार एक जैसा नहीं होता. इसलिए, इस कोडलैब में दिशा-निर्देश शामिल किए गए हैं, क्योंकि लेखक को आपके आउटपुट के बारे में पता नहीं होता. कृपया इस कोड का इस्तेमाल प्रोडक्शन में न करें!

अगर आपको यह कोडलैब पसंद आया है, तो 🔥 Firebase Studio को ज़रूर देखें. इसमें आपको बेहतरीन और इंटिग्रेटेड वाइब-कोडिंग का अनुभव मिलेगा!

2. ज़रूरी शर्तें

यह कोडलैब दो चरणों में है:

सिर्फ़ वेब के लिए डेवलपमेंट. यहां आपको सबसे ज़्यादा मज़़ा आएगा और इसके लिए कोडिंग की ज़रूरत नहीं है. इसके लिए, हम अपने Gemini यूज़र इंटरफ़ेस ( gemini.google.com) और p5.js का इस्तेमाल करेंगे.
लोकल कोडिंग एनवायरमेंट. इसके लिए, आपको कोडिंग / स्क्रिप्टिंग की थोड़ी-बहुत जानकारी होनी चाहिए. साथ ही, npm / npx और vscode या IntelliJ जैसे किसी भी लोकल एडिटर को इंस्टॉल और इस्तेमाल करना चाहिए. यह दूसरा चरण ज़रूरी नहीं है. इसे सिर्फ़ तब अपनाएं, जब आपको अपने ऐप्लिकेशन को बनाए रखना हो, ताकि आपके दोस्त और परिवार के लोग मोबाइल या कंप्यूटर से उसमें खेल सकें.

पहले चरण के लिए, ब्राउज़र और कंप्यूटर (बड़ी स्क्रीन से मदद मिलेगी) होना ज़रूरी है. दूसरे चरण के बारे में जानने के लिए, आगे पढ़ें.

Gemini का यूज़र इंटरफ़ेस (यूआई)

gemini.google.com एक बेहतरीन प्लैटफ़ॉर्म है. यहां Gemini के सभी नए मॉडल आज़माए जा सकते हैं. साथ ही, अपनी इमेज और वीडियो भी बनाए जा सकते हैं! इसमें Google के कई इंटिग्रेशन हैं, जैसे कि Google Maps और होटल/फ़्लाइट/समीक्षाएं. इनकी मदद से, अपनी अगली छुट्टियों का प्लान बनाना आसान हो जाता है!

सलाह: अगर आपको कोडिंग पसंद है, तो AI Studio का भी इस्तेमाल करें. यह एक ऐसा इंटरफ़ेस है जहां एलएलएम इंटरैक्शन का प्रोटोटाइप बनाया जा सकता है. उदाहरण के लिए, इमेज बनाना. साथ ही, पेज से सीधे Python कोड भी पाया जा सकता है!

p5.js

p5.js एक मुफ़्त और ओपन-सोर्स JavaScript लाइब्रेरी है. इसकी मदद से, क्रिएटिव कोडिंग को कलाकारों, डिज़ाइनर, शिक्षकों, और अन्य लोगों के लिए ऐक्सेस किया जा सकता है. यह प्रोसेसिंग भाषा पर आधारित है. यह वेब ब्राउज़र में कोड का इस्तेमाल करके, इंटरैक्टिव विज़ुअल और इंटरैक्टिव कॉन्टेंट बनाने की प्रोसेस को आसान बनाती है.

लोकल कोडिंग [ज़रूरी नहीं]

अगर आपको ऐप्लिकेशन को बनाए रखना है, तो ज़्यादा सेट अप करना होगा:

कोई स्थानीय कोड एडिटर ( Visual Studio code, IntelliJ, ..)
कोई git खाता ( github / gitlab / bitbucket), जहां आपका कोड सेव किया जा सके.
npm को स्थानीय तौर पर इंस्टॉल किया गया हो. अगर यह उपयोगकर्ता के स्पेस में npx या मिलती-जुलती टेक्नोलॉजी के ज़रिए इंस्टॉल किया गया हो, तो बेहतर होगा.

इसके अलावा, हम बाद में एक Firebase खाता सेट अप करेंगे.

इसके लिए, हमें कोडिंग की कुछ स्किल भी चाहिए, जैसे:

npm पैकेज इंस्टॉल करने की सुविधा
फ़ाइल सिस्टम के साथ इंटरैक्ट करने की सुविधा (फ़ोल्डर और फ़ाइलें बनाना)
git (git add, git commit, git push) के साथ इंटरैक्ट करने की सुविधा.

अगर आपको यहां कुछ समझ नहीं आ रहा है, तो याद रखें: एलएलएम की डिग्री वाले लोग आपकी मदद कर सकते हैं. उदाहरण के लिए, सुझाव पाने के लिए, "Gemini 2.0 flash" या मिलते-जुलते मॉडल का इस्तेमाल किया जा सकता है. अगर आपको अब भी यह मुश्किल लग रहा है, तो दूसरे चरण को पूरी तरह से छोड़ा जा सकता है. पहले फ़ेज़ में, लोगों को ज़रूरत के मुताबिक इनाम मिलना चाहिए.

3. चलिए, अपना पहला गेम बनाते हैं!

gemini.google.com खोलें और कोड इस्तेमाल करने की सुविधा वाला कोई मॉडल चुनें, जैसे कि 2.5. यह विकल्प, उपलब्धता, कीमत, और तारीख के हिसाब से अलग-अलग हो सकता है. लेख लिखते समय, सबसे अच्छा विकल्प यह होगा:

Gemini 2.5 Flash (ज़्यादा तेज़ी से बदलाव)
Gemini 2.5 Pro (बेहतर आउटपुट).

Gemini के मॉडल के बारे में ज़्यादा जानकारी यहां उपलब्ध है.

हमारा पहला गेम प्रॉम्प्ट

इस वीडियो में बताया गया है कि शुरुआती प्रॉम्प्ट इतना आसान हो सकता है:

Make me a captivating endless runner game. Key instructions on the screen.
p5js scene, no HTML. I like pixelated dinosaurs and interesting backgrounds.

इसमें अपनी पसंद के मुताबिक बदलाव करें:

मध्यकालीन / फ़्यूचरिस्टिक / सायबरपंक सेटिंग
क्या मैसेज में बहुत सारे इमोजी हैं या सिर्फ़ एक इमोजी है?
आपको पीला या बैंगनी रंग पसंद है.
हो सकता है कि आपके बच्चे को यूनिकॉर्न, डायनासोर या पॉकेमॉन पसंद हों.

प्रॉम्प्ट को ब्राउज़र में चिपकाने के बाद, आपको Gemini के सोचने की प्रक्रिया दिखेगी. जी हां, Gemini 2.5 एक थिंकिंग मॉडल है. इसलिए, यह कई टास्क शुरू करेगा. समय के साथ इन टास्क में बदलाव दिखेगा. बदलते हुए ड्रॉपडाउन पर क्लिक करके, यह देखा जा सकता है कि क्या हो रहा है. इसके अलावा, नतीजे के दिखने का इंतज़ार भी किया जा सकता है:

आखिर में, आपके पास काम करने वाला JavaScript होना चाहिए.

अब सबसे ऊपर मौजूद, कॉपी करें बटन पर क्लिक करें:

p5.js पर गेम की जांच करना

अब गेम की जांच करने का समय आ गया है!

p5.js एडिटर यहां खोलें: https://editor.p5js.org/
मौजूदा sketch.js कोड को चुनें और मिटाएं.
अपना कोड चिपकाएं

आपका पेज ऐसा दिखना चाहिए:

आखिर में, चलाएं बटन दबाएं.

इसके बाद, दो चीज़ें हो सकती हैं: आपका कोड काम कर सकता है या नहीं. आइए, दोनों मामलों के हिसाब से निर्देशों का पालन करें:

आपका कोड काम न करे
आपका कोड पहली बार में काम कर जाता है!

आइए, अगले दो पैराग्राफ़ में देखें कि दोनों स्थितियों को मैनेज कैसे किया जा सकता है.

(पहला मामला) मेरा कोड काम नहीं कर रहा है!

अगर आपको इस तरह की गड़बड़ी का मैसेज मिलता है, तो उसे कॉपी करके Gemini में चिपकाएं. उसे कोड ठीक करने दें!

(दूसरा उदाहरण) मेरा कोड काम कर रहा है!

अगर आपका कोड काम करता है, तो आपको पेज के सबसे दाईं ओर एक विज़ुअल गेम दिखेगा.

👏 बधाई हो, आपने एआई का इस्तेमाल करके अपना पहला गेम चलाया है!

ध्यान दें: कोड मौजूद होने पर, ऐप्लिकेशन सिर्फ़ आपके ब्राउज़र में काम करता है. अगर आपको अपने परिवार और दोस्तों को ऐप्लिकेशन दिखाना है, तो आपको होस्टिंग की सुविधा चाहिए. हालांकि, हमारे पास आपके लिए एक अच्छा विकल्प है! पढ़ते रहें.

अब आप अगले चैप्टर के लिए तैयार हैं.

अन्य बदलाव

अब अपने कोड को किसी सुरक्षित जगह पर सेव करें, ताकि अगर आपने उसे मिटा दिया, तो उसे वापस पाया जा सके. अगर आप चाहें, तो एक बार दोहराएं. उदाहरण के लिए, लेखक को Super Mario का डबल जंप बहुत पसंद है. इसलिए, कुछ ऐसा जोड़ा जा सकता है:

The game is great, thanks! Please allow for my character to double jump.

इसमें अपनी पसंद के मुताबिक बदलाव किए जा सकते हैं. हो सकता है कि आपको ज़्यादा स्कोर पाने के लिए, किरदार का नाम सेव करना हो या इसे ज़्यादा मुश्किल बनाने के लिए, समय के साथ इसकी स्पीड बढ़ानी हो वगैरह. प्रॉम्प्ट सिर्फ़ अंग्रेज़ी भाषा में दिया जा सकता है!

अहम जानकारी: Gemini आपको सिर्फ़ वही बदलाव दिखाता है जिसे आपको लागू करना है. उदाहरण के लिए, यह XYZ फ़ंक्शन के लिए बदलाव है. आपके पास प्रॉम्प्ट सेट करने का विकल्प है, ताकि आपको अपडेट किया गया पूरा कोड मिल सके. इसके लिए,

"Please give me the entire updated code, not just the changed function"

. इससे, आपको काट-छांट करने और कॉपी-पेस्ट करने में आसानी होगी.

चेतावनियां

हो सकता है कि आप अपनी Gemini चैट को बुकमार्क करना चाहें. हो सकता है कि आप इसका नाम बदलकर "p5js my first game" रखना चाहें या Gemini का परमानेंट लिंक लिखना चाहें. जैसे, " https://gemini.google.com/app/abcdef123456789", ताकि बाद में इसका इस्तेमाल किया जा सके.

4. इस कोड को स्थानीय तौर पर चलाएं

इस समय, आपके पास ये चीज़ें होनी चाहिए:

Gemini ब्राउज़र की खुली विंडो, जिसमें कुछ काम करने वाला कोड है.
p5.js ब्राउज़र विंडो में चल रहा गेम
npm इंस्टॉल किया गया कोई लोकल कोडिंग एनवायरमेंट.

यह कोडलैब का सबसे मुश्किल हिस्सा है. इसके लिए, कोडिंग का बुनियादी अनुभव होना ज़रूरी है.

डिपेंडेंसी इंस्टॉल करना

अगर आपके पास npm और node नहीं है, तो nvm जैसे किसी वर्शन मैनेजर की मदद से npm इंस्टॉल करें . अपने ऑपरेटिंग सिस्टम के लिए, इंस्टॉल करने के निर्देशों का पालन करें.

हम यह भी मान रहे हैं कि आपने कोडिंग IDE का इस्तेमाल किया है. हम अपने स्क्रीनशॉट और उदाहरणों में Visual Studio कोड का इस्तेमाल करेंगे, लेकिन किसी भी कोड का इस्तेमाल किया जा सकता है.

लोकल एनवायरमेंट सेट अप करना

अब आपके पास फ़ाइल का स्ट्रक्चर बनाने का विकल्प है.

उदाहरण के तौर पर, सेट अप स्क्रिप्ट दी गई है. फ़ोल्डर और फ़ाइलें बनाकर, मैन्युअल तरीके से भी ऐसा किया जा सकता है:

# This works for Mac and Linux. For Windows, please use other tools.
mkdir my-first-vibecoding-project/
cd my-first-vibecoding-project/
git init 
touch README.md PROMPT.md 
mkdir public/
cd public/ 
touch index.html sketch.js style.css
git add .
# Skipping quotes which can be tricky
git commit -a -m committing_empty_skeleton

फ़ोल्डर का फ़ाइनल स्ट्रक्चर ऐसा दिखना चाहिए:

my-first-vibecoding-project/
├── PROMPT.md
├── README.md
└── public
    ├── index.html
    ├── sketch.js
    └── style.css

आपको यह जानकारी यहां भी मिल सकती है.

अब अपना पसंदीदा कोड एडिटर (उदाहरण के लिए, code my-first-vibecoding-project/ ) खोलें और editor.p5js.org के कॉन्टेंट को public/ में मौजूद तीन फ़ाइलों में चिपकाएं:

README.md ← यहां Gemini Chat का पेर्मलिंक डाला जा सकता है. साथ ही, ऐप्लिकेशन के लॉन्च होने पर, यहां उसका लैंडिंग पेज डाला जाएगा.
PROMPT.md ← यहां आपको अपने सभी प्रॉम्प्ट जोड़ने होंगे. इन्हें H2 पैराग्राफ़ से अलग किया जाना चाहिए. अगर आपको यह बताना है कि आपने कोई प्रॉम्प्ट क्यों दिया है, तो अपने प्रॉम्प्ट को तीन बैकटिक ( उदाहरण) में डालें.
**public/index.html** ← अपना एचटीएमएल कोड यहां कॉपी करें
**public/sketch.js** ← अपना JS कोड यहां कॉपी करें
**public/style.css** ← अपना सीएसएस कोड यहां कॉपी करें

सार्वजनिक फ़ोल्डर में, कस्टम PNG जैसी अन्य ऐसेट हो सकती हैं.

5. Firebase पर सेट अप और डिप्लॉय करना

Firebase सेट अप करना (सिर्फ़ पहली बार)

पक्का करें कि आपकी मशीन में npm इंस्टॉल हो.

टर्मिनल में, इनमें से कोई एक टाइप करें (दोनों काम करते हैं):

# to install on the machine (requires privilege)
npm install -g firebase-tools
# to install locally (low privilege needed but might need to repeat a few times)
npm install firebase-tools

अब आपके पास firebase निर्देश देने का विकल्प होगा. अगर आपको कोई समस्या आती है, तो सार्वजनिक दस्तावेज़ देखें.

Firebase को शुरू करना

इस सेक्शन में, हम Firebase होस्टिंग सेट अप करेंगे. यह बहुत आसान फ़्लो है, लेकिन पहली बार इसे समझने में थोड़ा समय लग सकता है.

पक्का करें कि आप public/ डायरेक्ट्री के ठीक ऊपर मौजूद डायरेक्ट्री में हों, जिसमें आपकी फ़ाइलें मौजूद हैं. लिस्टिंग (ls -al या dir) में कुछ ऐसा दिखना चाहिए:

$ ls 
PROMPT.md
README.md
public/

[पहला चरण] कंसोल पर, यह टाइप करें: firebase init

कर्सर का इस्तेमाल करके, नीचे की ओर "होस्टिंग: .." पर जाएं. इसके बाद, SPACE और फिर Enter दबाएं. (क्यों? यह एक से ज़्यादा विकल्प वाला सवाल है. इसलिए, आपको विकल्प चुनने के साथ-साथ अगले पेज पर जाना होगा)
[दूसरा चरण] अब आपके पास कोई मौजूदा प्रोजेक्ट चुनने (पहला विकल्प) या नया प्रोजेक्ट बनाने (दूसरा विकल्प) का विकल्प है:

ध्यान दें: अगर आपके पास कोई मौजूदा Cloud प्रोजेक्ट है, तो हो सकता है कि वह Firebase प्रोजेक्ट न हो. Firebase प्रोजेक्ट, GCP प्रोजेक्ट का सबसेट होते हैं. इन्हें Firebase प्रोजेक्ट बनाने के लिए, आपको कुछ और काम करने होंगे. इसके लिए, तीसरा विकल्प चुनें.
अगर आपको कोई नाम नहीं सूझ रहा है, तो "नया प्रोजेक्ट बनाएं" का इस्तेमाल करें और "p5js-YOURNAME-YOURAPP" (उदाहरण के लिए, "p5js-riccardo-tetris") जैसा कोई नाम जोड़ें.

[तीसरा चरण] What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris)
Enter दबाएं.

[चौथा चरण] ? What do you want to use as your public directory? (public)
ENTER दबाएं (हमने public/ को जान-बूझकर सेट अप किया है)

[पांचवां चरण] ? Configure as a single-page app (rewrite all urls to /index.html)? No
Enter दबाएं (नहीं)

[छठा चरण] ? Set up automatic builds and deploys with GitHub? No
Enter दबाएं - नहीं

[सातवां चरण] ? File public/index.html already exists. Overwrite? (y/N)
ENTER दबाएं (नहीं).
चेतावनी ऐसा करने से गड़बड़ी हो सकती है. अगर इसे ओवरराइट किया जाता है, तो नया index.html, p5js के साथ काम नहीं करेगा!

अगर सब कुछ ठीक से काम करता है, तो आपको यह दिखेगा:

इन कार्रवाइयों से कुछ फ़ाइलें बन गई होंगी:

.firebaserc
.gitignore
firebase.json
public/404.html

खास तौर पर, .firebaserc में आपका प्रोजेक्ट आईडी होना चाहिए. इसे प्रोग्राम के हिसाब से खींचने के लिए, यह तरीका अपनाएं: cat .firebaserc | jq .projects.default -r

चेतावनी: index.html देखें. अगर यह 16 लाइनों से ज़्यादा लंबी है और/या इसमें firebase शब्द है, तो आपने गलती से p5js फ़ाइलों को ओवरराइट कर दिया है. कोई बात नहीं, बस पुराने index.html को git या p5js एडिटर से वापस लेना न भूलें.

लोकल टेस्टिंग

फ़ीडबैक लूप के इंतज़ार का समय कम करने के लिए, पहले स्थानीय तौर पर कुछ आज़माएं.

ऐसा करने के लिए, Firebase टीम के बेहतरीन CLI सुइट का इस्तेमाल करें. उदाहरण के लिए:

$ firebase emulators:start

पोर्ट 5000 ( http://127.0.0.1:5000/ ) पर वेब सर्वर शुरू करना चाहिए, ताकि पुश करने से पहले स्थानीय तौर पर जांच की जा सके.

Firebase पर डिप्लॉय करना

अब आखिरी निर्देश देने का समय आ गया है:

$ firebase deploy

इससे कई कार्रवाइयां ट्रिगर होनी चाहिए. आखिरी कुछ लाइनें कुछ ऐसी दिखनी चाहिए:

$ firebase deploy
[...]
✔  hosting[YOUR_PROJECT]: release complete 
✔  Deploy complete! 

Project Console: https://console.firebase.google.com/project/YOUR_PROJECT/overview
Hosting URL: https://YOUR_PROJECT.web.app

इससे आपको होस्टिंग यूआरएल मिल जाएगा. इसे आज़माएं!

अगर डिप्लॉयमेंट सफल होता है, लेकिन आपको कोई खाली पेज दिखता है या डिप्लॉयमेंट में कोई गड़बड़ी होती है, तो ये काम किए जा सकते हैं:

अपने ब्राउज़र के "डेवलपर टूल" खोलें और गड़बड़ी ढूंढें. इसके बाद, Gemini से इस गड़बड़ी को ठीक करने में मदद करने के लिए कहें. इसके लिए, इस तरह का प्रॉम्प्ट इस्तेमाल करें:

I've deployed the script correctly with Firebase, but I now see a blank page with this error:

[ paste detailed JS console error ]

♾️ दोहराएं!

इस प्रोसेस को जितनी बार चाहें उतनी बार दोहराया जा सकता है. जब तक आपको नतीजे पसंद न आ जाएं, तब तक प्रॉम्प्ट जारी रखा जा सकता है.

इन बातों का ध्यान रखना ज़रूरी है:

Gemini > p5.js > Gemini लूप में, दोहराव वाला लूप Gemini > लोकल होस्ट > क्लाउड रन पर डिप्लॉय करें > ब्राउज़र पर ऐप्लिकेशन को टेस्ट करें (रीफ़्रेश करें) की तुलना में काफ़ी तेज़ी से चलता है.
प्रॉम्प्ट और कोड, दोनों के वर्शन बनाने के लिए git का इस्तेमाल करें. हो सकता है कि आप प्रॉम्प्ट N और कोड N पर वापस जाना चाहें. खास तौर पर, आपको हर उस sketch.js को git commit करना चाहिए जिसे आपने पुश किया है. ऐसा इसलिए, क्योंकि वहां बग छिपे हो सकते हैं.

ध्यान दें कि कुछ गेम कीबोर्ड के साथ अच्छी तरह से काम करते हैं, लेकिन माउस या मोबाइल फ़ोन पर टैप करने से ठीक से काम नहीं करते. कोड को बेहतर बनाने का यह सबसे सही समय है.

6. प्रॉम्प्ट के बारे में सलाह

पहले से ही कई गेम बनाने के अनुभव के आधार पर कुछ सुझाव.

प्रॉम्प्ट का वर्शन बनाना

आपको अपने मूल प्रॉम्प्ट में गलतियां दिख सकती हैं. इसका git वर्शन होना चाहिए. यहां कुछ कोड पाथ दिए गए हैं:

अगर आपको जो दिख रहा है वह पसंद आया है और आपको इसके बाद के सब प्रॉम्प्ट के साथ gemini का इस्तेमाल करके, इन सभी को किसी जगह पर ट्रैक करना है, तो यह दिलचस्प हो सकता है (प्रॉम्प्ट 1,2,3 - तीन शॉट वाला उदाहरण1 - example2).
अगर आपको prompt1 से बनाए गए ऐप्लिकेशन की ज़रूरत नहीं है, तो हो सकता है कि आप प्रॉम्प्ट को बेहतर बनाना चाहें. इसके लिए, कोड को हटाकर, बदले गए कोड (prompt 1 v1, prompt1 v2, prompt1, v3, ..) के साथ फिर से शुरू करें

हालांकि, दोनों तरीकों को एक साथ भी इस्तेमाल किया जा सकता है.

मोबाइल पर काम करने की सुविधा

आपने जो गेम बनाया है उसके हिसाब से, आपको उपयोगकर्ता के साथ कुछ इंटरैक्शन करने की ज़रूरत पड़ सकती है. क्या इस इंटरैक्शन के लिए कीबोर्ड की ज़रूरत है? क्या इसका इस्तेमाल सिर्फ़ स्क्रीन पर टैप करके किया जा सकता है, जैसे कि मोबाइल पर? प्रॉम्प्ट में इस बारे में साफ़ तौर पर बताएं. आपको अपने कीबोर्ड पर कुछ बटन बनाने पड़ सकते हैं. Tetris 3D का उदाहरण देखें. मोबाइल पर इस्तेमाल करने के लिए, dungemoji से जुड़ी समस्याएं भी देखें.

सीधे Gemini पर JavaScript की गड़बड़ियों / स्क्रीनशॉट की शिकायत करना

Gemini, p5js के साथ आपके इंटरैक्शन को नहीं देख सकता. इसलिए, Gemini पर Javascript की गड़बड़ियां चिपकाएं. ध्यान दें कि Gemini में कई तरह के मोड उपलब्ध हैं. इसलिए, अगर आपने यूज़र इंटरफ़ेस (यूआई) में बदलाव किए हैं, जैसे कि टाइटल को छोटा करना या स्कोर को कम करना, तो गेम के स्क्रीनशॉट भी अटैच किए जा सकते हैं! कोडिंग के सुझाव, राय या शिकायत को देखने का यह तरीका पहले कभी इतना मज़ेदार नहीं था!

7. बधाई हो!

🎉 कोडलैब पूरा करने के लिए बधाई.

हमने देखा है कि Gemini की मदद से गेम बनाना कितना आसान है. साथ ही, Firebase की मदद से गेम को होस्ट करना और उसे दूसरों के साथ शेयर करना कितना आसान है.

हमने क्या-क्या शामिल किया है

Gemini 2.5 की मदद से गेम बनाएं.
Firebase पर डिप्लॉय करना

अब 👥 इसकी जानकारी शेयर करने का समय आ गया है! अपने नए गेम (your-project.web.app) को LinkedIn या Twitter पर #VibeCodeAGameWithGemini हैशटैग के साथ शेयर करें. साथ ही, LinkedIn पर लेखक को टैग करें. इससे हमें यह पता चलेगा कि यह कोडलैब कितना आकर्षक है और इस तरह के और कोडलैब लिखे जा सकते हैं या नहीं!

मुझे और जानकारी चाहिए!

अगर आपको और संसाधन चाहिए, तो ये गेम और प्रॉम्प्ट देखें:

Gemini 2.5 और p5.js की मदद से, एक हफ़्ते के अंदर बच्चों के लिए पांच गेम बनाएं! इस लेख में, छह उदाहरणों की मदद से, किसी गेम को वाइब कोडिंग करने के बारे में बताया गया है.
palladius/genai-googlecloud-scripts (10 ऐप्लिकेशन - कोड और प्रॉम्प्ट वाला GitHub repo): Tetris, Pacman, Connect 4, और यहां तक कि पुराने गेम के शौकीनों के लिए Rogue क्लोन भी! इसमें इन सभी गेम के प्रॉम्प्ट शामिल हैं. अपनी पसंद का प्रॉम्प्ट चुनें, उसमें बदलाव करें, और मज़े करें!

अगर आपको लगता है कि आपने आज बहुत मेहनत की है, तो 🔥 Firebase Studio आज़माएं. यहां आइडिया > प्रॉम्प्ट > कोड > ऐप्लिकेशन लूप, सभी एक ही ब्राउज़र विंडो में मौजूद होते हैं.

यहां कुछ गेम के सैंपल दिए गए हैं:

फ़ाइनल गेम कुछ ऐसा दिख सकता है:

3D टेट्रिस
भाषा से जुड़ा गेम
गलत क्लोन
Pacman का क्लोन.

फिर से, अंग्रेज़ी ही सीमित है!

🎉 कोडिंग करते रहें!

गलती की शिकायत करें