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

1. परिचय

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

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

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

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

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

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

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 की एक मुफ़्त और ओपन-सोर्स लाइब्रेरी है. यह कलाकारों, डिज़ाइनर, शिक्षकों, और अन्य लोगों के लिए क्रिएटिव कोडिंग को ऐक्सेस करना और उसे शामिल करना आसान बनाती है. यह Processing भाषा पर आधारित है. इससे वेब ब्राउज़र में कोड का इस्तेमाल करके, इंटरैक्टिव विज़ुअल और इंटरैक्टिव कॉन्टेंट बनाने की प्रोसेस आसान हो जाती है.

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

अगर आपको अपना ऐप्लिकेशन बनाए रखना है, तो आपको कुछ और सेटअप करना होगा:

लोकल कोड एडिटर ( 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 में चिपकाया जा सकता है. उसे आपके लिए कोड ठीक करने दें!

(case 2) My code works!

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

👏 बधाई हो, आपने एआई की मदद से पहला गेम शुरू कर दिया है!

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

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

अन्य वर्शन

अब आपको अपने कोड को किसी जगह पर सेव कर लेना चाहिए, ताकि अगर वह टूट जाए, तो आपके पास उसका बैकअप हो. अगर आपको लगता है कि जवाब में और जानकारी जोड़ी जा सकती है, तो एक बार और जवाब जनरेट किया जा सकता है. उदाहरण के लिए, लेखक को 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 नहीं है, तो हमारा सुझाव है कि आप npm को किसी वर्शन मैनेजर के ज़रिए इंस्टॉल करें. जैसे, nvm . अपने ऑपरेटिंग सिस्टम के लिए, इंस्टॉल करने के निर्देशों का पालन करें.

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

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

इस समय, अपने हिसाब से फ़ाइल स्ट्रक्चर बनाया जा सकता है.

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

# 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** ← copy your JS code here
**public/style.css** ← copy your CSS code here

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

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/

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

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

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

[step 3] What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris)
ENTER दबाएं.

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

[step 5] ? Configure as a single-page app (rewrite all urls to /index.html)? No
ENTER (नहीं) दबाएं

[step 6] ? Set up automatic builds and deploys with GitHub? No
ENTER - NO दबाएं

[step 7] ? 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 फ़ाइलों को बदल दिया है. कोई बात नहीं, बस git या p5js एडिटर से पुराने index.html को वापस लाना न भूलें.

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

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

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

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

6. प्रॉम्प्ट लिखने से जुड़ी सलाह

हमने पहले भी कई गेम बनाए हैं. इसलिए, हम आपको कुछ सुझाव देना चाहते हैं.

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

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

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

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

Mobile functionality

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

JavaScript से जुड़ी गड़बड़ियों / स्क्रीनशॉट के बारे में सीधे Gemini को सुझाव/राय देना या शिकायत करना

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 (github repo with ~10 apps - code and prompt): Tetris, Pacman, Connect 4 and even a Rogue clone for nostalgics! इसमें इन सभी गेम के प्रॉम्प्ट शामिल हैं. अपना पसंदीदा प्रॉम्प्ट चुनें, उसे अपने हिसाब से बदलें, और मज़े करें!

यहां कुछ सैंपल गेम दिए गए हैं, जिन्हें बनाया जा सकता है:

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

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

फिर से, अंग्रेज़ी में ही जवाब मिलेगा!

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