|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "022bbb5c869091b98f19e408e0c51d5d",
|
|
|
"translation_date": "2025-10-22T16:28:50+00:00",
|
|
|
"source_file": "6-space-game/3-moving-elements-around/README.md",
|
|
|
"language_code": "mr"
|
|
|
}
|
|
|
-->
|
|
|
# स्पेस गेम तयार करा भाग 3: गती जोडणे
|
|
|
|
|
|
तुमच्या आवडत्या गेम्सचा विचार करा – त्यांना आकर्षक बनवणारी गोष्ट फक्त सुंदर ग्राफिक्स नाही, तर सर्वकाही कसे हलते आणि तुमच्या कृतींना प्रतिसाद देते हे आहे. सध्या, तुमचा स्पेस गेम एका सुंदर चित्रासारखा आहे, पण आता आपण त्यात गती जोडणार आहोत ज्यामुळे तो जिवंत होईल.
|
|
|
|
|
|
जेव्हा नासाच्या अभियंत्यांनी अपोलो मोहिमांसाठी मार्गदर्शन संगणक प्रोग्राम केला, तेव्हा त्यांना असाच आव्हानाचा सामना करावा लागला: पायलटच्या इनपुटला प्रतिसाद देताना अंतराळयान आपोआप कोर्स सुधारणा कसे राखेल? आज आपण शिकत असलेल्या तत्त्वे त्याच संकल्पनांना प्रतिध्वनी करतात – खेळाडू-नियंत्रित गती व्यवस्थापनासह स्वयंचलित प्रणालीचे वर्तन व्यवस्थापित करणे.
|
|
|
|
|
|
या धड्यात, तुम्ही शिकाल की अंतराळयान स्क्रीनवर कसे सरकवायचे, खेळाडूच्या आदेशांना कसे प्रतिसाद द्यायचे आणि गुळगुळीत गती नमुने कसे तयार करायचे. आम्ही सर्वकाही व्यवस्थापित संकल्पनांमध्ये विभागून नैसर्गिकपणे एकमेकांवर आधारित बनवू.
|
|
|
|
|
|
शेवटी, खेळाडू त्यांचे हिरो जहाज स्क्रीनवर उडवतील आणि शत्रू जहाजे वर गस्त घालतील. त्याहून महत्त्वाचे म्हणजे, तुम्हाला गेम गती प्रणालींचे मुख्य तत्त्व समजेल.
|
|
|
|
|
|
## पूर्व-व्याख्यान प्रश्नमंजुषा
|
|
|
|
|
|
[पूर्व-व्याख्यान प्रश्नमंजुषा](https://ff-quizzes.netlify.app/web/quiz/33)
|
|
|
|
|
|
## गेम गती समजून घेणे
|
|
|
|
|
|
गेम्स जिवंत वाटतात जेव्हा गोष्टी हलायला लागतात, आणि मूलत: दोन प्रकारे हे घडते:
|
|
|
|
|
|
- **खेळाडू-नियंत्रित गती**: जेव्हा तुम्ही एखाद्या कीवर क्लिक करता किंवा माऊस क्लिक करता, तेव्हा काहीतरी हलते. हे तुमचं आणि तुमच्या गेमच्या जगाचं थेट कनेक्शन आहे.
|
|
|
- **स्वयंचलित गती**: जेव्हा गेम स्वतःच गोष्टी हलवण्याचा निर्णय घेतो – जसे की शत्रू जहाजे स्क्रीनवर गस्त घालतात, तुम्ही काहीही करत नसल्यास.
|
|
|
|
|
|
संगणक स्क्रीनवर वस्तू हलवणे अपेक्षेपेक्षा सोपे आहे. गणित वर्गातील x आणि y समन्वय लक्षात आहे का? आपण याच गोष्टींवर काम करत आहोत. जेव्हा गॅलिलिओने 1610 मध्ये ज्युपिटरच्या चंद्रांचा मागोवा घेतला, तेव्हा तो मूलत: तेच करत होता – गती नमुने समजून घेण्यासाठी वेळोवेळी स्थानांचे प्लॉटिंग.
|
|
|
|
|
|
स्क्रीनवर गोष्टी हलवणे म्हणजे फ्लिपबुक अॅनिमेशन तयार करण्यासारखे आहे – तुम्हाला या तीन सोप्या चरणांचे अनुसरण करणे आवश्यक आहे:
|
|
|
|
|
|
1. **स्थान अपडेट करा** – तुमची वस्तू कुठे असावी ते बदला (कदाचित ती उजवीकडे 5 पिक्सल हलवा)
|
|
|
2. **जुना फ्रेम मिटवा** – स्क्रीन साफ करा जेणेकरून तुम्हाला सर्वत्र भूतासारखे ट्रेल्स दिसणार नाहीत
|
|
|
3. **नवीन फ्रेम काढा** – तुमची वस्तू तिच्या नवीन ठिकाणी ठेवा
|
|
|
|
|
|
हे पुरेसे वेगाने करा, आणि बूम! तुम्हाला गुळगुळीत गती मिळाली आहे जी खेळाडूंना नैसर्गिक वाटते.
|
|
|
|
|
|
कोडमध्ये हे असे दिसू शकते:
|
|
|
|
|
|
```javascript
|
|
|
// Set the hero's location
|
|
|
hero.x += 5;
|
|
|
// Clear the rectangle that hosts the hero
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
// Redraw the game background and hero
|
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
ctx.fillStyle = "black";
|
|
|
ctx.drawImage(heroImg, hero.x, hero.y);
|
|
|
```
|
|
|
|
|
|
**या कोडचे कार्य:**
|
|
|
- **अपडेट करते** हिरोचा x-कोऑर्डिनेट 5 पिक्सलने, त्याला आडव्या दिशेने हलवण्यासाठी
|
|
|
- **क्लिअर करते** संपूर्ण कॅनव्हास क्षेत्र, मागील फ्रेम काढून टाकण्यासाठी
|
|
|
- **भरते** कॅनव्हास काळ्या पार्श्वभूमी रंगाने
|
|
|
- **पुन्हा काढते** हिरो प्रतिमा त्याच्या नवीन स्थानावर
|
|
|
|
|
|
✅ तुम्ही विचार करू शकता का की तुमचा हिरो अनेक फ्रेम्स प्रति सेकंद पुन्हा काढल्याने कार्यक्षमतेवर परिणाम का होऊ शकतो? [या पॅटर्नच्या पर्यायांबद्दल वाचा](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
|
|
|
|
|
|
## कीबोर्ड इव्हेंट्स हाताळा
|
|
|
|
|
|
हे खेळाडू इनपुटला गेम अॅक्शनशी जोडण्याचे ठिकाण आहे. जेव्हा कोणी लेसर फायर करण्यासाठी स्पेसबार दाबतो किंवा अॅस्टेरॉइड टाळण्यासाठी अॅरो की दाबतो, तेव्हा तुमच्या गेमला ते इनपुट शोधणे आणि त्याला प्रतिसाद देणे आवश्यक आहे.
|
|
|
|
|
|
कीबोर्ड इव्हेंट्स विंडो स्तरावर घडतात, म्हणजे तुमचे संपूर्ण ब्राउझर विंडो त्या कीप्रेससाठी ऐकत असते. माऊस क्लिक, दुसऱ्या बाजूला, विशिष्ट घटकांशी जोडले जाऊ शकते (जसे की बटण क्लिक करणे). आमच्या स्पेस गेमसाठी, आम्ही कीबोर्ड कंट्रोल्सवर लक्ष केंद्रित करू कारण ते खेळाडूंना क्लासिक आर्केड अनुभव देते.
|
|
|
|
|
|
हे मला आठवण करून देते की 1800 च्या दशकातील टेलिग्राफ ऑपरेटरना मोर्स कोड इनपुटला अर्थपूर्ण संदेशांमध्ये अनुवाद करावा लागला – आम्ही काहीसे समान करत आहोत, कीप्रेसला गेम कमांडमध्ये अनुवादित करत आहोत.
|
|
|
|
|
|
इव्हेंट हाताळण्यासाठी तुम्हाला विंडोच्या `addEventListener()` पद्धतीचा वापर करावा लागतो आणि त्याला दोन इनपुट पॅरामीटर्स प्रदान करावे लागतात. पहिला पॅरामीटर इव्हेंटचे नाव आहे, उदाहरणार्थ `keyup`. दुसरा पॅरामीटर इव्हेंट घडल्यामुळे कॉल केला जाणारा फंक्शन आहे.
|
|
|
|
|
|
उदाहरण येथे आहे:
|
|
|
|
|
|
```javascript
|
|
|
window.addEventListener('keyup', (evt) => {
|
|
|
// evt.key = string representation of the key
|
|
|
if (evt.key === 'ArrowUp') {
|
|
|
// do something
|
|
|
}
|
|
|
});
|
|
|
```
|
|
|
|
|
|
**येथे काय घडते ते समजून घेणे:**
|
|
|
- **ऐकते** संपूर्ण विंडोवर कीबोर्ड इव्हेंट्ससाठी
|
|
|
- **कॅप्चर करते** इव्हेंट ऑब्जेक्ट ज्यामध्ये कोणती की दाबली गेली याची माहिती असते
|
|
|
- **तपासते** की दाबलेली की विशिष्ट कीशी जुळते का (या प्रकरणात, वरचा अॅरो)
|
|
|
- **अंमलात आणते** कोड जेव्हा अटी पूर्ण होतात
|
|
|
|
|
|
की इव्हेंट्ससाठी इव्हेंटवर दोन प्रॉपर्टीज आहेत ज्याचा वापर तुम्ही कोणती की दाबली गेली हे पाहण्यासाठी करू शकता:
|
|
|
|
|
|
- `key` - ही दाबलेल्या कीची स्ट्रिंग प्रतिनिधित्व आहे, उदाहरणार्थ `'ArrowUp'`
|
|
|
- `keyCode` - ही एक संख्या प्रतिनिधित्व आहे, उदाहरणार्थ `37`, ज्याचा संबंध `ArrowLeft` शी आहे
|
|
|
|
|
|
✅ गेम डेव्हलपमेंटच्या बाहेर की इव्हेंट मॅनिप्युलेशन उपयुक्त आहे. या तंत्रासाठी तुम्ही आणखी कोणते उपयोग विचार करू शकता?
|
|
|
|
|
|
### विशेष की: एक सूचना!
|
|
|
|
|
|
काही कींमध्ये अंगभूत ब्राउझर वर्तन असते जे तुमच्या गेममध्ये अडथळा आणू शकते. अॅरो की पृष्ठ स्क्रोल करतात आणि स्पेसबार खाली उडी मारतो – जेव्हा कोणी त्यांचे अंतराळयान चालवण्याचा प्रयत्न करत असतो तेव्हा तुम्हाला हे वर्तन नको असते.
|
|
|
|
|
|
आम्ही ही डीफॉल्ट वर्तन रोखू शकतो आणि त्याऐवजी आमचा गेम इनपुट हाताळू शकतो. हे अगदी सुरुवातीच्या संगणक प्रोग्रामरप्रमाणे आहे ज्यांना कस्टम वर्तन तयार करण्यासाठी सिस्टम इंटरप्ट्स ओव्हरराइड करावे लागले – आम्ही फक्त ब्राउझर स्तरावर ते करत आहोत. हे कसे करायचे:
|
|
|
|
|
|
```javascript
|
|
|
const onKeyDown = function (e) {
|
|
|
console.log(e.keyCode);
|
|
|
switch (e.keyCode) {
|
|
|
case 37:
|
|
|
case 39:
|
|
|
case 38:
|
|
|
case 40: // Arrow keys
|
|
|
case 32:
|
|
|
e.preventDefault();
|
|
|
break; // Space
|
|
|
default:
|
|
|
break; // do not block other keys
|
|
|
}
|
|
|
};
|
|
|
|
|
|
window.addEventListener('keydown', onKeyDown);
|
|
|
```
|
|
|
|
|
|
**या प्रतिबंध कोडचे समजून घेणे:**
|
|
|
- **तपासते** विशिष्ट की कोड्ससाठी जे अवांछित ब्राउझर वर्तन कारणीभूत ठरू शकतात
|
|
|
- **प्रतिबंधित करते** अॅरो की आणि स्पेसबारसाठी डीफॉल्ट ब्राउझर क्रिया
|
|
|
- **अनुमती देते** इतर कींना सामान्यपणे कार्य करण्यासाठी
|
|
|
- **वापरते** `e.preventDefault()` ब्राउझरचे अंगभूत वर्तन थांबवण्यासाठी
|
|
|
|
|
|
## गेम प्रेरित गती
|
|
|
|
|
|
आता खेळाडूच्या इनपुटशिवाय वस्तू हलवण्याबद्दल बोलूया. स्क्रीनवर फिरणाऱ्या शत्रू जहाजांचा विचार करा, सरळ रेषेत उडणाऱ्या गोळ्या किंवा पार्श्वभूमीतील ढग. ही स्वायत्त गती तुमच्या गेमच्या जगाला जिवंत वाटते जरी कोणीही नियंत्रणाला स्पर्श करत नसेल.
|
|
|
|
|
|
जावास्क्रिप्टच्या अंगभूत टाइमर्सचा वापर करून नियमित अंतराने स्थान अपडेट केले जाते. ही संकल्पना पेंडुलम घड्याळे कशी कार्य करतात यासारखी आहे – एक नियमित यंत्रणा जी सुसंगत, वेळेवर क्रिया ट्रिगर करते. हे किती सोपे असू शकते:
|
|
|
|
|
|
```javascript
|
|
|
const id = setInterval(() => {
|
|
|
// Move the enemy on the y axis
|
|
|
enemy.y += 10;
|
|
|
}, 100);
|
|
|
```
|
|
|
|
|
|
**या गती कोडचे कार्य:**
|
|
|
- **तयार करते** एक टाइमर जो प्रत्येक 100 मिलिसेकंदांमध्ये चालतो
|
|
|
- **अपडेट करते** शत्रूचा y-कोऑर्डिनेट प्रत्येक वेळी 10 पिक्सलने
|
|
|
- **साठवते** इंटरव्हल आयडी जेणेकरून नंतर ते थांबवता येईल
|
|
|
- **हलवते** शत्रूला स्क्रीनवर खाली स्वयंचलितपणे
|
|
|
|
|
|
## गेम लूप
|
|
|
|
|
|
येथे संकल्पना आहे जी सर्वकाही एकत्र बांधते – गेम लूप. तुमचा गेम जर एक चित्रपट असेल, तर गेम लूप हा फिल्म प्रोजेक्टर असेल, फ्रेम नंतर फ्रेम इतक्या वेगाने दाखवत की सर्वकाही गुळगुळीतपणे हलत असल्याचे दिसते.
|
|
|
|
|
|
प्रत्येक गेमच्या मागे एक लूप चालू असतो. ही एक फंक्शन आहे जी सर्व गेम ऑब्जेक्ट्स अपडेट करते, स्क्रीन पुन्हा काढते आणि सतत हा प्रक्रिया पुन्हा करते. हे तुमच्या हिरो, सर्व शत्रू, उडणाऱ्या लेसर – संपूर्ण गेम स्टेटचा मागोवा ठेवते.
|
|
|
|
|
|
ही संकल्पना मला आठवण करून देते की सुरुवातीच्या फिल्म अॅनिमेटर्स जसे की वॉल्ट डिस्ने यांना गतीचा भ्रम निर्माण करण्यासाठी फ्रेम बाय फ्रेम पात्रे पुन्हा काढावी लागली. आम्ही तेच करत आहोत, फक्त पेन्सिल्सऐवजी कोडसह.
|
|
|
|
|
|
गेम लूप कोडमध्ये सामान्यतः कसे दिसते:
|
|
|
|
|
|
```javascript
|
|
|
const gameLoopId = setInterval(() => {
|
|
|
function gameLoop() {
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
ctx.fillStyle = "black";
|
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
drawHero();
|
|
|
drawEnemies();
|
|
|
drawStaticObjects();
|
|
|
}
|
|
|
gameLoop();
|
|
|
}, 200);
|
|
|
```
|
|
|
|
|
|
**गेम लूप संरचनेचे समजून घेणे:**
|
|
|
- **क्लिअर करते** संपूर्ण कॅनव्हास मागील फ्रेम काढून टाकण्यासाठी
|
|
|
- **भरते** पार्श्वभूमी एका ठोस रंगाने
|
|
|
- **काढते** सर्व गेम ऑब्जेक्ट्स त्यांच्या वर्तमान स्थानांवर
|
|
|
- **पुन्हा करते** ही प्रक्रिया प्रत्येक 200 मिलिसेकंदांमध्ये गुळगुळीत अॅनिमेशन तयार करण्यासाठी
|
|
|
- **व्यवस्थापित करते** फ्रेम रेट इंटरव्हल टाइमिंग नियंत्रित करून
|
|
|
|
|
|
## स्पेस गेम सुरू ठेवणे
|
|
|
|
|
|
आता आपण यापूर्वी तयार केलेल्या स्थिर दृश्यात गती जोडणार आहोत. आपण त्याला स्क्रीनशॉटमधून परस्पर अनुभवामध्ये रूपांतरित करणार आहोत. आम्ही प्रत्येक तुकडा शेवटच्या तुकड्यावर आधारित असेल याची खात्री करण्यासाठी चरण-दर-चरण काम करू.
|
|
|
|
|
|
मागील धड्यातून कोड घ्या (किंवा तुम्हाला नवीन सुरुवात करायची असल्यास [भाग II- स्टार्टर](../../../../6-space-game/3-moving-elements-around/your-work) फोल्डरमधील कोडने सुरुवात करा).
|
|
|
|
|
|
**आज आपण काय तयार करत आहोत:**
|
|
|
- **हिरो नियंत्रण**: अॅरो की तुमचे अंतराळयान स्क्रीनवर चालवतील
|
|
|
- **शत्रू गती**: ती परग्रह जहाजे त्यांचा हल्ला सुरू करतील
|
|
|
|
|
|
चला या वैशिष्ट्यांची अंमलबजावणी सुरू करूया.
|
|
|
|
|
|
## शिफारस केलेले चरण
|
|
|
|
|
|
`your-work` उप फोल्डरमध्ये तयार केलेल्या फाइल्स शोधा. त्यात खालील गोष्टी असाव्यात:
|
|
|
|
|
|
```bash
|
|
|
-| assets
|
|
|
-| enemyShip.png
|
|
|
-| player.png
|
|
|
-| index.html
|
|
|
-| app.js
|
|
|
-| package.json
|
|
|
```
|
|
|
|
|
|
तुमचा प्रोजेक्ट `your-work` फोल्डरमध्ये सुरू करण्यासाठी टाइप करा:
|
|
|
|
|
|
```bash
|
|
|
cd your-work
|
|
|
npm start
|
|
|
```
|
|
|
|
|
|
**या कमांडचे कार्य:**
|
|
|
- **नेव्हिगेट करते** तुमच्या प्रोजेक्ट डिरेक्टरीकडे
|
|
|
- **सुरू करते** HTTP सर्व्हर पत्त्यावर `http://localhost:5000`
|
|
|
- **सर्व्ह करते** तुमच्या गेम फाइल्स जेणेकरून तुम्ही त्यांना ब्राउझरमध्ये चाचणी करू शकता
|
|
|
|
|
|
वरील HTTP सर्व्हर पत्त्यावर `http://localhost:5000` सुरू करेल. ब्राउझर उघडा आणि तो पत्ता इनपुट करा, सध्या तो हिरो आणि सर्व शत्रूंना रेंडर करेल; काहीही हलत नाही - अजून!
|
|
|
|
|
|
### कोड जोडा
|
|
|
|
|
|
1. **समर्पित ऑब्जेक्ट्स जोडा** `hero`, `enemy` आणि `game object` साठी, त्यांच्याकडे `x` आणि `y` गुणधर्म असावेत. (याबद्दल [Inheritance किंवा composition](../README.md) भाग लक्षात ठेवा).
|
|
|
|
|
|
*सूचना* `game object` हा तोच असावा ज्यामध्ये `x` आणि `y` असतील आणि स्वतःला कॅनव्हासवर काढण्याची क्षमता असेल.
|
|
|
|
|
|
> **टीप**: नवीन `GameObject` क्लास जोडा ज्याचा कन्स्ट्रक्टर खालीलप्रमाणे परिभाषित करा आणि नंतर कॅनव्हासवर काढा:
|
|
|
|
|
|
```javascript
|
|
|
class GameObject {
|
|
|
constructor(x, y) {
|
|
|
this.x = x;
|
|
|
this.y = y;
|
|
|
this.dead = false;
|
|
|
this.type = "";
|
|
|
this.width = 0;
|
|
|
this.height = 0;
|
|
|
this.img = undefined;
|
|
|
}
|
|
|
|
|
|
draw(ctx) {
|
|
|
ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**या बेस क्लासचे समजून घेणे:**
|
|
|
- **सामान्य गुणधर्म परिभाषित करते** जे सर्व गेम ऑब्जेक्ट्स सामायिक करतात (स्थान, आकार, प्रतिमा)
|
|
|
- **समाविष्ट करते** एक `dead` फ्लॅग जो ऑब्जेक्ट काढून टाकला पाहिजे का ते ट्रॅक करतो
|
|
|
- **प्रदान करते** एक `draw()` पद्धत जी कॅनव्हासवर ऑब्जेक्ट रेंडर करते
|
|
|
- **सेट करते** सर्व गुणधर्मांसाठी डीफॉल्ट मूल्ये जी चाइल्ड क्लासेस ओव्हरराइड करू शकतात
|
|
|
|
|
|
आता, `GameObject` विस्तृत करा आणि `Hero` आणि `Enemy` तयार करा:
|
|
|
|
|
|
```javascript
|
|
|
class Hero extends GameObject {
|
|
|
constructor(x, y) {
|
|
|
super(x, y);
|
|
|
this.width = 98;
|
|
|
this.height = 75;
|
|
|
this.type = "Hero";
|
|
|
this.speed = 5;
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
```javascript
|
|
|
class Enemy extends GameObject {
|
|
|
constructor(x, y) {
|
|
|
super(x, y);
|
|
|
this.width = 98;
|
|
|
this.height = 50;
|
|
|
this.type = "Enemy";
|
|
|
const id = setInterval(() => {
|
|
|
if (this.y < canvas.height - this.height) {
|
|
|
this.y += 5;
|
|
|
} else {
|
|
|
console.log('Stopped at', this.y);
|
|
|
clearInterval(id);
|
|
|
}
|
|
|
}, 300);
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**या क्लासेसमधील मुख्य संकल्पना:**
|
|
|
- **विस्तारित करते** `GameObject` चा `extends` कीवर्ड वापरून
|
|
|
- **कॉल करते** पॅरेंट कन्स्ट्रक्टर `super(x, y)` सह
|
|
|
- **सेट करते** प्रत्येक ऑब्जेक्ट प्रकारासाठी विशिष्ट परिमाणे आणि गुणधर्म
|
|
|
- **अंमलात आणते** शत्रूंसाठी स्वयंचलित गती `setInterval()` वापरून
|
|
|
|
|
|
2. **की-इव्हेंट हँडलर्स जोडा** की नेव्हिगेशन हाताळण्यासाठी (हिरोला वर/खाली डाव्या/उजव्या बाजूला हलवा)
|
|
|
|
|
|
*लक्षात ठेवा* हे एक कार्टेशियन सिस्टम आहे, वरचा डाव्या कोपरा `0,0` आहे. तसेच डीफॉल्ट वर्तन थांबवण्यासाठी कोड जोडणे लक्षात ठेवा.
|
|
|
|
|
|
> **टीप**: तुमचे `onKeyDown` फंक्शन तयार करा आणि ते विंडोला जोडून द्या:
|
|
|
|
|
|
```javascript
|
|
|
const onKeyDown = function (e) {
|
|
|
console.log(e.keyCode);
|
|
|
// Add the code from the lesson above to stop default behavior
|
|
|
switch (e.keyCode) {
|
|
|
case 37:
|
|
|
case 39:
|
|
|
case 38:
|
|
|
case 40: // Arrow keys
|
|
|
case 32:
|
|
|
e.preventDefault();
|
|
|
break; // Space
|
|
|
default:
|
|
|
break; // do not block other keys
|
|
|
}
|
|
|
};
|
|
|
|
|
|
window.addEventListener("keydown", onKeyDown);
|
|
|
```
|
|
|
|
|
|
**या इव्हेंट हँडलरचे कार्य:**
|
|
|
- **ऐकते** संपूर्ण विंडोवर कीडाउन इव्हेंट्ससाठी
|
|
|
- **लॉग करते** की कोड जेणेकरून तुम्ही कोणत्या की दाबल्या जात आहेत हे डीबग करू शकता
|
|
|
- **प्रतिबंधित करते** अॅरो की आणि स्पेसबारसाठी डीफॉल्ट ब्राउझर वर्तन
|
|
|
- **अनुमती देते** इतर कींना सामान्यपणे कार्य करण्यासाठी
|
|
|
|
|
|
या टप्प्यावर तुमच्या ब्राउझर कन्सोलमध्ये तपासा आणि कीप्रेस लॉग होत असल्याचे पहा.
|
|
|
|
|
|
3. **अंमलात आणा** [Pub sub pattern](../README.md), हे तुमचा कोड स्वच्छ ठेवेल कारण तुम्ही उर्वरित भागांचे अनुसरण करता.
|
|
|
|
|
|
पब्लिश-सबस्क्राइब पॅटर्न तुमचा कोड व्यवस्थित ठेवण्यास मदत करतो, इव्हेंट डिटेक्शनला इव्हेंट हँडलिंगपासून वेगळे करून. यामुळे तुमचा कोड अधिक मॉड्युलर आणि देखभाल करणे सोपे होते.
|
|
|
|
|
|
हे शेवटचे भाग करण्यासाठी, तुम्ही:
|
|
|
|
|
|
1. **इव्हेंट लिसनर जोडा** विंडोवर:
|
|
|
|
|
|
```javascript
|
|
|
window.addEventListener("keyup", (evt) => {
|
|
|
if (evt.key === "ArrowUp") {
|
|
|
eventEmitter.emit(Messages.KEY_EVENT_UP);
|
|
|
} else if (evt.key === "ArrowDown") {
|
|
|
eventEmitter.emit(Messages.KEY_EVENT_DOWN);
|
|
|
} else if (evt.key === "ArrowLeft") {
|
|
|
eventEmitter.emit(Messages.KEY_EVENT_LEFT);
|
|
|
} else if (evt.key === "ArrowRight") {
|
|
|
eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
|
|
|
}
|
|
|
});
|
|
|
```
|
|
|
|
|
|
**या इव्हेंट सिस्टमचे कार्य:**
|
|
|
- **शोधते** कीबोर्ड इनपुट आणि त्याला कस्टम गेम इव्हेंट्समध्ये
|
|
|
- **शत्रूंच्या ग्रीडची निर्मिती** nested loops वापरून केली जाते
|
|
|
- **शत्रूंच्या प्रतिमेची नियुक्ती** प्रत्येक शत्रू ऑब्जेक्टला केली जाते
|
|
|
- **प्रत्येक शत्रूला** ग्लोबल गेम ऑब्जेक्ट्स array मध्ये जोडले जाते
|
|
|
|
|
|
आणि `createHero()` फंक्शन जोडा, जो नायकासाठी समान प्रक्रिया करेल.
|
|
|
|
|
|
```javascript
|
|
|
function createHero() {
|
|
|
hero = new Hero(
|
|
|
canvas.width / 2 - 45,
|
|
|
canvas.height - canvas.height / 4
|
|
|
);
|
|
|
hero.img = heroImg;
|
|
|
gameObjects.push(hero);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**नायक निर्मिती काय करते:**
|
|
|
- **नायकाला** स्क्रीनच्या तळाशी मध्यभागी स्थान देतो
|
|
|
- **नायकाच्या प्रतिमेची नियुक्ती** नायक ऑब्जेक्टला केली जाते
|
|
|
- **नायकाला** गेम ऑब्जेक्ट्स array मध्ये जोडतो जेणेकरून तो रेंडर होईल
|
|
|
|
|
|
आणि शेवटी, `drawGameObjects()` फंक्शन जोडा जे ड्रॉइंग सुरू करेल:
|
|
|
|
|
|
```javascript
|
|
|
function drawGameObjects(ctx) {
|
|
|
gameObjects.forEach(go => go.draw(ctx));
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**ड्रॉइंग फंक्शन समजून घेणे:**
|
|
|
- **सर्व गेम ऑब्जेक्ट्सवर** array मध्ये iterate करते
|
|
|
- **प्रत्येक ऑब्जेक्टवर** `draw()` मेथड कॉल करते
|
|
|
- **कॅनव्हास कॉन्टेक्स्ट पास करते** जेणेकरून ऑब्जेक्ट्स स्वतःला रेंडर करू शकतील
|
|
|
|
|
|
तुमचे शत्रू तुमच्या नायकाच्या स्पेसशिपकडे पुढे सरकायला सुरुवात करतील!
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
and add a `createHero()` function to do a similar process for the hero.
|
|
|
|
|
|
```javascript
|
|
|
function createHero() {
|
|
|
hero = new Hero(
|
|
|
canvas.width / 2 - 45,
|
|
|
canvas.height - canvas.height / 4
|
|
|
);
|
|
|
hero.img = heroImg;
|
|
|
gameObjects.push(hero);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
आणि शेवटी, `drawGameObjects()` फंक्शन जोडा जे ड्रॉइंग सुरू करेल:
|
|
|
|
|
|
```javascript
|
|
|
function drawGameObjects(ctx) {
|
|
|
gameObjects.forEach(go => go.draw(ctx));
|
|
|
}
|
|
|
```
|
|
|
|
|
|
तुमचे शत्रू तुमच्या नायकाच्या स्पेसशिपकडे पुढे सरकायला सुरुवात करतील!
|
|
|
|
|
|
---
|
|
|
|
|
|
## GitHub Copilot Agent Challenge 🚀
|
|
|
|
|
|
तुमच्या गेमचा polish सुधारण्यासाठी एक आव्हान येथे आहे: boundaries आणि smooth controls जोडणे. सध्या, तुमचा नायक स्क्रीनच्या बाहेर जाऊ शकतो आणि हालचाल थोडी खडबडीत वाटू शकते.
|
|
|
|
|
|
**तुमचे मिशन:** स्क्रीन boundaries आणि fluid movement अंमलात आणून तुमच्या स्पेसशिपला अधिक वास्तववादी बनवा. हे NASA च्या फ्लाइट कंट्रोल सिस्टीमसारखे आहे जे spacecraft ला सुरक्षित ऑपरेशनल पॅरामीटर्स ओलांडण्यापासून प्रतिबंधित करते.
|
|
|
|
|
|
**काय तयार करायचे आहे:** एक प्रणाली तयार करा जी तुमच्या नायकाच्या स्पेसशिपला स्क्रीनवर ठेवते आणि controls smooth बनवते. जेव्हा खेळाडू arrow key दाबून ठेवतो, तेव्हा जहाज discrete steps मध्ये न हलता सतत glide करावे. स्क्रीन boundaries वर पोहोचल्यावर visual feedback जोडण्याचा विचार करा – कदाचित प्ले एरियाच्या कडेला subtle effect दाखवणे.
|
|
|
|
|
|
[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या.
|
|
|
|
|
|
## 🚀 Challenge
|
|
|
|
|
|
प्रोजेक्ट्स वाढत असताना कोडचे organization अधिक महत्त्वाचे बनते. तुम्ही कदाचित लक्षात घेतले असेल की तुमची फाइल functions, variables, आणि classes यांच्याने भरलेली आहे. हे मला Apollo mission code organize करणाऱ्या इंजिनिअर्सची आठवण करून देते ज्यांनी एकाच वेळी अनेक टीम्स काम करू शकतील अशा स्पष्ट, maintainable systems तयार केल्या.
|
|
|
|
|
|
**तुमचे मिशन:**
|
|
|
सॉफ्टवेअर आर्किटेक्टसारखे विचार करा. तुम्ही तुमचा कोड कसा organize कराल जेणेकरून सहा महिन्यांनंतर तुम्ही (किंवा तुमचा सहकारी) काय चालले आहे ते समजू शकाल? सध्या सर्व काही एका फाइलमध्ये ठेवले असले तरी, तुम्ही चांगले organization तयार करू शकता:
|
|
|
|
|
|
- **संबंधित functions** स्पष्ट comment headers सह एकत्र करणे
|
|
|
- **Concern वेगळे करणे** - गेम लॉजिक आणि rendering वेगळे ठेवणे
|
|
|
- **सुसंगत नाव देणे** variables आणि functions साठी
|
|
|
- **Modules किंवा namespaces तयार करणे** गेमच्या वेगवेगळ्या पैलूंना organize करण्यासाठी
|
|
|
- **Documentation जोडणे** जे प्रत्येक मुख्य विभागाचा उद्देश स्पष्ट करते
|
|
|
|
|
|
**Reflection questions:**
|
|
|
- तुमच्या कोडमधील कोणते भाग परत आल्यावर समजायला सर्वात कठीण वाटतात?
|
|
|
- तुमचा कोड कसा organize करता येईल जेणेकरून दुसऱ्या व्यक्तीला योगदान देणे सोपे होईल?
|
|
|
- तुम्हाला नवीन features जसे की power-ups किंवा वेगवेगळ्या प्रकारचे शत्रू जोडायचे असल्यास काय होईल?
|
|
|
|
|
|
## Post-Lecture Quiz
|
|
|
|
|
|
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/34)
|
|
|
|
|
|
## Review & Self Study
|
|
|
|
|
|
आम्ही सर्व काही सुरुवातीपासून तयार करत आहोत, जे शिकण्यासाठी उत्कृष्ट आहे, पण येथे एक छोटासा गुपित आहे – काही आश्चर्यकारक JavaScript frameworks आहेत जे तुमच्यासाठी बरेच काम करू शकतात. आम्ही कव्हर केलेल्या मूलभूत गोष्टींमध्ये तुम्हाला आराम वाटल्यावर, [जे उपलब्ध आहे ते एक्सप्लोर करणे](https://github.com/collections/javascript-game-engines) योग्य ठरेल.
|
|
|
|
|
|
Frameworks म्हणजे प्रत्येक साधन हाताने बनवण्याऐवजी एक चांगले stocked toolbox असल्यासारखे आहे. ते कोड organization च्या अनेक आव्हानांवर उपाय करू शकतात, तसेच अशा features ऑफर करू शकतात ज्यासाठी स्वतः तयार करण्यासाठी आठवडे लागतील.
|
|
|
|
|
|
**एक्सप्लोर करण्यासारख्या गोष्टी:**
|
|
|
- गेम इंजिन्स कोड कसे organize करतात – तुम्ही त्यांच्या वापरलेल्या हुशार patterns पाहून आश्चर्यचकित व्हाल
|
|
|
- कॅनव्हास गेम्स butter-smooth चालवण्यासाठी performance tricks
|
|
|
- आधुनिक JavaScript features जे तुमचा कोड अधिक स्वच्छ आणि maintainable बनवू शकतात
|
|
|
- गेम ऑब्जेक्ट्स आणि त्यांच्या संबंधांचे व्यवस्थापन करण्याचे वेगवेगळे दृष्टिकोन
|
|
|
|
|
|
## Assignment
|
|
|
|
|
|
[तुमच्या कोडवर टिप्पणी द्या](assignment.md)
|
|
|
|
|
|
---
|
|
|
|
|
|
**अस्वीकरण**:
|
|
|
हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही. |
