Jen Looper
4 years ago
committed by
GitHub
commit
ed6434474b
@ -0,0 +1,18 @@
|
|||||||
|
_ये क्विज एक सवाल पे एक जवाब का जाच करके अपना प्रस्तुत पूरा करे ._
|
||||||
|
|
||||||
|
1. तुम कोनसा भाषा बेहद पसन्द करोगे वेबसाइट बनाने के लिए ?
|
||||||
|
|
||||||
|
- [ ] Machine Code (मशीन कोड)
|
||||||
|
- [ ] JavaScript
|
||||||
|
- [ ] Bash
|
||||||
|
|
||||||
|
2. डेवलपमेंट एनवायरनमेंट हरेक डेवलपर के लिए अद्वितीय होता है
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
3. डेवलपर क्या करेगा त्रुटिपूर्ण कोड को ठीक करने के लिए?
|
||||||
|
|
||||||
|
- [ ] Syntax highlighting
|
||||||
|
- [ ] Debugging
|
||||||
|
- [ ] Code formatting(कोड स्वरूपण)
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
_ये कक्षमे ये क्विज पूरा करे_
|
||||||
|
|
||||||
|
1. रचनाकार बिना कुछ कोड लिखे ही एक प्रोग्राम बना सकता है
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
2. निम्न स्तर की भाषाएँ इसके लिए एक लोकप्रिय विकल्प हैं:
|
||||||
|
|
||||||
|
- [ ] वेबसाइटें
|
||||||
|
- [ ] हार्डवेयर
|
||||||
|
- [ ] वीडियो गेम सॉफ्टवेयर
|
||||||
|
|
||||||
|
3. इनमें से कौन सा उपकरण सबसे अधिक संभावना वेब डेवलपर के वातावरण में होगा ?
|
||||||
|
|
||||||
|
- [ ] हार्डवेयर, रास्पबेरी पाई की तरह
|
||||||
|
- [ ] ब्राउज़र DevTools
|
||||||
|
- [ ] ऑपरेटिंग सिस्टम प्रलेखन
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# डॉक्स पढ़ना
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
ऐसे कई उपकरण हैं जिनकी आवश्यकता वेब डेवलपर को हो सकती है जो [एमडीएन प्रलेखन के क्लाइंट-साइड टूलिंग](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) पे उपलब्ध है । पाठ में शामिल नहीं किए गए 3 टूल चुनें, बताएं कि एक वेब डेवलपर इसका उपयोग क्यों करेगा, और इस टूल के लिए खोज करेगा जो इस श्रेणी में आता है और इसके प्रलेखन को साझा करता है । MDN डॉक्स पर समान टूल उदाहरण का उपयोग न करें.
|
||||||
|
|
||||||
|
## सरनामा
|
||||||
|
|
||||||
|
| उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| -------------------------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------- |
|
||||||
|
| बताया कि वेब डेवलपर टूल का उपयोग क्यों करेगा | समझाया कि कैसे, लेकिन डेवलपर टूल का उपयोग क्यों नहीं करेगा | यह उल्लेख नहीं किया कि एक डेवलपर उपकरण का उपयोग कैसे या क्यों करेगा |
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. समीक्षाओं, टिप्पणियों, एकीकृत परीक्षणों और अधिक के साथ एक शाखा पर पेश किए गए मतभेदों की तुलना और चर्चा करने का स्थान है:
|
||||||
|
|
||||||
|
- [ ] GitHub
|
||||||
|
- [ ] A Pull Request(एक निवेदन)
|
||||||
|
- [ ] A feature branch(एक सुविधा शाखा)
|
||||||
|
|
||||||
|
2. आपको दूरस्थ शाखा से सभी कमिटस कैसे मिलेंगे?
|
||||||
|
|
||||||
|
- [ ] `git fetch`
|
||||||
|
- [ ] `git pull`
|
||||||
|
- [ ] `git commits -r`
|
||||||
|
|
||||||
|
3. आप किसी शाखा में कैसे जाते हैं?
|
||||||
|
|
||||||
|
- [ ] `git switch [branch-name]`
|
||||||
|
- [ ] `git checkout [branch-name]`
|
||||||
|
- [ ] `git load [branch-name]`
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
_इस क्विज को कक्षा में पूरा करें_
|
||||||
|
|
||||||
|
1. आप एक Git रेपो कैसे बनाते हैं?
|
||||||
|
|
||||||
|
- [ ] git create
|
||||||
|
- [ ] git start
|
||||||
|
- [ ] git init
|
||||||
|
|
||||||
|
2. `git add` क्या करता है ?
|
||||||
|
|
||||||
|
- [ ] आपके कोड को कमिट करता है
|
||||||
|
- [ ] ट्रैकिंग के लिए एक स्टेजिंग क्षेत्र में अपनी फ़ाइलों को जोड़ता है
|
||||||
|
- [ ] अपनी फ़ाइलों को GitHub में जोड़ता है
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. Lighthouse केवल सुलभता की समस्याओं की जाँच करता है
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
2. Color-safe palettes मदद करती है लोगोकी जिसे
|
||||||
|
|
||||||
|
- [ ] वर्णांधता
|
||||||
|
- [ ] दृष्टिदोष
|
||||||
|
- [ ] उपरोक्त दोनों
|
||||||
|
|
||||||
|
3. सुलभ वेब साइटों के लिए वर्णनात्मक लिंक महत्वपूर्ण हैं ?
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
_इस क्विज को कक्षा में पूरा करें_
|
||||||
|
|
||||||
|
1. एक सुलभ वेब साइट की जाँच ब्राउज़र टूल की जा सकती है
|
||||||
|
|
||||||
|
- [ ] Lighthouse
|
||||||
|
- [ ] Deckhouse
|
||||||
|
- [ ] Cleanhouse
|
||||||
|
|
||||||
|
2. आपको दृष्टिबाधित उपयोगकर्ताओं के लिए अभिगम्यता का परीक्षण करने के लिए एक स्क्रीन रीडर की आवश्यकता है
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
3. सरकारी वेब साइटों पर पहुंच केवल महत्वपूर्ण है
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
# एक गैर-सुलभ वेब साइट का विश्लेषण करें
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
एक ऐसी वेब साइट की पहचान करें जिसे आप मानते हैं कि वह सुलभ नहीं है, और उसकी पहुँच में सुधार के लिए एक कार्य योजना बनाएँ. आपका पहला काम इस साइट की पहचान करना होगा, उन तरीकों को विस्तार से बताएं जो आपको लगता है कि यह विश्लेषणात्मक उपकरणों का उपयोग किए बिना दुर्गम है, और फिर इसे लाइटहाउस विश्लेषण के माध्यम से डालें. इस विश्लेषण के परिणामों को लें और कम से कम दस बिंदुओं के साथ एक विस्तृत योजना की रूपरेखा दिखाएं कि साइट को कैसे बेहतर बनाया जा सकता है.
|
||||||
|
|
||||||
|
## सरनामा
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक |
|
||||||
|
पर्याप्त | सुधार की जरूरत |
|
||||||
|
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
|
||||||
|
| छात्र की रिपोर्ट | साइट कैसे अपर्याप्त है, इस पर पैराग्राफ शामिल हैं, पीडीएफ के रूप में कैप्चर की गई लाइटहाउस रिपोर्ट, सुधार करने के लिए दस बिंदुओं की एक सूची, इसे कैसे सुधारें, इस पर विवरण के साथ। | आवश्यक का 20% गायब है | आवश्यक का 50% गायब है |
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके पाठ के बाद इस प्रश्नोत्तरी को पूरा करें_
|
||||||
|
|
||||||
|
1.वैरिएबल घोषित करने के लिए कॉन्स्टेंट `let` और `var` के समान हैं सिवाय इसके कि
|
||||||
|
|
||||||
|
- [ ] स्थिरांक को प्रारंभिक किया जाना चाहिए
|
||||||
|
- [ ] स्थिरांक बदलाव किए जा सकते हैं
|
||||||
|
- [ ] स्थिरांक को पुन: सौंपा जा सकता है
|
||||||
|
|
||||||
|
2. संख्याएँ और \_\_\_\_ जावास्क्रिप्ट आदिम हैं जो संख्यात्मक डेटा को संभालते हैं
|
||||||
|
|
||||||
|
- [ ] bigint
|
||||||
|
- [ ] boolean
|
||||||
|
- [ ] star
|
||||||
|
|
||||||
|
3. स्ट्रिंग्स सिंगल और डबल दोनों कोट्स के बीच निवास कर सकते हैं
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
_इस क्विज को कक्षा में पूरा करें_
|
||||||
|
|
||||||
|
1. बुलियन एक डेटा प्रकार है जिसका उपयोग आप एक स्ट्रिंग की लंबाई का परीक्षण करने के लिए कर सकते हैं
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
2. निम्नलिखित एक ऑपरेशन है जो आप एक स्ट्रिंग पर प्रदर्शन कर सकते हैं
|
||||||
|
|
||||||
|
- [ ] concatenation
|
||||||
|
- [ ] appending
|
||||||
|
- [ ] splicing
|
||||||
|
|
||||||
|
3. `==` और `===` विनिमेय हैं
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# डेटा प्रकार अभ्यास
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
कल्पना कीजिए कि आप एक शॉपिंग कार्ट बना रहे हैं। डेटा प्रकारों पर कुछ दस्तावेज लिखें, जिन्हें आपको अपने खरीदारी के अनुभव को पूरा करने की आवश्यकता होगी। आप अपनी पसंद पर कैसे पहुंचे?
|
||||||
|
|
||||||
|
## सरनामा
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | ---------------------------------------------------------------------------------- | --------------------------- | -------------------------- |
|
||||||
|
| | छह डेटा प्रकार सूचीबद्ध हैं और विस्तार से पता लगाया है, उनके उपयोग का दस्तावेजीकरण | चार डेटाप्रकार की खोज की है | दो डेटाप्रकार की खोज की है |
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. किसी फ़ंक्शन में सभी मापदंडों के लिए तर्क प्रदान किए जाने चाहिए
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
2. एक डिफ़ॉल्ट मान क्या करता है?
|
||||||
|
|
||||||
|
- [ ] एक सही मूल्य निर्धारित करता है
|
||||||
|
- [ ] एक पैरामीटर के लिए एक स्टार्टर मूल्य देता है ताकि आपका कोड अभी भी व्यवहार करता है यदि आप इसके लिए एक तर्क छोड़ देते हैं
|
||||||
|
- [ ] कोई उपयोगिता नहीं है
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
_इस क्विज को कक्षा में पूरा करें_
|
||||||
|
|
||||||
|
1. तर्क क्या है?
|
||||||
|
|
||||||
|
- [ ] यह कुछ है जिसे आप फ़ंक्शन परिभाषा में घोषित करते हैं
|
||||||
|
- [ ] यह ऐसा कुछ है जिसे आप एक समारोह में भेजते हैं
|
||||||
|
- [ ] यह कुछ ऐसा है जो आप उन लोगों के साथ हैं जिन्हें आप जानते हैं
|
||||||
|
|
||||||
|
2. सही या गलत: एक फ़ंक्शन को कुछ वापस करना होगा
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
# कार्य के साथ मज़ा
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
अलग-अलग फ़ंक्शंस बनाएं, दोनों फ़ंक्शंस जो कुछ लौटाते हैं और फ़ंक्शंस जो कुछ भी वापस नहीं करते हैं।
|
||||||
|
|
||||||
|
देखें कि क्या आप एक फ़ंक्शन बना सकते हैं जिसमें डिफ़ॉल्ट मानों के साथ मापदंडों और मापदंडों का मिश्रण है.
|
||||||
|
|
||||||
|
## सरनामा
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------- |
|
||||||
|
| | समाधान को विभिन्न मापदंडों के साथ दो या अधिक अच्छी तरह से निष्पादित कार्यों के साथ पेश किया जाता है | कार्य समाधान को एक फ़ंक्शन और कुछ मापदंडों के साथ पेश किया जाता है | समाधान में बग्स हैं |
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. निम्नलिखित कोड क्या लौटाएगा: `'1' == 1`
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
2. _or_ तर्क व्यक्त करने के लिए सही ऑपरेटर चुनें
|
||||||
|
|
||||||
|
- [ ] `a | b`
|
||||||
|
- [ ] `a || b`
|
||||||
|
- [ ] `a or b`
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
_इस क्विज को कक्षा में पूरा करें_
|
||||||
|
|
||||||
|
1. निम्नलिखित ऑपरेटर को `==` क्या जाता है
|
||||||
|
|
||||||
|
- [ ] समानता
|
||||||
|
- [ ] सख्त समानता
|
||||||
|
- [ ] असाइनमेंट
|
||||||
|
|
||||||
|
2. जावास्क्रिप्ट में एक तुलना किस प्रकार देता है?
|
||||||
|
|
||||||
|
- [ ] boolean
|
||||||
|
- [ ] null
|
||||||
|
- [ ] string
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
# ऑपरेटर्स
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
ऑपरेटरों के साथ खेलते हैं। यहां एक प्रोग्राम के लिए एक सुझाव है जिसे आप कार्यान्वित कर सकते हैं:
|
||||||
|
|
||||||
|
आपके पास दो अलग-अलग ग्रेडिंग सिस्टम के छात्रों का एक सेट है.
|
||||||
|
|
||||||
|
### पहला ग्रेडिंग सिस्टम
|
||||||
|
|
||||||
|
एक ग्रेडिंग सिस्टम को 1-5 से ग्रेड के रूप में परिभाषित किया गया है जहां 3 और इसके बाद के संस्करण का मतलब है कि आप पाठ्यक्रम पास करते हैं।
|
||||||
|
|
||||||
|
### दूसरा ग्रेडिंग सिस्टम
|
||||||
|
|
||||||
|
अन्य ग्रेड प्रणाली में निम्न ग्रेड हैं `A, A-, B, B-, C, C-` जहां `A` शीर्ष ग्रेड है और `C` सबसे कम पासिंग ग्रेड है।
|
||||||
|
|
||||||
|
### काम
|
||||||
|
|
||||||
|
निम्नलिखित सरणी को देखते हुए `allStudents` सभी छात्रों और उनके ग्रेड का प्रतिनिधित्व करते हैं, एक नई सरणी का निर्माण करते हैं` StudentsWhoPass` जिसमें सभी छात्र पास होते हैं।
|
||||||
|
|
||||||
|
> सुझाब , for-loop और if...else और तुलना ऑपरेटरों का उपयोग करें :
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let allStudents = [
|
||||||
|
'A',
|
||||||
|
'B-'
|
||||||
|
1,
|
||||||
|
4
|
||||||
|
5,
|
||||||
|
2
|
||||||
|
]
|
||||||
|
|
||||||
|
let studentsWhoPass = [];
|
||||||
|
```
|
||||||
|
|
||||||
|
## शीर्ष
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | ---------------------------- | ----------------------------- | ------------------------------------- |
|
||||||
|
| | पूरा समाधान प्रस्तुत किया है | आंशिक समाधान प्रस्तुत किया है | बग के साथ समाधान प्रस्तुत किया गया है |
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. फॉर-लूप के किस भाग को आपको इसके पुनरावृत्ति को 5 से बढ़ाना होगा
|
||||||
|
|
||||||
|
- [ ] condition (स्थिति)
|
||||||
|
- [ ] काउंटर
|
||||||
|
- [ ] iteration-expression
|
||||||
|
|
||||||
|
2. एक `while` और एक `for-loop` के बीच क्या अंतर है
|
||||||
|
|
||||||
|
- [ ] एक `for-loop` में एक काउंटर और इटरेशन-एक्सप्रेशन है, जहां `while` में केवल एक शर्त है
|
||||||
|
- [ ] एक `while` में एक काउंटर और इटरेशन-एक्सप्रेशन है, जहां `for-loop` में केवल एक शर्त है
|
||||||
|
- [ ] वे समान हैं, बस एक दूसरे के लिए एक उपनाम
|
||||||
|
|
||||||
|
3. दिया गया कोड `for (let i=1; i < 5; i++)`, कितने पुनरावृत्तियों प्रदर्शन करेंगे?
|
||||||
|
|
||||||
|
- [ ] 5
|
||||||
|
- [ ] 4
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
_इस क्विज को कक्षा में पूरा करें_
|
||||||
|
|
||||||
|
1. किसी सरणी में विशिष्ट आइटम को संदर्भित करने के लिए, आप एक क्या उपयोग करेंगे
|
||||||
|
|
||||||
|
- [ ] square bracket `[]`
|
||||||
|
- [ ] index
|
||||||
|
- [ ] curly braces `{}`
|
||||||
|
|
||||||
|
2. आपको किसी ऐरे में आइटम की संख्या कैसे मिलती है
|
||||||
|
|
||||||
|
- [ ] `len(array)` मेथड
|
||||||
|
- [ ] ऐरे पर `size` गुण
|
||||||
|
- [ ] ऐरे पर `length` गुण
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
# लूप अर्रे
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
एक प्रोग्राम बनाएं जो 1-20 के बीच हर तीसरे नंबर को सूचीबद्ध करता है और इसे कंसोल पर प्रिंट करता है.
|
||||||
|
|
||||||
|
> सुझाब : फॉर-लूप का उपयोग करें और पुनरावृत्ति-अभिव्यक्ति को संशोधित करें
|
||||||
|
|
||||||
|
## शीर्ष
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | ------------------------------------------------ | ------------------------- | ------------------------- |
|
||||||
|
| | प्रोग्राम सही ढंग से चलता है और टिप्पणी की गई है | प्रोग्राम टिप्पणी नहीं है | प्रोग्राम अधूरा या बगी है |
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
# जावास्क्रिप्ट का परिचय
|
||||||
|
|
||||||
|
जावास्क्रिप्ट वेब की भाषा है। इन चार पाठों में, आप इसकी मूल बातें जानेंगे.
|
||||||
|
|
||||||
|
### विषय
|
||||||
|
|
||||||
|
1. [वेरिएबल्स और डेटा प्रकार](1-data-types/README.md)
|
||||||
|
2. [फंक्शंस और मेथड्स](2-functions-methods/README.md)
|
||||||
|
3. [जावास्क्रिप्ट के साथ निर्णय करना](3-making-decisions/README.md)
|
||||||
|
4. [अर्रेंज और लूप्स ](4-arrays-loops/README.md)
|
||||||
|
|
||||||
|
### आभार सूची
|
||||||
|
|
||||||
|
ये पाठ ♥ से [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) और [Chris Noring](https://twitter.com/chris_noring) द्वारा लिखे गए है
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके पाठ के बाद इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. [Spans और Divs विनिमेय हैं]
|
||||||
|
|
||||||
|
- [ ] [सही]
|
||||||
|
- [ ] [गलत]
|
||||||
|
|
||||||
|
2. [HTML डॉक के प्रमुख में क्या हो सकता है:]
|
||||||
|
|
||||||
|
- [ ] [title टैग ]
|
||||||
|
- [ ] [metadata]
|
||||||
|
- [ ] [उपर्युक्त सभी]
|
||||||
|
|
||||||
|
3. [आप अपने मार्कअप में पदावनत टैग का उपयोग नहीं कर सकते हैं]
|
||||||
|
|
||||||
|
- [ ] [सही]
|
||||||
|
- [ ] [गलत]
|
||||||
|
- [ ] [गलत है, लेकिन उन्हें अच्छे कारण के लिए पदावनत किया गया है]
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
_HTML के बारे में एक वार्म-अप क्विज़_
|
||||||
|
|
||||||
|
इस क्विज को कक्षा में पूरा करें
|
||||||
|
|
||||||
|
1. HTML का फुल फॉर्म 'HyperText Mockup Language' है
|
||||||
|
|
||||||
|
- [ ] [सही]
|
||||||
|
- [ ] [गलत]
|
||||||
|
|
||||||
|
2. सभी HTML टैग को टैग खोलने और बंद करने दोनों की आवश्यकता होती है
|
||||||
|
|
||||||
|
- [ ] [सही]
|
||||||
|
- [ ] [गलत]
|
||||||
|
|
||||||
|
3. क्या करने के लिए सिमेंटिक मार्कअप का उपयोग करना सबसे महत्वपूर्ण है
|
||||||
|
|
||||||
|
- [ ] [code readability]
|
||||||
|
- [ ] [स्क्रीन रीडर]
|
||||||
|
- [ ] [संरक्षण]
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# अपने HTML का अभ्यास करें: एक ब्लॉग मॉकअप बनाएँ
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
कल्पना कीजिए कि आप अपनी निजी वेब साइट को डिजाइन कर रहे हैं, या नया स्वरूप दे रहे हैं . अपनी साइट का एक चित्रमय मार्कअप बनाएं, और फिर HTML मार्कअप को लिखें, जिसका उपयोग आप साइट के विभिन्न तत्वों का निर्माण करने के लिए करेंगे . आप इसे कागज पर कर सकते हैं, और इसे स्कैन कर सकते हैं, या अपनी पसंद के सॉफ़्टवेयर का उपयोग कर सकते हैं, बस HTML मार्कअप को हाथ से कोड करना सुनिश्चित करें.
|
||||||
|
|
||||||
|
## शीर्ष
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
|
||||||
|
| | एक ब्लॉग लेआउट को विसुआलय रूप से प्रदर्शित किया जाता है जिसमें कम से कम 10 तत्व प्रदर्शित होते हैं | प्रदर्शित लेआउट के लगभग 5 तत्वों के साथ एक ब्लॉग लेआउट नेत्रहीन दर्शाया गया है | प्रदर्शित लेआउट के अधिकांश 3 तत्वों के साथ एक ब्लॉग लेआउट नेत्रहीन रूप से दर्शाया गया है |
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके पाठ के बाद इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
क्विज़ को पूरा करने के लिए आपको निम्नलिखित सीखने के मॉड्यूल का संदर्भ देना होगा:
|
||||||
|
|
||||||
|
[CSS के साथ काम करें](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics)
|
||||||
|
|
||||||
|
1. [आप अपनी HTML फ़ाइल के मुख्य भाग में सीधे CSS लिख सकते हैं]
|
||||||
|
|
||||||
|
- [ ] [सही]
|
||||||
|
- [ ] [गलत]
|
||||||
|
|
||||||
|
1. [अपने ऐप में CSS को शामिल करना हमेशा आवश्यक होता है]
|
||||||
|
|
||||||
|
- [ ] [सही]
|
||||||
|
- [ ] [गलत]
|
||||||
|
- [ ] [गलत है, लेकिन यदि आप चाहते हैं कि यह अच्छा लगे तो आपको CSS की आवश्यकता होगी]
|
||||||
|
|
||||||
|
1. [CSS का निरीक्षण करने के लिए कौन से ब्राउज़र टूल का उपयोग किया जा सकता है?]
|
||||||
|
|
||||||
|
- [ ] [Elements]
|
||||||
|
- [ ] [Styles]
|
||||||
|
- [ ] [Network]
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
_CSS के बारे में एक वार्म-अप क्विज़_
|
||||||
|
|
||||||
|
इस क्विज को कक्षा में पूरा करें
|
||||||
|
|
||||||
|
1. HTML तत्वों को स्टाइल करने के लिए एक वर्ग(क्लॉस) या एक आईडी होना चाहिए
|
||||||
|
|
||||||
|
- [ ] [सही]
|
||||||
|
- [ ] [गलत]
|
||||||
|
|
||||||
|
2. CSS का अर्थ 'Complete Style Sheets' है
|
||||||
|
|
||||||
|
- [ ] [सही]
|
||||||
|
- [ ] [गलत]
|
||||||
|
|
||||||
|
3. एनिमेशन बनाने के लिए CSS का उपयोग किया जा सकता है
|
||||||
|
|
||||||
|
- [ ] [सही]
|
||||||
|
- [ ] [गलत]
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# CSS पुनर्रचना
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
फ्लेक्सबॉक्स या सीएसएस ग्रिड का उपयोग करके टेरारियम को रीस्टाइल करें, और यह दिखाने के लिए स्क्रीनशॉट लें कि आपने इसे कई ब्राउज़रों पर परीक्षण किया है. आपको मार्कअप को बदलने की आवश्यकता हो सकती है, इसलिए अपने रिफ्लेक्टर के लिए कला के साथ ऐप का एक नया संस्करण बनाएं. एलिमेंट्स को खींचने योग्य बनाने के बारे में चिंता न करें; अभी के लिए केवल HTML और CSS को रिफलेक्टर करें.
|
||||||
|
|
||||||
|
## शीर्ष
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | ---------------------------------------------------------------------------------- | ------------------------------- | ------------------------------------------ |
|
||||||
|
| | फ्लेक्सबॉक्स या सीएसएस ग्रिड का उपयोग करके पूरी तरह से नियंत्रित टेरारियम पेश करें | कुछ तत्वों को पुनर्स्थापित करें | टेरारियम को पूरी तरह से बहाल करने में विफल |
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके पाठ के बाद इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. [DOM एक नमूना है जो वेब पर एक दस्तावेज़ का प्रतिनिधित्व करता है]
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
2. [निम्नलिखित प्रदर्शन करने के लिए जावास्क्रिप्ट क्लोजर का उपयोग करें:]
|
||||||
|
|
||||||
|
- [ ] [फंक्शन्स के भीतर फंक्शन्स लिखें]
|
||||||
|
- [ ] [डोम को संलग्न करें]
|
||||||
|
- [ ] [स्क्रिप्ट ब्लॉक बंद करें]
|
||||||
|
|
||||||
|
3. [रिक्त स्थान भरें: क्लोजर तब उपयोगी होते हैं जब एक या अधिक फ़ंक्शन को बाहरी फ़ंक्शन के ______ तक पहुंचने की आवश्यकता होती है]
|
||||||
|
|
||||||
|
- [ ] [arrays]
|
||||||
|
- [ ] [scope]
|
||||||
|
- [ ] [functions]
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
_DOM के बारे में एक वार्म-अप क्विज़_
|
||||||
|
|
||||||
|
इस क्विज को कक्षा में पूरा करें
|
||||||
|
|
||||||
|
1. DOM का अर्थ 'Document Object Management' है
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
2. DOM को एक ट्री माना जा सकता है
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
3. वेब API का उपयोग करके, आप DOM में हेरफेर कर सकते हैं
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# DOM के साथ थोड़ा और काम करें
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
DOM तत्व को 'अपनाकर' DOM को थोड़ा और रिसर्च करें. MSDN की [डॉम इंटरफेसेस सुचि](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) पे जाये और एक चयन करे . इसे वेब में एक वेब साइट पर उपयोग किया जा रहा है, और यह कैसे उपयोग किया जाता है एक व्याख्या लिखें।
|
||||||
|
|
||||||
|
## शीर्ष
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | ------------------------------------------------ | ----------------------------------------------------- | ------------------------------------ |
|
||||||
|
| | उदाहरण के साथ अनुच्छेद लेखन प्रस्तुत किया गया है | बिना उदाहरण के साथ अनुच्छेद लेखन प्रस्तुत किया गया है | कोई राइटअप प्रस्तुत नहीं किया गया है |
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
# मेरा टेरारियम: जावास्क्रिप्ट का उपयोग करके HTML, CSS और DOM हेरफेर के बारे में जानने के लिए एक परियोजना 🌵🌱
|
||||||
|
|
||||||
|
एक छोटा सा ड्रैग एंड ड्रॉप कोड-मेडिटेशन। थोड़ा एचटीएमएल, जेएस और सीएसएस के साथ, आप एक वेब इंटरफ़ेस बना सकते हैं, इसे स्टाइल कर सकते हैं, और एक इंटरैक्शन जोड़ सकते हैं।
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# पाठ
|
||||||
|
|
||||||
|
1. [एचटीएमएल का परिचय](../1-intro-to-html/README.md)
|
||||||
|
2. [सीएसएस का परिचय](../2-intro-to-css/README.md)
|
||||||
|
3. [डोम और जेएस क्लोजर का परिचय](../3-intro-to-DOM-and-closures/README.md)
|
||||||
|
|
||||||
|
## आभार सूची
|
||||||
|
|
||||||
|
[Jen Looper](https://www.twitter.com/jenlooper) द्वारा ♥️ से लिखा गया है
|
||||||
|
|
||||||
|
सीएसएस के माध्यम से बनाया गया टेरारियम जैकब मंडरा के ग्लास जार से प्रेरित था [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
|
||||||
|
|
||||||
|
कलाकृति को [Jen Looper](http://jenlooper.com) द्वारा प्रोक्रीट का उपयोग करके हाथ से तैयार किया गया था।
|
||||||
|
|
||||||
|
## अपना टेरारियम तैनात करें
|
||||||
|
|
||||||
|
आप Azure Static Web Apps का उपयोग करके वेब पर अपना टेरारियम तैनात या प्रकाशित कर सकते हैं
|
||||||
|
|
||||||
|
1. ये रेपो फोर्क करे
|
||||||
|
|
||||||
|
2. इस बटन को दबाएँ
|
||||||
|
|
||||||
|
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=cxaall-4621-cxall#create/Microsoft.StaticApp)
|
||||||
|
|
||||||
|
3. अपना ऐप बनाने वाले विज़ार्ड के माध्यम से चलें। सुनिश्चित करें कि आपने ऐप रूट को या तो `../solution` या अपने कोडबेस की जड़ के रूप में सेट किया है. इस ऐप में कोई API नहीं है, इसलिए इसे जोड़ने की चिंता न करें. एक .github फोल्डर आपके फोर्क्ड रेपो में बनाया जाएगा जो Azure Static Web Apps की बिल्ड सर्विस बनाने और आपके ऐप को एक नए URL पर प्रकाशित करने में मदद करेगा।
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. किसी भी चीज़ के बारे में एक उपयोगकर्ता एक पृष्ठ पर एक घटना को बढ़ाता है
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
2. आम घटनाओं में क्या शामिल हैं
|
||||||
|
|
||||||
|
- [ ] click_event
|
||||||
|
- [ ] select_event
|
||||||
|
- [ ] input_event
|
||||||
|
- [ ] all of these
|
||||||
|
|
||||||
|
3. आप ईवेंट हैंडलर बनाने के लिए अनाम फ़ंक्शंस का उपयोग कर सकते हैं
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
_इस क्विज को कक्षा में पूरा करें_
|
||||||
|
|
||||||
|
1. इवेंट-संचालित प्रोग्रामिंग जब एक उपयोगकर्ता
|
||||||
|
|
||||||
|
- [ ] एक बटन पर क्लिक करता है
|
||||||
|
- [ ] एक वैल्यू बदलता है
|
||||||
|
- [ ] पृष्ठ के साथ सहभागिता करता है
|
||||||
|
- [ ] ऊपर मे से कोई
|
||||||
|
|
||||||
|
2. प्रक्रियात्मक प्रोग्रामिंग में, फंक्शन्स को कहा जाता है
|
||||||
|
|
||||||
|
- [ ] किसी भी समय
|
||||||
|
- [ ] एक विशिष्ट क्रम में
|
||||||
|
- [ ] बाएं से दाएं
|
||||||
|
|
||||||
|
3. ईवेंट हैंडलर्स को पंजीकृत करने के लिए DOM में उजागर की गई सार्वभौमिक विधि को क्या जाता है
|
||||||
|
|
||||||
|
- [ ] addEventListener
|
||||||
|
- [ ] addListener
|
||||||
|
- [ ] addEvent
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
# ईवेंट-चालित प्रोग्रामिंग - एक टाइपिंग गेम बनाएँ
|
||||||
|
|
||||||
|
## परिचय
|
||||||
|
|
||||||
|
टाइपिंग डेवलपर के सबसे कम कौशल में से एक है.अपने संपादक से विचारों को जल्दी से स्थानांतरित करने की क्षमता रचनात्मकता को स्वतंत्र रूप से प्रवाह करने की अनुमति देती है। सीखने के सर्वोत्तम तरीकों में से एक खेल खेलना है!
|
||||||
|
|
||||||
|
> तो, चलिए एक टाइपिंग गेम बनाते हैं!
|
||||||
|
|
||||||
|
आप टाइपिंग गेम बनाने के लिए अब तक आपके द्वारा बनाए गए जावास्क्रिप्ट, HTML और सीएसएस कौशल का उपयोग करने जा रहे हैं. खेल एक यादृच्छिक उद्धरण के साथ खिलाड़ी को प्रस्तुत करेगा (हम [शर्लक होम्स](https://en.wikipedia.org/wiki/Sherlock_Holmes) का उद्धरण उपयोग कर रहे हैं) और खिलाड़ी को इसे सही ढंग से टाइप करने में कितना समय लगता है. आप टाइपिंग गेम बनाने के लिए अब तक आपके द्वारा बनाए गए जावास्क्रिप्ट, HTML और सीएसएस कौशल का उपयोग करने जा रहे हैं।
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## आवश्यक शर्तें
|
||||||
|
|
||||||
|
यह पाठ मानता है कि आप निम्नलिखित अवधारणाओं से परिचित हैं:
|
||||||
|
|
||||||
|
- टेक्स्ट इनपुट और बटन नियंत्रण बनाना
|
||||||
|
- क्लासेज का उपयोग करके सीएसएस और शैलियों की स्थापना
|
||||||
|
- जावास्क्रिप्ट मूल बातें
|
||||||
|
- एक सरणी बनाना
|
||||||
|
- एक यादृच्छिक संख्या बनाना
|
||||||
|
- वर्तमान समय पाना
|
||||||
|
|
||||||
|
## पाठ
|
||||||
|
|
||||||
|
[इवेंट संचालित प्रोग्रामिंग का उपयोग करके एक टाइपिंग गेम बनाना](../typing-game/README.md)
|
||||||
|
|
||||||
|
## आभार सूची
|
||||||
|
|
||||||
|
[Christopher Harrison](http://www.twitter.com/geektrainer) द्वारा ♥️ के साथ लिखा गया है
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. वर्ल्ड वाइड किसके वेब द्वारा आविष्कार किया गया था
|
||||||
|
|
||||||
|
- [ ] टॉम बरनार्ड-लॉफ्ट
|
||||||
|
- [ ] टीम बैरनर्स-ली
|
||||||
|
- [ ] ट्रिश बर्थ-पूल
|
||||||
|
|
||||||
|
2. पहले ब्राउज़र को क्या जाता था
|
||||||
|
|
||||||
|
- [ ] वर्ल्ड वाइड वेब
|
||||||
|
- [ ] मोज़िल्ला
|
||||||
|
- [ ] नेटस्केप
|
||||||
|
|
||||||
|
3. ब्राउज़र उपयोगकर्ता के ब्राउज़िंग इतिहास को संग्रहीत कर सकते हैं
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
_ब्राउज़रों के बारे में एक वार्म-अप क्विज़_
|
||||||
|
|
||||||
|
इस क्विज को कक्षा में पूरा करें
|
||||||
|
|
||||||
|
1. आप ब्राउज़र एक्सटेंशन कहासे प्राप्त कर सकते हैं
|
||||||
|
|
||||||
|
- [ ] वालमार्ट
|
||||||
|
- [ ] ब्राउज़र का एक्सटेंशन स्टोर
|
||||||
|
- [ ] ऐप स्टोर
|
||||||
|
|
||||||
|
2. एनपीएम अर्थ है
|
||||||
|
|
||||||
|
- [ ] नोड पैकेज मैनेजर
|
||||||
|
- [ ] नेटस्केप प्राइमरी मिक्स
|
||||||
|
- [ ] नेचुरल प्रोसेसिंग मैनेजर
|
||||||
|
|
||||||
|
3. आपका ब्राउज़र सुरक्षित और असुरक्षित दोनों तरह से वेब पृष्ठों की सेवा कर सकता है
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# अपने एक्सटेंशन को पुनर्स्थापित करें
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
इस एक्सटेंशन का कोडबेस शैलियों के साथ आता है, लेकिन आपको उनका उपयोग नहीं करना है; इसकी css फाइल को एडिट करके इसे अपने एक्सटेंशन को अपना बना लें।
|
||||||
|
|
||||||
|
## सरनामा
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | ----------------------------------------------------- | --------------- | -------------------- |
|
||||||
|
| | कोड नई कार्यात्मक शैलियों के साथ प्रस्तुत किया गया है | स्टाइल अधूरा है | स्टाइल्स में गलती है |
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. हर बार जब आप ब्राउज़र विंडो बंद करते हैं तो लोकलस्टोरेज साफ हो जाता है
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
2. मुख्य ब्राउज़र विंडो एक ब्राउज़र के एक्सटेंशन के लोकलस्टोरेज को नियंत्रित करती है
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
3. एपीआई संदर्भ में REST का अर्थ क्या है
|
||||||
|
|
||||||
|
- [ ] Representational State Transfer
|
||||||
|
- [ ] Returning State Tasks
|
||||||
|
- [ ] Rendering State To Browser
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
_ब्राउज़र के बारे में एक वार्म-अप क्विज़_
|
||||||
|
|
||||||
|
इस क्विज को कक्षा में पूरा करें
|
||||||
|
|
||||||
|
1. APIs अर्थ है
|
||||||
|
|
||||||
|
- [ ] Application Programming Interfaces
|
||||||
|
- [ ] A Programming Inference
|
||||||
|
- [ ] Anti Proven Intentions
|
||||||
|
|
||||||
|
2. API का इस्तेमाल करे \_\_\_\_\_\_\_\_\_\_\_\_ से इंटरैक्ट करने के लिए
|
||||||
|
|
||||||
|
- [ ] एक और वेब से जुड़ी एसेट
|
||||||
|
- [ ] एक डेटाबेस
|
||||||
|
- [ ] ऊपर में से कोई
|
||||||
|
|
||||||
|
3. कोई भी व्यक्ति एपीआई बना सकता है
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# एक एपीआई अपनाएं
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
एपीआई के साथ खेलने के लिए बहुत मजेदार हो सकता है। यहाँ एक [कई मुफ्त लोगों की सूची](https://github.com/public-apis/public-apis) है. एक एपीआई चुनें, और एक ब्राउज़र एक्सटेंशन का निर्माण करें जो एक समस्या को हल करता है. यह पर्याप्त पालतू चित्र नहीं होने की छोटी समस्या हो सकती है (इसलिए, [डॉग सीईओ एपीआई](https://dog.ceo/dog-api/) इस्तेमाल करे या कुछ बड़ा - मज़े करे!
|
||||||
|
|
||||||
|
## शीर्ष
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | ------------------------------------------------------------------------------------ | ---------------------------------------------- | ----------------------------- |
|
||||||
|
| | उपरोक्त सूची से एपीआई का उपयोग करके एक पूर्ण ब्राउज़र एक्सटेंशन प्रस्तुत किया गया है | एक आंशिक ब्राउज़र एक्सटेंशन सबमिट किया जाता है | सबमिशन करने में त्रुटियाँ हैं |
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. अपनी साइट के प्रदर्शन के बारे में बेहतर जानकारी प्राप्त करने के लिए, इसका कैश साफ़ करें और प्रोफाइलर में पुनः लोड करें
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
2. ब्राउज़र एक्सटेंशन स्वाभाविक रूप से प्रदर्शन कर रहे हैं
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
3. प्रदर्शन अड़चनों के लिए निम्नलिखित का विश्लेषण करें
|
||||||
|
|
||||||
|
- [ ] डोम ट्रैवर्सल्स
|
||||||
|
- [ ] जावास्क्रिप्ट अनुकूलन
|
||||||
|
- [ ] एसेट प्रबंधन
|
||||||
|
- [ ] उपर्युक्त सभी
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
_इस क्विज को कक्षा में पूरा करें._
|
||||||
|
|
||||||
|
1. अपने ऐप के प्रदर्शन का परीक्षण करें
|
||||||
|
|
||||||
|
- [ ] ब्राउज़र के टूल का उपयोग करके
|
||||||
|
- [ ] एक अलग सॉफ्टवेयर पैकेज का उपयोग करके
|
||||||
|
- [ ] Manually
|
||||||
|
|
||||||
|
2. एक वेब साइट का 'प्रदर्शन' एक विश्लेषण है कि
|
||||||
|
|
||||||
|
- [ ] यह कितनी तेजी से लोड होता है
|
||||||
|
- [ ] उस पर कोड कितनी तेजी से चलता है
|
||||||
|
- [ ] ऊपर के दोनों
|
||||||
|
|
||||||
|
3. कुल मिलाकर, पिछले कुछ वर्षों में वेब पेजों के 'वजन' \_\_\_\_ है
|
||||||
|
|
||||||
|
- [ ] कम हुआ
|
||||||
|
- [ ] बढ़ गया
|
||||||
|
- [ ] वैसा ही
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
# प्रदर्शन के लिए एक साइट का विश्लेषण करें
|
||||||
|
|
||||||
|
वेब साइट की एक विस्तृत रिपोर्ट प्रदान करें, जिसमें ऐसे क्षेत्र दिखाए जा रहे हैं जहाँ प्रदर्शन समस्याग्रस्त है. विश्लेषण करें कि साइट धीमी क्यों है और आप इसे गति देने के लिए क्या कर सकते हैं. केवल ब्राउज़र टूल पर भरोसा न करें, लेकिन अन्य उपकरणों पर कुछ शोध करें जो आपकी रिपोर्ट में मदद कर सकते हैं.
|
||||||
|
|
||||||
|
## शीर्ष
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ------------------------------------ |
|
||||||
|
| | एक रिपोर्ट न केवल ब्राउज़र टूल से नहीं, बल्कि उपलब्ध है तो थर्ड पार्टी टूल्स से भी विवरण के साथ प्रस्तुत की जाती है | एक बुनियादी रिपोर्ट प्रस्तुत की गई है | एक न्यूनतम रिपोर्ट प्रस्तुत की गई है |
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
# कार्बन ट्रिगर ब्राउज़र एक्सटेंशन: पूरा किया हुआ कोड
|
||||||
|
|
||||||
|
बिजली के उपयोग को ट्रैक करने के लिए tmrow के C02 सिग्नल एपीआई का उपयोग करना, एक ब्राउज़र एक्सटेंशन का निर्माण करना ताकि आपके ब्राउज़र में आपके क्षेत्र की बिजली का उपयोग कितना भारी हो, इस बारे में आपको एक रिमाइंडर मिल सके. इस एक्सटेंशन तदर्थ का उपयोग करने से आपको इस जानकारी के आधार पर अपनी गतिविधियों पर निर्णय लेने में मदद मिलेगी.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## शुरू करना
|
||||||
|
|
||||||
|
आपको [npm](https://npmjs.com) इंस्टॉल करना होगा । अपने कंप्यूटर पर एक फ़ोल्डर में इस कोड की एक प्रति डाउनलोड करें।
|
||||||
|
|
||||||
|
सभी आवश्यक पैकेज स्थापित करें:
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
वेबपैक से एक्सटेंशन बनाएं
|
||||||
|
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
एज पर स्थापित करने के लिए, एक्सटेंशन पैनल को खोजने के लिए ब्राउज़र के ऊपरी दाएं कोने पर 'तीन डॉट' मेनू का उपयोग करें. वहां से, एक नया एक्सटेंशन लोड करने के लिए 'लोड अनपैक्ड' चुनें. प्रॉम्प्ट पर 'dist' फ़ोल्डर खोलें और एक्सटेंशन लोड होगा. इसका उपयोग करने के लिए, आपको CO2 सिग्नल की एपीआई ([ईमेल के माध्यम से यहां प्राप्त करें](https://www.co2snal.com/) के लिए एक एपीआई कुंजी की आवश्यकता होगी - इस पृष्ठ पर बॉक्स में अपना ईमेल दर्ज करें) और [अपने क्षेत्र के लिए कोड](http://api.electricitymap.org/v3/zones) [विद्युत मानचित्र](https://www.electricitymap.org/map) (उदाहरण के लिए, बोस्टन में, मैं 'US-NEISO' का उपयोग करता हूं).
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
एक बार एपीआई कुंजी और क्षेत्र एक्सटेंशन इंटरफ़ेस में इनपुट हो जाने के बाद, ब्राउज़र एक्सटेंशन बार में रंगीन डॉट को आपके क्षेत्र की ऊर्जा के उपयोग को प्रतिबिंबित करने के लिए बदलना चाहिए और आपको एक संकेतक देना चाहिए कि ऊर्जा-भारी गतिविधियां आपके प्रदर्शन के लिए क्या उपयुक्त होंगी।. इस 'डॉट' प्रणाली के पीछे की अवधारणा मुझे कैलिफ़ोर्निया उत्सर्जन के लिए [एनर्जी लॉलीपॉप एक्सटेंशन](https://energylollipop.com/) द्वारा दी गई थी।
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
# कार्बन ट्रिगर ब्राउज़र एक्सटेंशन: स्टार्टर कोड
|
||||||
|
|
||||||
|
बिजली के उपयोग को ट्रैक करने के लिए tmrow के C02 सिग्नल एपीआई का उपयोग करना, एक ब्राउज़र एक्सटेंशन का निर्माण करना ताकि आपके ब्राउज़र में आपके क्षेत्र की बिजली का उपयोग कितना भारी हो, इस बारे में आपको एक रिमाइंडर मिल सके. इस एक्सटेंशन तदर्थ का उपयोग करने से आपको इस जानकारी के आधार पर अपनी गतिविधियों पर निर्णय लेने में मदद मिलेगी.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## शुरू करना
|
||||||
|
|
||||||
|
आपको [npm](https://npmjs.com) इंस्टॉल करना होगा । अपने कंप्यूटर पर एक फ़ोल्डर में इस कोड की एक प्रति डाउनलोड करें।
|
||||||
|
|
||||||
|
सभी आवश्यक पैकेज स्थापित करें:
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
वेबपैक से एक्सटेंशन बनाएं
|
||||||
|
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
एज पर स्थापित करने के लिए, एक्सटेंशन पैनल को खोजने के लिए ब्राउज़र के ऊपरी दाएं कोने पर 'तीन डॉट' मेनू का उपयोग करें. वहां से, एक नया एक्सटेंशन लोड करने के लिए 'लोड अनपैक्ड' चुनें. प्रॉम्प्ट पर 'dist' फ़ोल्डर खोलें और एक्सटेंशन लोड होगा. इसका उपयोग करने के लिए, आपको CO2 सिग्नल की एपीआई ([ईमेल के माध्यम से यहां प्राप्त करें](https://www.co2snal.com/) के लिए एक एपीआई कुंजी की आवश्यकता होगी - इस पृष्ठ पर बॉक्स में अपना ईमेल दर्ज करें) और [अपने क्षेत्र के लिए कोड](http://api.electricitymap.org/v3/zones) [विद्युत मानचित्र](https://www.electricitymap.org/map) (उदाहरण के लिए, बोस्टन में, मैं 'US-NEISO' का उपयोग करता हूं).
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
एक बार एपीआई कुंजी और क्षेत्र एक्सटेंशन इंटरफ़ेस में इनपुट हो जाने के बाद, ब्राउज़र एक्सटेंशन बार में रंगीन डॉट को आपके क्षेत्र की ऊर्जा के उपयोग को प्रतिबिंबित करने के लिए बदलना चाहिए और आपको एक संकेतक देना चाहिए कि ऊर्जा-भारी गतिविधियां आपके प्रदर्शन के लिए क्या उपयुक्त होंगी।. इस 'डॉट' प्रणाली के पीछे की अवधारणा मुझे कैलिफ़ोर्निया उत्सर्जन के लिए [एनर्जी लॉलीपॉप एक्सटेंशन](https://energylollipop.com/) द्वारा दी गई थी।
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
# ब्राउज़र एक्सटेंशन का निर्माण
|
||||||
|
|
||||||
|
एक अलग प्रकार की वेब एसेट्स का निर्माण करते समय अपने ब्राउज़र के प्रदर्शन के बारे में सोचने के लिए ब्राउज़र एक्सटेंशन का निर्माण एक मजेदार और दिलचस्प तरीका है.इस मॉड्यूल में शामिल पाठ हैं कि ब्राउज़र कैसे काम करते हैं और ब्राउज़र एक्सटेंशन कैसे तैनात करते हैं, फॉर्म कैसे बनाते हैं, एपीआई कॉल करते हैं, और लोकलस्टोरेज का उपयोग करते हैं, और अपनी वेबसाइट के प्रदर्शन को कैसे गेज करें और इसमें सुधार करें।.
|
||||||
|
|
||||||
|
आप एज, क्रोम और फ़ायरफ़ॉक्स पर काम करने वाले ब्राउज़र एक्सटेंशन का निर्माण करेंगे. यह एक्सटेंशन, जो एक मिनी वेब साइट की तरह है जो एक बहुत ही विशिष्ट कार्य के अनुरूप है, किसी दिए गए क्षेत्र की बिजली के उपयोग और कार्बन की तीव्रता के लिए [C02 सिग्नल एपीआई](https://www.co2signal.com) की जांच करता है, और इस क्षेत्र के कार्बन पदचिह्न पर एक रीडिंग देता है.
|
||||||
|
|
||||||
|
एपीआई कुंजी और क्षेत्र कोड स्थानीय बिजली के उपयोग को निर्धारित करने के लिए एक रूप में इनपुट होने के बाद इस विस्तार को उपयोगकर्ता द्वारा तदर्थ कहा जा सकता है और इस तरह डेटा की पेशकश करते हैं जो उपयोगकर्ता के बिजली निर्णयों को प्रभावित कर सकते हैं.उदाहरण के लिए, अपने क्षेत्र में उच्च बिजली के उपयोग की अवधि के दौरान कपड़े के ड्रायर (कार्बन-गहन गतिविधि) को चलाने में देरी करना बेहतर हो सकता है।
|
||||||
|
|
||||||
|
### विषय
|
||||||
|
|
||||||
|
1. [ब्राउज़र के बारे में](../1-about-browsers/README.md)
|
||||||
|
2. [फॉर्म्स और लोकल स्टोरेज](../2-forms-browsers-local-storage/README.md)
|
||||||
|
3. [पृष्ठभूमि के कार्य और प्रदर्शन](../3-background-tasks-and-performance/README.md)
|
||||||
|
|
||||||
|
### क्रेडिट
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## क्रेडिट
|
||||||
|
|
||||||
|
इस वेब कार्बन ट्रिगर के लिए विचार असीम हुसैन द्वारा पेश किया गया था, माइक्रोसॉफ्ट के ग्रीन क्लाउड एडवोकेसी टीम में नेतृत्व और [ग्रीन प्रिंसिपल्स](https://principles.green/) के लेखक. यह मूल रूप से एक [वेब साइट परियोजना](https://github.com/jlooper/green) था.
|
||||||
|
|
||||||
|
ब्राउज़र एक्सटेंशन की संरचना [Adebola Adeniran's COVID एक्सटेंशन](https://github.com/onedebos/covtension) से प्रभावित था.
|
||||||
|
|
||||||
|
'डॉट' आइकन सिस्टम के पीछे की अवधारणा को कैलिफ़ोर्निया उत्सर्जन के लिए [एनर्जी लॉलीपॉप] (https://energylollipop.com/) ब्राउज़र एक्सटेंशन की आइकन संरचना द्वारा सुझाया गया था।
|
||||||
|
|
||||||
|
ये पाठ [Jen Looper](https://www.twitter.com/jenlooper) द्वारा ♥️ के साथ लिखा गया है
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके पाठ के बाद इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. कक्षाएं व्यवहार पर निर्भर करने के लिए इन्हेरिटेंस पर भरोसा करती हैं
|
||||||
|
|
||||||
|
- [ ] [सही]
|
||||||
|
- [ ] [गलत]
|
||||||
|
|
||||||
|
2. खेल वस्तुओं के लिए कम्पोजीशन एक पसंदीदा डिज़ाइन पैटर्न है
|
||||||
|
|
||||||
|
- [ ] [सही]
|
||||||
|
- [ ] [गलत]
|
||||||
|
|
||||||
|
3. Pub/Sub का अर्थ है:
|
||||||
|
|
||||||
|
- [ ] Publish/Subscribe
|
||||||
|
- [ ] Print/Staple
|
||||||
|
- [ ] Publish/Sanitize
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
_जावास्क्रिप्ट का उपयोग कर खेल के विकास के बारे में एक वार्म-अप प्रश्नोत्तरी_
|
||||||
|
|
||||||
|
इस क्विज को कक्षा में पूरा करें
|
||||||
|
|
||||||
|
1. जावास्क्रिप्ट खेल के निर्माण के लिए एक अलोकप्रिय भाषा है
|
||||||
|
|
||||||
|
- [ ] [सही]
|
||||||
|
- [ ] [गलत]
|
||||||
|
|
||||||
|
2. Pub/Sub खेल की एसेट्स और प्रवाह के प्रबंधन के लिए एक पसंदीदा पैटर्न है
|
||||||
|
|
||||||
|
- [ ] [सही]
|
||||||
|
- [ ] [गलत]
|
||||||
|
|
||||||
|
3. ऑब्जेक्ट इन्हेरिटेंस को या तो क्लासेज या कम्पोजीशन का उपयोग करके नियंत्रित किया जा सकता है
|
||||||
|
|
||||||
|
- [ ] [सही]
|
||||||
|
- [ ] [गलत]
|
||||||
@ -0,0 +1,222 @@
|
|||||||
|
# एक अंतरिक्ष खेल बनाएँ भाग 1: परिचय
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## लेक्चर से पहलेकी क्विज
|
||||||
|
|
||||||
|
[लेक्चर से पहलेकी क्विज ](../.github/pre-lecture-quiz.md)
|
||||||
|
|
||||||
|
### खेल के विकास में इन्हेरिटेंस और कम्पोजीशन
|
||||||
|
|
||||||
|
पहले के पाठों में, आपके द्वारा बनाए गए ऐप्स के डिज़ाइन आर्किटेक्चर के बारे में ज्यादा चिंता करने की ज़रूरत नहीं थी, क्योंकि प्रोजेक्ट बहुत कम दायरे में थे. हालाँकि, जब आपके अनुप्रयोग आकार और दायरे में बढ़ते हैं, तो वास्तु निर्णय एक बड़ी चिंता बन जाते हैं. जावास्क्रिप्ट में बड़ा अनुप्रयोग बनाने के लिए दो प्रमुख दृष्टिकोण हैं: _composition_ या _inheritance_. दोनों के पक्ष और विपक्ष हैं लेकिन किसी खेल के संदर्भ में उन्हें समझते हैं .
|
||||||
|
|
||||||
|
✅ अब तक लिखी गई सबसे प्रसिद्ध प्रोग्रामिंग किताबों में से एक है [डिजाइन पैटर्न](https://en.wikipedia.org/wiki/Design_Patterns)
|
||||||
|
|
||||||
|
एक गेम में आपके पास `game objects` हैं जो एक स्क्रीन पर मौजूद ऑब्जेक्ट हैं. इसका मतलब है कि उनके पास एक कार्टेशियन समन्वय प्रणाली पर एक स्थान है, जिसमें एक `x` और` y` समन्वय है. जैसा कि आप एक गेम विकसित करते हैं, आप देखेंगे कि आपके सभी गेम ऑब्जेक्ट में एक मानक गुण है, जो आपके द्वारा बनाए जाने वाले प्रत्येक गेम के लिए सामान्य है, अर्थात् तत्व हैं:
|
||||||
|
|
||||||
|
- **location-based** अधिकांश, यदि सभी नहीं हैं, तो खेल तत्व स्थान आधारित हैं. इसका मतलब है कि उनके पास एक स्थान है, एक `x` और` y`.
|
||||||
|
- **movable** ये ऐसी वस्तुएं हैं जो एक नए स्थान पर जा सकती हैं. यह आम तौर पर एक नायक, एक राक्षस या एक एनपीसी (एक गैर खिलाड़ी चरित्र) है, लेकिन उदाहरण के लिए, एक पेड़ जैसी स्थिर वस्तु नहीं.
|
||||||
|
- **self-destructing** ये ऑब्जेक्ट केवल समय की एक निर्धारित अवधि के लिए मौजूद होते हैं, इससे पहले कि वे स्वयं को हटाने के लिए सेट करें. आमतौर पर यह एक `मृत` या` नष्ट` बूलियन द्वारा दर्शाया जाता है जो गेम इंजन को संकेत देता है कि इस ऑब्जेक्ट को अब प्रस्तुत नहीं किया जाना चाहिए.
|
||||||
|
- **cool-down** 'कूल-डाउन' एक अल्पकालिक वस्तुओं में से एक विशिष्ट गुण है. एक विशिष्ट उदाहरण एक विस्फोट की तरह पाठ या चित्रमय प्रभाव का एक टुकड़ा है जिसे केवल कुछ मिलीसेकंड के लिए देखा जाना चाहिए.
|
||||||
|
|
||||||
|
✅ पैक मैन जैसे खेल के बारे में सोचें. क्या आप इस खेल में ऊपर सूचीबद्ध चार ऑब्जेक्ट प्रकारों की पहचान कर सकते हैं?
|
||||||
|
|
||||||
|
### व्यवहार व्यक्त करना
|
||||||
|
|
||||||
|
हम ऊपर वर्णित सभी व्यवहार हैं जो गेम ऑब्जेक्ट्स हो सकते हैं . तो हम उन सबको को कैसे एनकोड करेंगे? हम इस व्यवहार को या तो क्लासेज या objects से संबंधित विधियों के रूप में व्यक्त कर सकते हैं.
|
||||||
|
|
||||||
|
**क्लासेज**
|
||||||
|
|
||||||
|
विचार एक क्लास के लिए एक निश्चित व्यवहार को जोड़ने के लिए `inheritence` के साथ संयोजन में `inheritence` का उपयोग करने के लिए है.
|
||||||
|
|
||||||
|
✅ समझने के लिए इन्हेरिटेंस एक महत्वपूर्ण अवधारणा है। [एमडीएन के इन्हेरिटेंस के बारे में लेख](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototyp_chain) पर और जानें.
|
||||||
|
|
||||||
|
कोड के माध्यम से व्यक्त, एक गेम ऑब्जेक्ट आमतौर पर इस तरह दिख सकता है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
//set up the class GameObject
|
||||||
|
class GameObject {
|
||||||
|
constructor(x, y, type) {
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
this.type = type;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//this class will extend the GameObject's inherent class properties
|
||||||
|
class Movable extends GameObject {
|
||||||
|
constructor(x, y, type) {
|
||||||
|
super(x, y, type);
|
||||||
|
}
|
||||||
|
|
||||||
|
//this movable object can be moved on the screen
|
||||||
|
moveTo(x, y) {
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//this is a specific class that extends the Movable class, so it can take advantage of all the properties that it inherits
|
||||||
|
class Hero extends Movable {
|
||||||
|
constructor(x, y) {
|
||||||
|
super(x, y, "Hero");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//this class, on the other hand, only inherits the GameObject properties
|
||||||
|
class Tree extends GameObject {
|
||||||
|
constructor(x, y) {
|
||||||
|
super(x, y, "Tree");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//a hero can move...
|
||||||
|
const hero = new Hero();
|
||||||
|
hero.moveTo(5, 5);
|
||||||
|
|
||||||
|
//but a tree cannot
|
||||||
|
const tree = new Tree();
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ एक पैक-मैन हीरो (इंकी, पिंकी या ब्लंकी, उदाहरण के लिए) को फिर से लागू करने के लिए कुछ मिनट लें और यह जावास्क्रिप्ट में कैसे लिखा जाएगा.
|
||||||
|
|
||||||
|
**कम्पोजीशन**
|
||||||
|
|
||||||
|
ऑब्जेक्ट इन्हेरिटेंस को संभालने का एक अलग तरीका _Composition_ का उपयोग करते है. फिर, ऑब्जेक्ट अपने व्यवहार को इस तरह व्यक्त करते हैं:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
//create a constant gameObject
|
||||||
|
const gameObject = {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
type: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
//...and a constant movable
|
||||||
|
const movable = {
|
||||||
|
moveTo(x, y) {
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//then the constant movableObject is composed of the gameObject and movable constants
|
||||||
|
const movableObject = {...gameObject, ...movable};
|
||||||
|
|
||||||
|
//then create a function to create a new Hero who inherits the movableObject properties
|
||||||
|
function createHero(x, y) {
|
||||||
|
return {
|
||||||
|
...movableObject,
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
type: 'Hero'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//...and a static object that inherits only the gameObject properties
|
||||||
|
function createStatic(x, y, type) {
|
||||||
|
return {
|
||||||
|
...gameObject
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
type
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//create the hero and move it
|
||||||
|
const hero = createHero(10,10);
|
||||||
|
hero.moveTo(5,5);
|
||||||
|
//and create a static tree which only stands around
|
||||||
|
const tree = createStatic(0,0, 'Tree');
|
||||||
|
```
|
||||||
|
|
||||||
|
**मुझे किस पैटर्न का उपयोग करना चाहिए?**
|
||||||
|
|
||||||
|
यह आपके ऊपर है कि आप किस पैटर्न को चुनते हैं । जावास्क्रिप्ट इन दोनों प्रतिमानों का समर्थन करता है.
|
||||||
|
|
||||||
|
--
|
||||||
|
|
||||||
|
खेल के विकास में एक और पैटर्न आम है जो गेम के उपयोगकर्ता अनुभव और प्रदर्शन को संभालने की समस्या को संबोधित करता है.
|
||||||
|
|
||||||
|
## Pub/sub पैटर्न
|
||||||
|
|
||||||
|
✅ Pub/Sub अर्थ 'publish-subscribe' है
|
||||||
|
|
||||||
|
यह पैटर्न इस विचार को संबोधित करता है कि आपके आवेदन के असमान भागों को एक दूसरे के बारे में पता नहीं होना चाहिए. यह देखने के लिए बहुत आसान बनाता है कि सामान्य रूप से क्या हो रहा है अगर विभिन्न भागों को अलग किया जाता है. यह भी अगर आप की जरूरत है अचानक व्यवहार बदलने के लिए आसान बनाता है. हम इसे कैसे पूरा करेंगे? हम कुछ अवधारणाओं को स्थापित करके ऐसा करते हैं:
|
||||||
|
|
||||||
|
- **message**: एक संदेश आमतौर पर एक टेक्स्ट स्ट्रिंग होता है जिसमें वैकल्पिक पेलोड (डेटा का एक टुकड़ा जो स्पष्ट करता है कि संदेश क्या है). एक खेल में एक विशिष्ट संदेश `KEY_PRESSED_ENTER` हो सकता है।
|
||||||
|
- **publisher**: यह तत्व एक संदेश \_प्रकाशित\_ करता है और इसे सभी ग्राहकों को भेजता है.
|
||||||
|
- **subscriber**: यह तत्व विशिष्ट संदेशों को \_सूचीबद्ध\_ करता है और इस संदेश को प्राप्त करने के परिणामस्वरूप कुछ कार्य करता है, जैसे कि लेजर फायरिंग.
|
||||||
|
|
||||||
|
कार्यान्वयन आकार में काफी छोटा है लेकिन यह एक बहुत शक्तिशाली पैटर्न है। यहां बताया गया है कि इसे कैसे लागू किया जा सकता है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
//set up an EventEmitter class that contains listeners
|
||||||
|
class EventEmitter {
|
||||||
|
constructor() {
|
||||||
|
this.listeners = {};
|
||||||
|
}
|
||||||
|
//when a message is received, let the listener to handle its payload
|
||||||
|
on(message, listener) {
|
||||||
|
if (!this.listeners[message]) {
|
||||||
|
this.listeners[message] = [];
|
||||||
|
}
|
||||||
|
this.listeners[message].push(listener);
|
||||||
|
}
|
||||||
|
//when a message is sent, send it to a listener with some payload
|
||||||
|
emit(message, payload = null) {
|
||||||
|
if (this.listeners[message]) {
|
||||||
|
this.listeners[message].forEach((l) => l(message, payload));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
उपरोक्त कोड का उपयोग करने के लिए हम एक बहुत छोटा कार्यान्वयन बना सकते हैं:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
//set up a message structure
|
||||||
|
const Messages = {
|
||||||
|
HERO_MOVE_LEFT: "HERO_MOVE_LEFT",
|
||||||
|
};
|
||||||
|
//invoke the eventEmitter you set up above
|
||||||
|
const eventEmitter = new EventEmitter();
|
||||||
|
//set up a hero
|
||||||
|
const hero = createHero(0, 0);
|
||||||
|
//let the eventEmitter know to watch for messages pertaining to the hero moving left, and act on it
|
||||||
|
eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
|
||||||
|
hero.move(5, 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
//set up the window to listen for the keyup event, specifically if the left arrow is hit, emit a message to move the hero left
|
||||||
|
window.addEventListener("keyup", (evt) => {
|
||||||
|
if (evt.key === "ArrowLeft") {
|
||||||
|
eventEmitter.emit(Messages.HERO_MOVE_LEFT);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
ऊपर हम एक कीबोर्ड ईवेंट कनेक्ट करते हैं, `ArrowLeft` और `HERO_MOVE_LEFT` संदेश भेजें. हम उस संदेश को सुनते हैं और परिणामस्वरूप `hero` को स्थानांतरित करते हैं. इस पैटर्न के साथ ताकत यह है कि इवेंट लिस्टनेर और हीरो एक दूसरे के बारे में नहीं जानते हैं. आप `ArrowLeft` को `A` की के लिए रीमैप कर सकते हैं. इसके अतिरिक्त यह `ArrowLeft` पर पूरी तरह से अलग कुछ करने के लिए संभव हो जाएगा करने के लिए EventEmitter की `on` समारोह में कुछ संपादन:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
|
||||||
|
hero.move(5, 0);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
जब आपका गेम बढ़ता है तो चीजें अधिक जटिल हो जाती हैं, यह पैटर्न जटिलता में समान रहता है और आपका कोड साफ रहता है. यह वास्तव में इस पैटर्न को अपनाने की सिफारिश की गई है.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 चुनौती
|
||||||
|
|
||||||
|
इस बारे में सोचें कि pub-sub पैटर्न एक खेल को कैसे बढ़ा सकते हैं. किन हिस्सों को घटनाओं का उत्सर्जन करना चाहिए, और खेल को उन्हें कैसे प्रतिक्रिया देनी चाहिए? अब आपका मौका रचनात्मक बनने का है, एक नए खेल के बारे में सोचकर और उसके भागों का व्यवहार कैसे हो सकता है.
|
||||||
|
|
||||||
|
## लेक्चर बाद की क्विज
|
||||||
|
|
||||||
|
[लेक्चर बाद की क्विज](.github/post-lecture-quiz.hi.md)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
pub/sub[के बारे में पढ़े](https://docs.microsoft.com/en-us/azure/altecture/patterns/publisher-subscriber) और अधिक जानें .
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[एक खेल का नका](assignment.hi.md)
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# खेल का दिखावटी माडल
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
पाठ में कोड नमूनों का उपयोग करते हुए, आप जिस खेल का आनंद लेते हैं उसका प्रतिनिधित्व लिखें.यह एक साधारण खेल होना होगा, लेकिन लक्ष्य यह है कि क्लासेज या कम्पोजीशन पैटर्न और pub/sub पैटर्न का उपयोग करें यह दिखाने के लिए कि कोई गेम कैसे लॉन्च हो सकता है. रचनात्मक हो!
|
||||||
|
|
||||||
|
## शीर्ष
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | ----------------------------------------------------------- | ---------------------------------------------------------- | -------------------------------------------------------- |
|
||||||
|
| | तीन तत्वों को स्क्रीन पर रखा जाता है और हेरफेर किया जाता है | दो तत्वों को स्क्रीन पर रखा जाता है और हेरफेर किया जाता है | एक तत्व को स्क्रीन पर रखा जाता है और हेरफेर किया जाता है |
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके पाठ के बाद इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. आप सीधे कैनवस पर ड्राइंग ऑपरेशन कर सकते हैं
|
||||||
|
|
||||||
|
- [ ] [सही]
|
||||||
|
- [ ] [गलत]
|
||||||
|
|
||||||
|
2. आप यह जानने के लिए `onload` घटना सुनते हैं कि किसी छवि ने अतुल्यकालिक रूप से लोड किया है
|
||||||
|
|
||||||
|
- [ ] [सही]
|
||||||
|
- [ ] [गलत]
|
||||||
|
|
||||||
|
3. आप एक ऑपरेशन के साथ स्क्रीन पर चित्र बनाते हैं उसे क्या कहते है
|
||||||
|
|
||||||
|
- [ ] paintImage()
|
||||||
|
- [ ] drawImage()
|
||||||
|
- [ ] draw()
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
_खेल के विकास के बारे में एक वार्म अप प्रश्नोत्तरी_
|
||||||
|
|
||||||
|
इस क्विज को कक्षा में पूरा करें
|
||||||
|
|
||||||
|
1. कैनवास तत्व वह है जिसे आप स्क्रीन पर खींचने के लिए उपयोग करते हैं
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
2. आप केवल सरल ज्यामितीय आकृतियों को आकर्षित कर सकते हैं
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
3. बिंदु 0,0 नीचे बाईं ओर है
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
@ -0,0 +1,218 @@
|
|||||||
|
# एक अंतरिक्ष खेल भाग 2 बनाएँ: कैनवस के लिए नायक और राक्षस बनाएँ
|
||||||
|
|
||||||
|
## लेक्चर पाहिले की क्विज
|
||||||
|
|
||||||
|
[लेक्चर पाहिले की क्विज](.github/pre-lecture-quiz.hi.md)
|
||||||
|
|
||||||
|
## कैनवास
|
||||||
|
|
||||||
|
कैनवास एक HTML तत्व है जो डिफ़ॉल्ट रूप से कोई सामग्री नहीं है; यह एक खाली स्लेट है. आपको उस पर ड्राइंग करके इसे जोड़ना होगा.
|
||||||
|
|
||||||
|
✅ MDN पर [कैनवस एपीआई के बारे में और पढ़ें](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
|
||||||
|
|
||||||
|
यहां बताया गया है कि पेज के मुख्य भाग के रूप में यह आमतौर पर घोषित किया जाता है:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<canvas id="myCanvas" width="200" height="100"></canvas>
|
||||||
|
```
|
||||||
|
|
||||||
|
ऊपर हम `id`,`width` और `height` सेट कर रहे हैं
|
||||||
|
|
||||||
|
- `id`: इसे सेट करें ताकि आप एक संदर्भ प्राप्त कर सकें जब आपको इसके साथ परस्पर करने की आवश्यकता हो.
|
||||||
|
- `width`: यह तत्व की चौड़ाई है.
|
||||||
|
- `height`: यह तत्व की ऊंचाई है.
|
||||||
|
|
||||||
|
## सरल ज्यामिति खींचना
|
||||||
|
|
||||||
|
कैनवस चीजों को आकर्षित करने के लिए एक कार्टेशियन समन्वय प्रणाली का उपयोग कर रहा है.
|
||||||
|
इस प्रकार यह x- अक्ष और y- अक्ष का उपयोग करता है जहां कुछ स्थित है व्यक्त करने के लिए.स्थान `0,0` शीर्ष बाईं स्थिति है और नीचे दायाँ हिस्सा है जिसे आपने कैनवास का WIDTH और HEIGHT कहा है.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) से छवि
|
||||||
|
|
||||||
|
कैनवास तत्व पर आकर्षित करने के लिए आपको निम्नलिखित चरणों से गुजरना होगा:
|
||||||
|
|
||||||
|
1. **एक संदर्भ प्राप्त करें** कैनवास तत्व के लिए.
|
||||||
|
2. **एक संदर्भ प्राप्त करें** संदर्भ तत्व पर जो कैनवास तत्व पर बैठता है.
|
||||||
|
3. **एक ड्राइंग ऑपरेशन** संदर्भ तत्व का उपयोग करके.
|
||||||
|
|
||||||
|
उपरोक्त चरणों के लिए कोड आमतौर पर ऐसा दिखता है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// draws a red rectangle
|
||||||
|
//1. get the canvas reference
|
||||||
|
canvas = document.getElementById("myCanvas");
|
||||||
|
|
||||||
|
//2. set the context to 2D to draw basic shapes
|
||||||
|
ctx = canvas.getContext("2d");
|
||||||
|
|
||||||
|
//3. fill it with the color red
|
||||||
|
ctx.fillStyle = "red";
|
||||||
|
|
||||||
|
//4. and draw a rectangle with these parameters, setting location and size
|
||||||
|
ctx.fillRect(0, 0, 200, 200); // x,y,width, height
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ कैनवस एपीआई ज्यादातर 2डी आकृतियों पर केंद्रित है, लेकिन आप एक वेब साइट पर 3डी तत्वों को भी आकर्षित कर सकते हैं; इसके लिए, आप [वेबगियल एपीआई](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) का उपयोग कर सकते हैं.
|
||||||
|
|
||||||
|
आप कैनवस एपीआई के साथ सभी प्रकार की चीजें आकर्षित कर सकते हैं जैसे की :
|
||||||
|
|
||||||
|
- **Geometrical shapes**, हमने पहले ही दिखाया है कि एक आयत कैसे खींचना है, लेकिन बहुत कुछ है जो आप खींच सकते हैं.
|
||||||
|
- **Text**, आप अपनी इच्छानुसार किसी भी फ़ॉन्ट और रंग के साथ एक पाठ खींच सकते हैं.
|
||||||
|
- **Images**, आप उदाहरण के लिए .jpg या .png जैसी छवि परिसंपत्ति के आधार पर चित्र बना सकते हैं.
|
||||||
|
|
||||||
|
✅ कोशिश करो! आप जानते हैं कि एक आयत कैसे बनाई जाती है, क्या आप किसी पृष्ठ पर एक वृत्त खींच सकते हैं? कोडपेन पर कुछ दिलचस्प कैनवस ड्रॉइंग पर एक नज़र डालें. यहाँ एक [विशेष रूप से प्रभावशाली उदाहरण है](https://codepen.io/dissimulate/pen/KrAwx).
|
||||||
|
|
||||||
|
## छवि एसेट लोड और ड्रा करे
|
||||||
|
|
||||||
|
आप एक 'Image' ऑब्जेक्ट बनाकर एक छवि एसेट लोड करते हैं और इसकी `src` गुण सेट करते हैं.तब आप यह जानने के लिए `load` घटना सुनते हैं कि यह कब उपयोग होने के लिए तैयार है. कोड इस तरह दिखता है:
|
||||||
|
|
||||||
|
### लोड एसेट
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const img = new Image();
|
||||||
|
img.src = "path/to/my/image.png";
|
||||||
|
img.onload = () => {
|
||||||
|
// image loaded and ready to be used
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### लोड एसेट पैटर्न
|
||||||
|
|
||||||
|
इसे एक निर्माण में ऊपर से लपेटने की सिफारिश की गई है, इसलिए इसका उपयोग करना आसान है और आप इसे पूरी तरह से लोड होने पर केवल हेरफेर करने का प्रयास करते हैं:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function loadAsset(path) {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
const img = new Image();
|
||||||
|
img.src = path;
|
||||||
|
img.onload = () => {
|
||||||
|
// image loaded and ready to be used
|
||||||
|
resolve(img);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// use like so
|
||||||
|
|
||||||
|
async function run() {
|
||||||
|
const heroImg = await loadAsset("hero.png");
|
||||||
|
const monsterImg = await loadAsset("monster.png");
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
गेम एसेट्स को स्क्रीन पर खींचने के लिए, आपका कोड इस तरह दिखेगा:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
async function run() {
|
||||||
|
const heroImg = await loadAsset("hero.png");
|
||||||
|
const monsterImg = await loadAsset("monster.png");
|
||||||
|
|
||||||
|
canvas = document.getElementById("myCanvas");
|
||||||
|
ctx = canvas.getContext("2d");
|
||||||
|
ctx.drawImage(heroImg, canvas.width / 2, canvas.height / 2);
|
||||||
|
ctx.drawImage(monsterImg, 0, 0);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## अब अपने खेल का निर्माण शुरू करने का समय आ गया है
|
||||||
|
|
||||||
|
### क्या बनना है
|
||||||
|
|
||||||
|
आप कैनवास तत्व के साथ एक वेब पेज बनाएंगे। यह एक काली स्क्रीन `1024 * 768` को प्रस्तुत करना चाहिए। हमने आपको दो चित्र प्रदान किए हैं:
|
||||||
|
|
||||||
|
- हीरो शिप
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- 5\*5 मॉन्स्टर
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### विकास शुरू करने के लिए अनुशंसित कदम
|
||||||
|
|
||||||
|
उन फ़ाइलों का पता लगाएँ जो आपके लिए `your-work` सब फ़ोल्डर में बनाई गई हैं. इसमें निम्नलिखित शामिल होना चाहिए:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
-| assets
|
||||||
|
-| enemyShip.png
|
||||||
|
-| player.png
|
||||||
|
-| index.html
|
||||||
|
-| app.js
|
||||||
|
-| package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
विजुअल स्टूडियो कोड में इस फ़ोल्डर की कॉपी खोलें। आपके पास स्थानीय विकास पर्यावरण सेटअप होना चाहिए, अधिमानतः एनपीएम और नोड के साथ विजुअल स्टूडियो कोड स्थापित किया जाना चाहिए. यदि आपके पास अपने कंप्यूटर पर `npm` सेट नहीं है, तो [यहाँ है कि कैसे करें](https://www.npmjs.com/get-npm).
|
||||||
|
|
||||||
|
`Your_work` फ़ोल्डर में नेविगेट करके अपनी परियोजना शुरू करें:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd your-work
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
उपरोक्त पते पर एक HTTP सर्वर शुरू होगा `http: // localhost: 5000`। एक ब्राउज़र और उस पते पर इनपुट खोलें। यह अभी एक रिक्त पृष्ठ है, लेकिन यह बदल जाएगा
|
||||||
|
|
||||||
|
> नोट: अपनी स्क्रीन पर परिवर्तन देखने के लिए, अपने ब्राउज़र को ताज़ा करें.
|
||||||
|
|
||||||
|
### कोड जोड़ें
|
||||||
|
|
||||||
|
नीचे हल करने के लिए `your-work/app.js` के लिए आवश्यक कोड जोड़ें
|
||||||
|
|
||||||
|
1. काली पृष्ठभूमि के साथ एक कैनवास **ड्रा** करे
|
||||||
|
> टिप: `/app.js` में उपयुक्त TODO के तहत दो लाइनें जोड़ें,`ctx` तत्व को काला बनाने के लिए और शीर्ष/बाएँ निर्देशांक 0,0 पर हो और ऊँचाई और चौड़ाई कैनवास के बराबर हो।
|
||||||
|
2. **भार** बनावट
|
||||||
|
> टिप: `await loadTexture` का उपयोग करके खिलाड़ी और दुश्मन की छवियों को जोड़ें और छवि पथ में पास करें। आप उन्हें अभी तक स्क्रीन पर नहीं देखेंगे!
|
||||||
|
3. नीचे आधे में स्क्रीन के केंद्र में नायक **ड्रा** करे
|
||||||
|
> टिप: स्क्रीन पर HeroImg ड्रा करने के लिए `drawImage` API का उपयोग करें, `canvas.width / 2 - 45` और `canvas.height - canvas.height / 4)` की सेटिंग;
|
||||||
|
4. 5\*5 मॉन्स्टर **ड्रा** करे
|
||||||
|
|
||||||
|
> टिप: अब आप स्क्रीन पर दुश्मनों को आकर्षित करने के लिए कोड की टिप्पणी हटा सकते हैं। अगला, `createEnemy` फ़ंक्शन पर जाएं और इसे बनाएं.
|
||||||
|
|
||||||
|
सबसे पहले, कुछ स्थिरांक स्थापित करें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const MONSTER_TOTAL = 5;
|
||||||
|
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
|
||||||
|
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
|
||||||
|
const STOP_X = START_X + MONSTER_WIDTH;
|
||||||
|
```
|
||||||
|
|
||||||
|
फिर, स्क्रीन पर राक्षसों की सरणी खींचने के लिए एक लूप बनाएं:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
for (let x = START_X; x < STOP_X; x += 98) {
|
||||||
|
for (let y = 0; y < 50 * 5; y += 50) {
|
||||||
|
ctx.drawImage(enemyImg, x, y);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## परिणाम
|
||||||
|
|
||||||
|
समाप्त परिणाम ऐसा दिखना चाहिए:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## घोल
|
||||||
|
|
||||||
|
कृपया पहले इसे स्वयं हल करने का प्रयास करें, लेकिन यदि आप अटक जाते हैं, तो एक [समाधान] (../solution/app.js) पर एक नज़र डालें
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 चुनौती
|
||||||
|
|
||||||
|
आपने 2डी-केंद्रित कैनवस एपीआई के साथ ड्राइंग के बारे में सीखा है; [वेबगियल एपीआई](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) पर एक नज़र डालें, और एक 3D ऑब्जेक्ट खींचने का प्रयास करें.
|
||||||
|
|
||||||
|
## पोस्ट-व्याख्यान प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[पोस्ट-व्याख्यान प्रश्नोत्तरी](.github/post-lecture-quiz.hi.md)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
कैनवस एपीआई के बारे में अधिक जानकारी के लिए [इसके बारे में पढ़े](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[कैनवस एपीआई के साथ खेले](assignment.hi.md)
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# कैनवस एपीआई के साथ खेले
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
कैनवास एपीआई का एक तत्व चुनें और इसके चारों ओर कुछ दिलचस्प बनाएं. क्या आप बार-बार तारों की एक छोटी आकाशगंगा बना सकते हैं? क्या आप रंगीन लाइनों की एक दिलचस्प बनावट बना सकते हैं? आप प्रेरणा के लिए कोडपेन को देख सकते हैं (लेकिन कॉपी न करें)
|
||||||
|
|
||||||
|
## शीर्ष
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | ------------------------------------------------------------- | ----------------------------------------- | ----------------------------- |
|
||||||
|
| | एक दिलचस्प बनावट या आकार दिखाते हुए कोड प्रस्तुत किया जाता है | कोड सबमिट किया गया है, लेकिन नहीं चलता है | कोड प्रस्तुत नहीं किया गया है |
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके पाठ के बाद इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. आपको हमेशा स्क्रीन को फिर से तैयार करना होगा
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
2. गेम लूप क्या है?
|
||||||
|
|
||||||
|
- [ ] एक फ़ंक्शन जो खेल को सुनिश्चित करता है, उसे फिर से शुरू किया जा सकता है
|
||||||
|
- [ ] एक फ़ंक्शन जिसने यह तय किया कि खेल कितनी तेजी से चलना चाहिए
|
||||||
|
- [ ] एक फ़ंक्शन जो नियमित अंतराल पर लगाया जाता है और उपयोगकर्ता को जो कुछ भी देखना चाहिए वह खींचता है
|
||||||
|
|
||||||
|
3. स्क्रीन को फिर से तैयार करने का एक अच्छा मामला क्या है?
|
||||||
|
|
||||||
|
- [ ] एक उपयोगकर्ता सहभागिता हुई
|
||||||
|
- [ ] कुछ स्थानांतरित हो गया है
|
||||||
|
- [ ] समय निकलना
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
_खेल के विकास के बारे में एक वार्म अप प्रश्नोत्तरी_
|
||||||
|
|
||||||
|
इस क्विज को कक्षा में पूरा करें
|
||||||
|
|
||||||
|
1. स्क्रीन पर कोई भी ऑब्जेक्ट कीबोर्ड इवेंट प्राप्त कर सकता है
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
2. आप मुख्य घटनाओं और माउस घटनाओं को सुनने के लिए उसी विधि का उपयोग कर सकते हैं
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
3. चीजों को एक नियमित अंतराल पर होने के लिए, आप किस फ़ंक्शन का उपयोग करते हैं?
|
||||||
|
|
||||||
|
- [ ] setInterval()
|
||||||
|
- [ ] setTimeout()
|
||||||
|
- [ ] sleep()
|
||||||
@ -0,0 +1,387 @@
|
|||||||
|
# एक अंतरिक्ष खेल भाग 3 बनाएँ: गति जोड़ना
|
||||||
|
|
||||||
|
## प्री-लेक्चर क्विज
|
||||||
|
|
||||||
|
[प्री-लेक्चर क्विज](.github/pre-lecture-quiz.hi.md)
|
||||||
|
|
||||||
|
जब तक आप परदे पर चारों ओर एलियंस चल रहे हैं तब तक गेम्स बहुत मज़ेदार नहीं हैं! इस खेल में, हम दो प्रकार के आंदोलनों का उपयोग करेंगे:
|
||||||
|
|
||||||
|
- **Keyboard/Mouse movement**: जब उपयोगकर्ता स्क्रीन पर किसी ऑब्जेक्ट को स्थानांतरित करने के लिए कीबोर्ड या माउस के साथ इंटरैक्ट करता है.
|
||||||
|
- **Game induced movement**: जब खेल एक निश्चित समय अंतराल के साथ एक वस्तु को स्थानांतरित करता है.
|
||||||
|
|
||||||
|
तो हम चीजों को स्क्रीन पर कैसे स्थानांतरित करते हैं? यह सब कार्तीय निर्देशांक के बारे में है:हम ऑब्जेक्ट का स्थान (x, y) बदलते हैं और फिर स्क्रीन को फिर से खोलते हैं।
|
||||||
|
|
||||||
|
आमतौर पर आपको स्क्रीन पर _गति_ को पूरा करने के लिए निम्न चरणों की आवश्यकता होती है:
|
||||||
|
|
||||||
|
1. एक वस्तु के लिए **एक नया स्थान निर्धारित करें**; यह वस्तु को स्थानांतरित करने के रूप में अनुभव करने के लिए आवश्यक है.
|
||||||
|
2. **स्क्रीन को साफ़ करें**, ड्रॉ के बीच स्क्रीन को साफ़ करना होगा. We can clear it by drawing a rectangle that we fill with a background color.
|
||||||
|
3. नए स्थान पर **Redraw ऑब्जेक्ट**। ऐसा करने से हम अंत में वस्तु को एक स्थान से दूसरे स्थान तक ले जाते हैं.
|
||||||
|
|
||||||
|
यहाँ यह कोड में कैसा दिख सकता है:
|
||||||
|
|
||||||
|
```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);
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ क्या आप एक कारण के बारे में सोच सकते हैं कि अपने नायक को प्रति सेकंड कई फ़्रेमों को फिर से तैयार करने से प्रदर्शन की लागत बढ़ सकती है? [इस पैटर्न के विकल्प](https://www.html5rocks.com/en/tutorials/canvas/performance/) के बारे में पढ़ें.
|
||||||
|
|
||||||
|
## कीबोर्ड घटनाओं को संभालें
|
||||||
|
|
||||||
|
आप विशिष्ट घटनाओं को कोड में संलग्न करके घटनाओं को संभालते हैं. कीबोर्ड की घटनाओं को पूरी विंडो पर ट्रिगर किया जाता है जबकि एक `click` जैसे माउस इवेंट को एक विशिष्ट तत्व को क्लिक करने के लिए जोड़ा जा सकता है. हम इस पूरे प्रोजेक्ट में कीबोर्ड इवेंट का उपयोग करेंगे.
|
||||||
|
|
||||||
|
एक घटना को संभालने के लिए आपको विंडो के `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` से मेल खाती है.
|
||||||
|
|
||||||
|
✅ की इवेंट हेरफेर खेल के विकास के बाहर उपयोगी है। इस तकनीक के लिए आप और क्या उपयोग कर सकते हैं?
|
||||||
|
|
||||||
|
### विशेष कुंजी: एक चेतावनी
|
||||||
|
|
||||||
|
कुछ _special_ किइस हैं जो विंडोज को प्रभावित करती हैं. इसका मतलब है कि यदि आप एक `keyup` घटना सुन रहे हैं और आप अपने नायक को स्थानांतरित करने के लिए इन विशेष किइस का उपयोग करते हैं तो यह क्षैतिज स्क्रॉलिंग भी करेगा.इस कारण से आप अपने गेम को बनाते समय इस बिल्ट-इन ब्राउज़र व्यवहार को बंद कर सकते हैं। आपको इस तरह कोड की आवश्यकता है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let 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 ()` कहते हैं.
|
||||||
|
|
||||||
|
## खेल प्रेरित चाल
|
||||||
|
|
||||||
|
हम टाइम सेट का उपयोग करके चीजों को खुद से आगे बढ़ा सकते हैं जैसे `setTimeout()` या `setInterval()` फ़ंक्शन जो प्रत्येक टिक पर वस्तु के स्थान को अपडेट करते हैं, या समय अंतराल।. यहां ऐसा है जो दिख सकता है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let id = setInterval(() => {
|
||||||
|
//move the enemy on the y axis
|
||||||
|
enemy.y += 10;
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## गेम लूप
|
||||||
|
|
||||||
|
गेम लूप एक अवधारणा है जो अनिवार्य रूप से एक फ़ंक्शन है जिसे नियमित अंतराल पर लागू किया जाता है. इसे गेम लूप कहा जाता है क्योंकि उपयोगकर्ता को दिखाई देने वाली सभी चीज़ों को लूप में खींचा जाना चाहिए. गेम लूप उन सभी गेम ऑब्जेक्ट्स का उपयोग करता है जो गेम का हिस्सा हैं, उन सभी को ड्रॉ करना जब तक कि किसी कारण से गेम का हिस्सा नहीं होना चाहिए. उदाहरण के लिए यदि कोई वस्तु एक शत्रु है जो लेजर से टकराती है और उड़ती है, तो यह वर्तमान गेम लूप का हिस्सा नहीं है (बाद के पाठों में आप इस पर और अधिक सीखेंगे).
|
||||||
|
|
||||||
|
यहाँ एक गेम लूप आमतौर पर कैसा दिख सकता है, कोड में व्यक्त किया गया है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let 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();
|
||||||
|
},
|
||||||
|
200
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
उपरोक्त लूप को कैनवास को फिर से बनाने के लिए प्रत्येक `200` मिलीसेकेंड पर लगाया जाता है. आपके पास सबसे अच्छा अंतराल चुनने की क्षमता है जो आपके खेल के लिए समझ में आता है.
|
||||||
|
|
||||||
|
## अंतरिक्ष खेल को जारी रखना
|
||||||
|
|
||||||
|
आप मौजूदा कोड लेंगे और उसे विस्तारित करेंगे। या तो उस कोड से शुरू करें जो आपने भाग I के दौरान पूरा किया था या [भाग II- स्टार्टर](../your-work) में कोड का उपयोग करें.
|
||||||
|
|
||||||
|
- **Moving the hero**: आप यह सुनिश्चित करने के लिए कोड जोड़ेंगे कि आप तीर किइस का उपयोग करके नायक को स्थानांतरित कर सकते हैं.
|
||||||
|
- **Move enemies**: दुश्मनों को किसी दिए गए दर पर ऊपर से नीचे ले जाने के लिए आपको कोड जोड़ने की भी आवश्यकता होगी.
|
||||||
|
|
||||||
|
## अनुशंसित कदम
|
||||||
|
|
||||||
|
उन फ़ाइलों का पता लगाएँ जो आपके लिए `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`. एक ब्राउज़र खोलें और उस पते को इनपुट करें, अभी उसे नायक और सभी दुश्मनों को प्रस्तुत करना चाहिए; कुछ भी नहीं चल रहा है - फिर भी!
|
||||||
|
|
||||||
|
### कोड जोड़ें
|
||||||
|
|
||||||
|
1. `हीरो` और `दुश्मन` और `गेम ऑब्जेक्ट` के लिए **समर्पित ऑब्जेक्ट्स जोड़ें**, उनके पास` x` और `y` गुण होने चाहिए ([इन्हेरिटेंस या कम्पोजीशन](../../README.md) पर भाग याद रखें ).
|
||||||
|
|
||||||
|
_संकेत_ `गेम ऑब्जेक्ट` `x` और `y` के साथ एक होना चाहिए और एक कैनवास पर खुद को आकर्षित करने की क्षमता होनी चाहिए
|
||||||
|
|
||||||
|
> टिप: नीचे के रूप में देलिनेटेड कंस्ट्रक्टर के साथ एक नया ग़मओब्जेक्ट वर्ग जोड़कर शुरू करें, और फिर इसे कैनवास पर ड्रा करें:
|
||||||
|
|
||||||
|
```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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
अब, इस गेमओब्जेक्ट को हीरो और दुश्मन बनाने के लिए विस्तारित करें.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
class Hero extends GameObject {
|
||||||
|
constructor(x, y) {
|
||||||
|
...it needs an x, y, type, and speed
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
class Enemy extends GameObject {
|
||||||
|
constructor(x, y) {
|
||||||
|
super(x, y);
|
||||||
|
(this.width = 98), (this.height = 50);
|
||||||
|
this.type = "Enemy";
|
||||||
|
let id = setInterval(() => {
|
||||||
|
if (this.y < canvas.height - this.height) {
|
||||||
|
this.y += 5;
|
||||||
|
} else {
|
||||||
|
console.log("Stopped at", this.y);
|
||||||
|
clearInterval(id);
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **की ईवेंट हैंडलर जोड़ें** की नेविगेशन को संभालने के लिए (बाएं / दाएं हीरो ऊपर ले जाएं)
|
||||||
|
|
||||||
|
_REMEMBER_ यह कार्टेशियन सिस्टम है, टॉप-लेफ्ट `0,0` है. यह भी याद रखें कि _डिफ़ॉल्ट व्यवहार_ को रोकने के लिए कोड जोड़ना
|
||||||
|
|
||||||
|
> टिप: अपने onKeyDown फ़ंक्शन को बनाएं और इसे विंडो में अटैच करें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let onKeyDown = function (e) {
|
||||||
|
console.log(e.keyCode);
|
||||||
|
...add the code from the lesson above to stop default behavior
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener("keydown", onKeyDown);
|
||||||
|
```
|
||||||
|
|
||||||
|
इस बिंदु पर अपने ब्राउज़र कंसोल की जाँच करें, और लॉग किए जा रहे कीस्ट्रोक्स को देखें.
|
||||||
|
|
||||||
|
3. \*\* लागू करें [[पब उप पैटर्न](../../ 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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
2. संदेशों को प्रकाशित करने और सदस्यता लेने के लिए **एक EventEmitter वर्ग बनाएं**:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
class EventEmitter {
|
||||||
|
constructor() {
|
||||||
|
this.listeners = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
on(message, listener) {
|
||||||
|
if (!this.listeners[message]) {
|
||||||
|
this.listeners[message] = [];
|
||||||
|
}
|
||||||
|
this.listeners[message].push(listener);
|
||||||
|
}
|
||||||
|
|
||||||
|
emit(message, payload = null) {
|
||||||
|
if (this.listeners[message]) {
|
||||||
|
this.listeners[message].forEach((l) => l(message, payload));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **स्थिरांक जोड़ें** और EventEmitter सेट करें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const Messages = {
|
||||||
|
KEY_EVENT_UP: "KEY_EVENT_UP",
|
||||||
|
KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
|
||||||
|
KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
|
||||||
|
KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
|
||||||
|
};
|
||||||
|
|
||||||
|
let heroImg,
|
||||||
|
enemyImg,
|
||||||
|
laserImg,
|
||||||
|
canvas,
|
||||||
|
ctx,
|
||||||
|
gameObjects = [],
|
||||||
|
hero,
|
||||||
|
eventEmitter = new EventEmitter();
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **खेल को प्रारंभ करें**
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function initGame() {
|
||||||
|
gameObjects = [];
|
||||||
|
createEnemies();
|
||||||
|
createHero();
|
||||||
|
|
||||||
|
eventEmitter.on(Messages.KEY_EVENT_UP, () => {
|
||||||
|
hero.y -= 5;
|
||||||
|
});
|
||||||
|
|
||||||
|
eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
|
||||||
|
hero.y += 5;
|
||||||
|
});
|
||||||
|
|
||||||
|
eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
|
||||||
|
hero.x -= 5;
|
||||||
|
});
|
||||||
|
|
||||||
|
eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
|
||||||
|
hero.x += 5;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **गेम लूप सेट करें**
|
||||||
|
|
||||||
|
गेम को प्रारंभ करने के लिए window.onload फ़ंक्शन को रिफ्लेक्टर करें और एक अच्छे अंतराल पर गेम लूप सेट करें। आप एक लेजर बीम भी जोड़ जोड़ सकते है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
window.onload = async () => {
|
||||||
|
canvas = document.getElementById("canvas");
|
||||||
|
ctx = canvas.getContext("2d");
|
||||||
|
heroImg = await loadTexture("assets/player.png");
|
||||||
|
enemyImg = await loadTexture("assets/enemyShip.png");
|
||||||
|
laserImg = await loadTexture("assets/laserRed.png");
|
||||||
|
|
||||||
|
initGame();
|
||||||
|
let gameLoopId = setInterval(() => {
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
drawGameObjects(ctx);
|
||||||
|
}, 100);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
5. एक निश्चित अंतराल पर दुश्मनों को स्थानांतरित करने के लिए **कोड जोड़ें**
|
||||||
|
|
||||||
|
शत्रुओं को बनाने और उन्हें नए गेमऑब्जेक्ट्स क्लास में धकेलने के लिए `createEnemies()` फ़ंक्शन को रिफलेक्टर करें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function createEnemies() {
|
||||||
|
const MONSTER_TOTAL = 5;
|
||||||
|
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
|
||||||
|
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
|
||||||
|
const STOP_X = START_X + MONSTER_WIDTH;
|
||||||
|
|
||||||
|
for (let x = START_X; x < STOP_X; x += 98) {
|
||||||
|
for (let y = 0; y < 50 * 5; y += 50) {
|
||||||
|
const enemy = new Enemy(x, y);
|
||||||
|
enemy.img = enemyImg;
|
||||||
|
gameObjects.push(enemy);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
और हीरो के लिए एक समान प्रक्रिया करने के लिए एक `createHero()` फ़ंक्शन जोड़ें.
|
||||||
|
|
||||||
|
```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/post-lecture-quiz.hi.md)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
जब हम फ्रेमवर्क का उपयोग किए बिना अपना गेम लिख रहे हैं, तो गेम के विकास के लिए कई जावास्क्रिप्ट-आधारित कैनवास फ्रेमवर्क हैं. कुछ करने के लिए कुछ समय ले लो [इन के बारे में पढ़ना](https://github.com/collections/javascript-game-engines).
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[अपना कोड कमेंट करें](assignment.hi.md)
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# अपना कोड कमेंट करें
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
अपने गेम फ़ोल्डर में अपने वर्तमान /app.js फ़ाइल पर जाएं, और इसे टिप्पणी करने और इसे साफ करने के तरीके खोजें. कोड को नियंत्रण से बाहर करना बहुत आसान है, और अब यह सुनिश्चित करने के लिए टिप्पणियां जोड़ने का एक अच्छा मौका है कि आपके पास पठनीय कोड है ताकि आप इसे बाद में उपयोग कर सकें.
|
||||||
|
|
||||||
|
## शीर्ष
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | -------------------------------------------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------- |
|
||||||
|
| | `app.js` कोड पूरी तरह से टिप्पणी की है और तार्किक ब्लॉकों में व्यवस्थित है | `app.js` कोड पर्याप्त रूप से टिप्पणी की है | `app.js` कोड कुछ हद तक अव्यवस्थित है और अच्छी टिप्पणियों का अभाव है |
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके पाठ के बाद इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. टकराव का पता लगाने में आप दो
|
||||||
|
|
||||||
|
- [ ] वृत्तों की तुलना करते हैं की वे प्रतिच्छेद करते है
|
||||||
|
- [ ] आयतें और चाहे वे अंतरंग हों
|
||||||
|
- [ ] दो बिंदुओं के बीच की दूरी
|
||||||
|
|
||||||
|
2. एक cooldown प्रभाव को लागू करने का कारण है की
|
||||||
|
|
||||||
|
- [ ] खेल को कठिन बनाते हुए आप दुश्मनों को नष्ट करने के लिए बार-बार लेजर फायर नहीं कर सकते
|
||||||
|
- [ ] जावास्क्रिप्ट केवल समय इकाई के अनुसार कुछ निश्चित घटनाओं का उत्पादन कर सकती है, इसलिए आपको उन्हें सीमित करने की आवश्यकता है
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
_खेल के विकास के बारे में एक वार्म अप प्रश्नोत्तरी_
|
||||||
|
|
||||||
|
इस क्विज को कक्षा में पूरा करें
|
||||||
|
|
||||||
|
1. टकराव का पता लगाना है कि कैसे दो चीजें टकराई हैं.
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
2. हम स्क्रीन से किसी आइटम को कैसे निकाल सकते हैं?
|
||||||
|
|
||||||
|
- [ ] गार्बेज कलेक्टर को बुलाओ
|
||||||
|
- [ ] इसे मृत के रूप में चिह्नित करें, केवल जो _मृत नहीं_ है उन वस्तुओं को पेंट करें अगली बार जब हम स्क्रीन खींचते हैं
|
||||||
|
- [ ] आइटम को एक नकारात्मक समन्वय पर रखें
|
||||||
@ -0,0 +1,305 @@
|
|||||||
|
# एक अंतरिक्ष खेल भाग 4 बनाएँ: एक लेजर और टकराव का पता लगाए
|
||||||
|
|
||||||
|
## लेक्चरसे पहलेकी क्विज
|
||||||
|
|
||||||
|
[लेक्चरसे पहलेकी क्विज](.github/pre-lecture-quiz.hi.md)
|
||||||
|
|
||||||
|
इस पाठ में आप सीखेंगे कि जावास्क्रिप्ट के साथ लेज़रों को कैसे शूट किया जाए! हम अपने खेल में दो चीजें जोड़ेंगे:
|
||||||
|
|
||||||
|
- **A laser**: इस लेज़र को आपके नायकों के जहाज से और ऊपर की ओर सीधा खड़ा किया गया है
|
||||||
|
- **Collision detection**, _शूट_ करने की क्षमता को लागू करने के हिस्से के रूप में हम कुछ अच्छे गेम नियम भी जोड़ेंगे:
|
||||||
|
- **Laser hits enemy**: लेजर से मारने पर दुश्मन की मौत हो जाती है
|
||||||
|
- **Laser hits top screen**: एक लेजर यदि स्क्रीन के शीर्ष भाग से टकराने के नष्ट हो जाता है
|
||||||
|
- **Enemy and hero collision**:एक दुश्मन और नायक नष्ट होजाता है अगर एक दूसरे को मारते हैं
|
||||||
|
- **Enemy hits bottom of the screen**: एक दुश्मन और एक नायक को नष्ट कर दिया जाता है अगर दुश्मन स्क्रीन के नीचे हिट करता है
|
||||||
|
|
||||||
|
संक्षेप में, आप - _ नायक _ - इससे पहले कि वे स्क्रीन के निचले भाग में जाने का प्रबंधन करें, सभी दुश्मनों को एक लेजर के साथ हिट करने की आवश्यकता है.
|
||||||
|
|
||||||
|
✅ कभी लिखे गए पहले कंप्यूटर गेम पर थोड़ा शोध करें। इसकी कार्यक्षमता क्या थी?
|
||||||
|
|
||||||
|
चलो एक साथ वीर बने !
|
||||||
|
|
||||||
|
## टक्कर की पहचान
|
||||||
|
|
||||||
|
हम टकराव का पता कैसे लगाते हैं? हमें अपने खेल की वस्तुओं के बारे में सोचने की जरूरत है क्योंकि आयतें चलती हैं. आप ऐसा क्यों पूछ सकते हैं? खैर, किसी गेम ऑब्जेक्ट को खींचने के लिए उपयोग की जाने वाली छवि एक आयत है: इसमें एक `x`,` y`, `चौड़ाई` और `ऊँचाई` है।.
|
||||||
|
|
||||||
|
यदि दो आयतें, अर्थात् एक नायक और शत्रु प्रतिच्छेद करते हैं, तो आपकी टक्कर होती है.
|
||||||
|
तब क्या होना चाहिए यह खेल के नियमों पर निर्भर है. टक्कर का पता लगाने को लागू करने के लिए आपको निम्न की आवश्यकता है:
|
||||||
|
|
||||||
|
1. एक खेल वस्तु का एक आयत प्रतिनिधित्व पाने का एक तरीका, कुछ इस तरह:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
rectFromGameObject() {
|
||||||
|
return {
|
||||||
|
top: this.y,
|
||||||
|
left: this.x,
|
||||||
|
bottom: this.y + this.height,
|
||||||
|
right: this.x + this.width
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
2. एक तुलनात्मक फ़ंक्शन, यह फ़ंक्शन इस तरह दिख सकता है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function intersectRect(r1, r2) {
|
||||||
|
return !(
|
||||||
|
r2.left > r1.right ||
|
||||||
|
r2.right < r1.left ||
|
||||||
|
r2.top > r1.bottom ||
|
||||||
|
r2.bottom < r1.top
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## हम चीजों को कैसे नष्ट करते हैं
|
||||||
|
|
||||||
|
एक खेल में चीजों को नष्ट करने के लिए आपको इस खेल को जानने देना चाहिए कि यह गेम लूप में इस आइटम को पेंट नहीं करना चाहिए जो एक निश्चित अंतराल पर ट्रिगर होता है. ऐसा करने का एक तरीका यह है कि गेम ऑब्जेक्ट को _मृत_ के रूप में चिह्नित किया जाए जब कुछ ऐसा होता है, जैसे:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// collision happened
|
||||||
|
enemy.dead = true;
|
||||||
|
```
|
||||||
|
|
||||||
|
फिर आप स्क्रीन को फिर से खोलने से पहले _ मृत _ वस्तुओं को छाँटने के लिए आगे बढ़ सकते हैं, जैसे कि:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
gameObjects = gameObject.filter((go) => !go.dead);
|
||||||
|
```
|
||||||
|
|
||||||
|
## हम एक लेजर को कैसे फायर करते हैं
|
||||||
|
|
||||||
|
लेजर को फायर करना एक महत्वपूर्ण घटना का जवाब देने और एक निश्चित दिशा में जाने वाली वस्तु बनाने के लिए अनुवाद करता है. इसलिए हमें निम्नलिखित चरणों को पूरा करने की आवश्यकता है:
|
||||||
|
|
||||||
|
1. **एक लेज़र ऑब्जेक्ट बनाएँ**: हमारे नायक के जहाज के ऊपर से, कि सृजन स्क्रीन के ऊपर की ओर बढ़ने लगता है.
|
||||||
|
2. **एक महत्वपूर्ण घटना के लिए कोड संलग्न करें**: हमें कीबोर्ड पर एक की चुनने की आवश्यकता है जो लेजर की शूटिंग करने वाले खिलाड़ी का प्रतिनिधित्व करता है.
|
||||||
|
3. **एक गेम ऑब्जेक्ट बनाएं जो लेजर की तरह दिखता है**:जब की दबाया जाता है.
|
||||||
|
|
||||||
|
## हमारे लेजर पर शांत हो जाओ
|
||||||
|
|
||||||
|
उदाहरण के लिए, हर बार जब आप एक की दबाते हैं, तो लेज़र को फायर करना पड़ता है. खेल को कम समय में कई लेज़रों के उत्पादन को रोकने के लिए हमें इसे ठीक करने की आवश्यकता है.
|
||||||
|
फिक्स एक तथाकथित _कुलदावन_ को लागू करके है, एक टाइमर, जो यह सुनिश्चित करता है कि एक लेजर को केवल इतनी बार निकाल दिया जा सकता है। आप इसे निम्नलिखित तरीके से लागू कर सकते हैं
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
class Cooldown {
|
||||||
|
constructor(time) {
|
||||||
|
this.cool = false;
|
||||||
|
setTimeout(() => {
|
||||||
|
this.cool = true;
|
||||||
|
}, time)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Weapon {
|
||||||
|
constructor {
|
||||||
|
}
|
||||||
|
fire() {
|
||||||
|
if (!this.cooldown || this.cooldown.cool) {
|
||||||
|
// produce a laser
|
||||||
|
this.cooldown = new Cooldown(500);
|
||||||
|
} else {
|
||||||
|
// do nothing - it hasn't cooled down yet.
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ अपने आप को _कूलदावन_ की याद दिलाने के लिए अंतरिक्ष खेल श्रृंखला में सबक 1 का संदर्भ लें.
|
||||||
|
|
||||||
|
## क्या बनना है
|
||||||
|
|
||||||
|
आप पिछले पाठ से मौजूदा कोड (जिसे आपको साफ करना चाहिए और रिफलेक्ट करना चाहिए था) ले लेंगे, और इसे विस्तारित करेंगे। या तो भाग II के कोड से शुरू करें या [Part III-Starter](/your-work) में कोड का उपयोग करें.
|
||||||
|
|
||||||
|
> टिप: वह लेजर जिसके साथ आप काम करेंगे, वह पहले से ही आपके असेट्स फ़ोल्डर में है और आपके कोड द्वारा संदर्भित है
|
||||||
|
|
||||||
|
- **टक्कर की पहचान जोड़े**, जब एक लेजर कुछ के साथ टकराता है तो निम्नलिखित नियम लागू होने चाहिए:
|
||||||
|
1. **लेजर दुश्मन को मारता है**: लेजर से मारने पर दुश्मन मर जाता है
|
||||||
|
2. **लेजर शीर्ष स्क्रीन को मारता है**: यदि हमारी स्क्रीन का शीर्ष भाग हिट हो जाता है तो एक लेजर नष्ट हो जाता है
|
||||||
|
3. **दुश्मन और हीरो की टक्कर**: एक दूसरे को मारने पर एक दुश्मन और नायक नष्ट हो जाता है
|
||||||
|
4. **स्क्रीन के नीचे दुश्मन मारा**: एक दुश्मन और एक नायक नष्ट हो जाता है अगर दुश्मन स्क्रीन के नीचे मारता है
|
||||||
|
|
||||||
|
## अनुशंसित कदम
|
||||||
|
|
||||||
|
उन फ़ाइलों का पता लगाएँ जो आपके लिए `your-work` सब फ़ोल्डर में बनाई गई हैं। इसमें निम्नलिखित शामिल होना चाहिए:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
-| assets
|
||||||
|
-| enemyShip.png
|
||||||
|
-| player.png
|
||||||
|
-| laserRed.png
|
||||||
|
-| index.html
|
||||||
|
-| app.js
|
||||||
|
-| package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
आप टाइप करके अपना प्रोजेक्ट `your_work` फ़ोल्डर शुरू करें:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd your-work
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
उपरोक्त पते पर एक HTTP सर्वर शुरू होगा `http: // localhost: 5000`। एक ब्राउज़र खोले और उस पते को डाले, अभी उसे नायक और सभी दुश्मनों को सौंप देना चाहिए, कुछ भी नहीं चल रहा है - अभी तक :).
|
||||||
|
|
||||||
|
### कोड डाले
|
||||||
|
|
||||||
|
1. **टकराव को संभालने के लिए अपने गेम ऑब्जेक्ट के आयत प्रतिनिधित्व को सेट करें** नीचे दिए गए कोड से आप 'GameObject` का आयत प्रतिनिधित्व प्राप्त कर सकते हैं। इसे बढ़ाने के लिए अपने गेमऑब्जेक्ट क्लास को संपादित करें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
rectFromGameObject() {
|
||||||
|
return {
|
||||||
|
top: this.y,
|
||||||
|
left: this.x,
|
||||||
|
bottom: this.y + this.height,
|
||||||
|
right: this.x + this.width,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **कोड जोड़ें जो टकराव की जाँच करता है** यह एक नया कार्य होगा जो परीक्षण करता है कि क्या दो आयतें प्रतिच्छेद करती हैं::
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function intersectRect(r1, r2) {
|
||||||
|
return !(
|
||||||
|
r2.left > r1.right ||
|
||||||
|
r2.right < r1.left ||
|
||||||
|
r2.top > r1.bottom ||
|
||||||
|
r2.bottom < r1.top
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **लेजर फायरिंग क्षमता जोड़ें**
|
||||||
|
|
||||||
|
1. **की-ईवेंट संदेश जोड़ें**. _ स्पेस _ की को हीरो शिप के ठीक ऊपर एक लेजर बनाना चाहिए। संदेश ऑब्जेक्ट में तीन स्थिरांक जोड़ें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
|
||||||
|
COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
|
||||||
|
COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **अंतरिक्ष की संभालें**. रिक्त स्थान को संभालने के लिए `window.addEventListener` कीअप फंक्शन संपादित करें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
} else if(evt.keyCode === 32) {
|
||||||
|
eventEmitter.emit(Messages.KEY_EVENT_SPACE);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **श्रोताओं को जोड़ें**.`InitGame()` फ़ंक्शन को संपादित करे यह सुनिश्चित करने के लिए कि स्पेस बार हिट होने पर हीरो फायर कर सकता है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
|
||||||
|
if (hero.canFire()) {
|
||||||
|
hero.fire();
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
और एक नया `eventEmitter.on()` समारोह जोड़ने के लिए व्यवहार सुनिश्चित करने के लिए जब एक दुश्मन एक लेजर के साथ टकराता है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
eventEmitter.on(
|
||||||
|
Messages.COLLISION_ENEMY_LASER,
|
||||||
|
(_, { first, second }) => {
|
||||||
|
first.dead = true;
|
||||||
|
second.dead = true;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **बस्तु चाल**, धीरे-धीरे स्क्रीन के शीर्ष पर लेजर चाल सुनिश्चित करें। आप एक नया लेजर वर्ग बनाएंगे जो `GameObject` का विस्तार करता है, जैसा कि आपने पहले किया है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
class Laser extends GameObject {
|
||||||
|
constructor(x, y) {
|
||||||
|
super(x, y);
|
||||||
|
(this.width = 9), (this.height = 33);
|
||||||
|
this.type = "Laser";
|
||||||
|
this.img = laserImg;
|
||||||
|
let id = setInterval(() => {
|
||||||
|
if (this.y > 0) {
|
||||||
|
this.y -= 15;
|
||||||
|
} else {
|
||||||
|
this.dead = true;
|
||||||
|
clearInterval(id);
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **तकराब संभालना**,लेजर के लिए टकराव के नियमों को लागू करें। एक `updateGameObjects()` फ़ंक्शन जोड़ें जो हिट के लिए वस्तुओं को टकराने का परीक्षण करता है
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function updateGameObjects() {
|
||||||
|
const enemies = gameObjects.filter((go) => go.type === "Enemy");
|
||||||
|
const lasers = gameObjects.filter((go) => go.type === "Laser");
|
||||||
|
// laser hit something
|
||||||
|
lasers.forEach((l) => {
|
||||||
|
enemies.forEach((m) => {
|
||||||
|
if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
|
||||||
|
eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
|
||||||
|
first: l,
|
||||||
|
second: m,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
gameObjects = gameObjects.filter((go) => !go.dead);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
`Window.onload` में अपने गेम लूप में`updateGameObjects()`जोड़ना सुनिश्चित करें.
|
||||||
|
|
||||||
|
1. लेजर पर **कुलदावन लागू** करें, इसलिए यह बार बार थोक सकता है.
|
||||||
|
|
||||||
|
अंत में, हीरो वर्ग को संपादित करें ताकि यह कुलडाउन हो सके:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
class Hero extends GameObject {
|
||||||
|
constructor(x, y) {
|
||||||
|
super(x, y);
|
||||||
|
(this.width = 99), (this.height = 75);
|
||||||
|
this.type = "Hero";
|
||||||
|
this.speed = { x: 0, y: 0 };
|
||||||
|
this.cooldown = 0;
|
||||||
|
}
|
||||||
|
fire() {
|
||||||
|
gameObjects.push(new Laser(this.x + 45, this.y - 10));
|
||||||
|
this.cooldown = 500;
|
||||||
|
|
||||||
|
let id = setInterval(() => {
|
||||||
|
if (this.cooldown > 0) {
|
||||||
|
this.cooldown -= 100;
|
||||||
|
} else {
|
||||||
|
clearInterval(id);
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
canFire() {
|
||||||
|
return this.cooldown === 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
इस बिंदु पर, आपके गेम में कुछ कार्यक्षमता है! आप अपने तीर की के साथ नेविगेट कर सकते हैं, अपने स्पेस बार के साथ एक लेजर फायर कर सकते हैं, और जब आप उन्हें मारते हैं तो दुश्मन गायब हो जाते हैं। बहुत बढ़िया!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 चुनौती
|
||||||
|
|
||||||
|
एक विस्फोट जोड़ें! [स्पेस आर्ट रेपो](../solution/spaceArt/readme.txt) में खेल की परिसंपत्तियों पर एक नज़र डालें और जब कोई एलियन टकराता है तो विस्फोट को जोड़ने का प्रयास करें
|
||||||
|
|
||||||
|
## पोस्ट-व्याख्यान प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[पोस्ट-व्याख्यान प्रश्नोत्तरी](.github/post-lecture-quiz.hi.md)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
इस प्रकार अपने खेल में अंतराल के साथ प्रयोग करें. जब आप उन्हें बदलते हैं तो क्या होता है? [जावास्क्रिप्ट समय घटनाओं](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/) के बारे में और पढ़ें.
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[टक्करों का अन्वेषण करें](assignment.hi.md)
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# टकरावों का अन्वेषण करें
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
## शीर्ष
|
||||||
|
|
||||||
|
बेहतर ढंग से समझने के लिए कि टकराव कैसे काम करता है, कुछ वस्तुओं के साथ बहुत छोटे खेल का निर्माण करें जो टकराते हैं. उन्हें कीप्रेसेस या माउस क्लिक के माध्यम से ले जाएँ, और यह हिट होने पर आइटम में से किसी एक के साथ कुछ करें . यह कुछ ऐसा हो सकता है जैसे उल्का पिंड पृथ्वी से टकराता है, या बम्पर-कार। रचनात्मक बनो!
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | --------------------------------------------------------------------------------------------------------------- | ------------------------ | -------------- |
|
||||||
|
| | पूरा वर्किंग कोड सैंपल उत्पादित होता है, जिसमें कैनवस को खींची गई चीजें, बेसिक टक्कर, और प्रतिक्रियाएँ होती हैं | कोड किसी तरह से अधूरा है | कोड की खराबी |
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके पाठ के बाद इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. यह दिखाने का एक मजेदार तरीका है कि एक खिलाड़ी ने कितने जीवन जीते हैं
|
||||||
|
|
||||||
|
- [ ] जहाजों की एक संख्या
|
||||||
|
- [ ] एक दशमलव संख्या
|
||||||
|
|
||||||
|
2. कैनवस तत्व का उपयोग करके आप स्क्रीन के बीच में टेक्स्ट को कैसे केन्द्रित करते हैं
|
||||||
|
|
||||||
|
- [ ] आप फ्लेक्सबॉक्स का उपयोग करें
|
||||||
|
- [ ] आप पाठ को निर्देश देते हैं: क्लाइंट विंडो की चौड़ाई/2: के x समन्वय पर तैयार किया जाए
|
||||||
|
- [ ] आप संदर्भ ऑब्जेक्ट पर `textAlign` गुण मान `center` पर सेट करें.
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
_खेल के विकास के बारे में एक वार्म अप प्रश्नोत्तरी_
|
||||||
|
|
||||||
|
इस क्विज को कक्षा में पूरा करें
|
||||||
|
|
||||||
|
1. कैनवस तत्व का उपयोग करके आप स्क्रीन पर टेक्स्ट कैसे बनाते हैं?
|
||||||
|
|
||||||
|
- [ ] पाठ को डिभ या स्पैन तत्व के अंदर रखें
|
||||||
|
- [ ] कैनवास तत्व पर drawText() को कॉल करें
|
||||||
|
- [ ] कैनवास तत्व पर fillText() को कॉल करें
|
||||||
|
|
||||||
|
2. आप एक खेल में _जीवन_ की अवधारणा क्यों है?
|
||||||
|
|
||||||
|
- [ ] यह दिखाने के लिए कि आप कितना नुकसान उठा सकते हैं.
|
||||||
|
- [ ] ताकि खेल सीधे खत्म न हो, लेकिन खेल खत्म होने से पहले आपके पास कई मौके हैं.
|
||||||
@ -0,0 +1,189 @@
|
|||||||
|
# एक अंतरिक्ष खेल बनाएँ भाग ५: स्कोरिंग और जीवन
|
||||||
|
|
||||||
|
## लेक्टरसे पहलेकी क्विज़
|
||||||
|
|
||||||
|
[लेक्टरसे पहलेकी क्विज़](.github/pre-lecture-quiz.hi.md)
|
||||||
|
|
||||||
|
इस पाठ में, आप सीखेंगे कि किसी खेल में स्कोरिंग कैसे जोड़ें और जीवन की गणना करें.
|
||||||
|
|
||||||
|
## स्क्रीन पर टेक्स्ट ड्रा करें
|
||||||
|
|
||||||
|
स्क्रीन पर गेम स्कोर प्रदर्शित करने में सक्षम होने के लिए, आपको यह जानना होगा कि स्क्रीन पर टेक्स्ट कैसे रखा जाए. उत्तर कैनवास ऑब्जेक्ट पर `fillText()` विधि का उपयोग कर रहा है। आप अन्य पहलुओं को भी नियंत्रित कर सकते हैं जैसे कि किस फ़ॉन्ट का उपयोग करना है, पाठ का रंग और यहां तक कि इसके संरेखण (बाएं, दाएं, केंद्र)। नीचे कुछ कोड है जो स्क्रीन पर कुछ टेक्स्ट खींच रहा है.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
ctx.font = "30px Arial";
|
||||||
|
ctx.fillStyle = "red";
|
||||||
|
ctx.textAlign = "right";
|
||||||
|
ctx.fillText("show this on the screen", 0, 0);
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ [एक कैनवास में पाठ कैसे जोड़ें](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text) इसके बारे में और पढ़ें और बेझिझक अपने को आकर्षक बनाने के लिए!
|
||||||
|
|
||||||
|
## जीवन, एक खेल अवधारणा के रूप में
|
||||||
|
|
||||||
|
एक खेल में एक जीवन होने की अवधारणा केवल एक संख्या है। एक अंतरिक्ष खेल के संदर्भ में यह सामान्य है कि आपके जहाज को नुकसान होने पर एक-एक करके कटे हुए जीवन का एक सेट आवंटित किया जाए। यदि आप एक नंबर के बजाय मिनीशिप या दिल की तरह इस का एक चित्रमय प्रतिनिधित्व दिखा सकते हैं तो अच्छा है.
|
||||||
|
|
||||||
|
## क्या बनाना है
|
||||||
|
|
||||||
|
चलो अपने खेल में निम्नलिखित जोड़ते हैं:
|
||||||
|
|
||||||
|
- **खेल का स्कोर**: नष्ट होने वाले प्रत्येक दुश्मन जहाज के लिए, नायक को कुछ बिंदुओं से सम्मानित किया जाना चाहिए, हम प्रति जहाज १०० अंक का सुझाव देते हैं। खेल का स्कोर नीचे बाईं ओर दिखाया जाना चाहिए.
|
||||||
|
- **जीबन**: आपके जहाज में तीन जीवन हैं। जब भी कोई दुश्मन जहाज आपसे टकराता है तो आप एक जीवन खो देते हैं। एक जीवन स्कोर नीचे दाईं ओर प्रदर्शित किया जाना चाहिए और निम्नलिखित ग्राफ़िक से बाहर किया जाना चाहिए! [जीवन छवि](../solution/assets/life.png).
|
||||||
|
|
||||||
|
## अनुशंसित कदम
|
||||||
|
|
||||||
|
उन फ़ाइलों का पता लगाएँ जो आपके लिए `your-work` सब फ़ोल्डर में बनाई गई हैं। इसमें निम्नलिखित शामिल होना चाहिए:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
-| assets
|
||||||
|
-| enemyShip.png
|
||||||
|
-| player.png
|
||||||
|
-| laserRed.png
|
||||||
|
-| index.html
|
||||||
|
-| app.js
|
||||||
|
-| package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
आप टाइप करके अपना प्रोजेक्ट `your_work` फ़ोल्डर शुरू करें:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd your-work
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
उपरोक्त पते पर एक HTTP सर्वर शुरू होगा `http://localhost:5000`। एक ब्राउज़र खोले और उस पते को डाले , अभी उसे नायक और सभी दुश्मनों को प्रस्तुत करना चाहिए, और जैसे ही आप अपने बाएँ और दाएँ तीर मारते हैं, नायक चलता है और दुश्मनों को मार सकता है।.
|
||||||
|
|
||||||
|
### कोड जोड़े
|
||||||
|
|
||||||
|
1. `solution/assets/` फ़ोल्डर से `your-work` फ़ोल्डर में आवश्यक असेट्स की प्रतिलिपि बनाएँ;आप एक `life.png` एसेट जोड़ देंगे। LifeImg को window.onload फ़ंक्शन में जोड़ें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
lifeImg = await loadTexture("assets/life.png");
|
||||||
|
```
|
||||||
|
|
||||||
|
1. असेट्स की सूची में `lifeImg` जोड़ें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let heroImg,
|
||||||
|
...
|
||||||
|
lifeImg,
|
||||||
|
...
|
||||||
|
eventEmitter = new EventEmitter();
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **चर जोड़ें** वह कोड जोड़ें जो आपके कुल स्कोर(0) का प्रतिनिधित्व करता है और बाईं ओर (3) रहता है, इन स्कोर को स्क्रीन पर प्रदर्शित करता है.
|
||||||
|
|
||||||
|
1. **`updateGameObjects()` फ़ंक्शन बढ़ाएँ**। दुश्मन टकराव को संभालने के लिए `updateGameObjects()` फ़ंक्शन बढ़ाएँ:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
enemies.forEach((enemy) => {
|
||||||
|
const heroRect = hero.rectFromGameObject();
|
||||||
|
if (intersectRect(heroRect, enemy.rectFromGameObject())) {
|
||||||
|
eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **`life` ओर `points` जोड़े**.
|
||||||
|
|
||||||
|
1. **आरंभिक चर**. `हीरो` वर्ग में `this.cooldown = 0` के तहत, जीवन और बिंदुओ निर्धारित करें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
this.life = 3;
|
||||||
|
this.points = 0;
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **स्क्रीन पर चर बनाए**. इन मूल्यों को स्क्रीन पर बनाए:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function drawLife() {
|
||||||
|
// TODO, 35, 27
|
||||||
|
const START_POS = canvas.width - 180;
|
||||||
|
for (let i = 0; i < hero.life; i++) {
|
||||||
|
ctx.drawImage(lifeImg, START_POS + 45 * (i + 1), canvas.height - 37);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawPoints() {
|
||||||
|
ctx.font = "30px Arial";
|
||||||
|
ctx.fillStyle = "red";
|
||||||
|
ctx.textAlign = "left";
|
||||||
|
drawText("Points: " + hero.points, 10, canvas.height - 20);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawText(message, x, y) {
|
||||||
|
ctx.fillText(message, x, y);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **गेम लूप के तरीके जोड़ें**. सुनिश्चित करें कि आप इन अपडेट्स को अपने विंडो में जोड़ें। फ़ंक्शन को `updateGameObjects()` के तहत लोड करें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
drawPoints();
|
||||||
|
drawLife();
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **खेल के नियमों को लागू करें**. निम्नलिखित खेल नियमों को लागू करें:
|
||||||
|
|
||||||
|
1. **हर हीरो और दुश्मन की टक्कर के लिए**, जीवन घटाए.
|
||||||
|
|
||||||
|
इस कटौती को करने के लिए `हीरो` क्लास का विस्तार करें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
decrementLife() {
|
||||||
|
this.life--;
|
||||||
|
if (this.life === 0) {
|
||||||
|
this.dead = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **हर लेजर के लिए जो दुश्मन को मारता है**, १०० अंकों के साथ गेम स्कोर बढ़ाता है.
|
||||||
|
|
||||||
|
इस वेतन वृद्धि को करने के लिए हीरो क्लास बढ़ाएँ:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
incrementPoints() {
|
||||||
|
this.points += 100;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
अपने कॉलिसन ईवेंट एमीटर्स में इन कार्यों को जोड़ें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
eventEmitter.on(
|
||||||
|
Messages.COLLISION_ENEMY_LASER,
|
||||||
|
(_, { first, second }) => {
|
||||||
|
first.dead = true;
|
||||||
|
second.dead = true;
|
||||||
|
hero.incrementPoints();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
|
||||||
|
enemy.dead = true;
|
||||||
|
hero.decrementLife();
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ जावास्क्रिप्ट/कैनवस का उपयोग करके बनाए गए अन्य खेलों की खोज के लिए थोड़ा शोध करें। उनके सामान्य लक्षण क्या हैं?
|
||||||
|
|
||||||
|
इस काम के अंत तक, आपको छोटे 'जीवन' जहाजों को नीचे दाईं ओर, बिंदुओं को नीचे बाईं ओर देखना चाहिए, और जब आप दुश्मनों को गोली मारते हैं, तो आपको अपने जीवन की गिनती में कमी और दुश्मनों से टकराते हुए देखना चाहिए। बहुत बढ़िया! आपका खेल लगभग पूरा हो गया है.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 चुनोती
|
||||||
|
|
||||||
|
आपका कोड लगभग पूरा हो चुका है। क्या आप अपने अगले चरणों की कल्पना कर सकते हैं?
|
||||||
|
|
||||||
|
## पोस्ट-व्याख्यान प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[पोस्ट-व्याख्यान प्रश्नोत्तरी](.github/post-lecture-quiz.hi.md)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
कुछ तरीकों पर शोध करें जो आप खेल के स्कोर और जीवन को बढ़ा सकते हैं। [PlayFab](https://playfab.com) जैसे कुछ दिलचस्प गेम इंजन हैं। इनमें से किसी एक का उपयोग करने से आपका खेल कैसे बढ़ेगा?
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[एक स्कोरिंग गेम बनाएँ](assignment.hi.md)
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# एक स्कोरिंग गेम बनाएँ
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
एक खेल बनाएं जहां आप रचनात्मक तरीके से जीवन और बिंदुओं को प्रदर्शित करते हैं। एक सुझाव है कि जीवन को दिलों के रूप में दिखाना और स्क्रीन के निचले केंद्र भाग में एक बड़ी संख्या के रूप में अंक। [मुक्त खेल संसाधनों](https://www.kenney.nl/) के लिए यहाँ एक नज़र डाले ।
|
||||||
|
|
||||||
|
## शीर्ष
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | -------------------- | ------------------------------------- | --------------------------- |
|
||||||
|
| | पूरा खेल प्रस्तुत है | खेल आंशिक रूप से प्रस्तुत किया गया है | आंशिक खेल में बग्स होते हैं |
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके पाठ के बाद इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. जब गेम एंड कंडीशन पूरी हो गई हो तो उपयोग करने के लिए एक अच्छा पैटर्न क्या है?
|
||||||
|
|
||||||
|
- [ ] एक उपयुक्त संदेश प्रदर्शित करें
|
||||||
|
- [ ] खेल से बाहर निकलें
|
||||||
|
- [ ] एक उपयुक्त संदेश प्रदर्शित करें, खिलाड़ी को पुनः आरंभ करने की पेशकश करें, और प्रदर्शित करें कि उस कार्रवाई के लिए क्या की है
|
||||||
|
|
||||||
|
1. जब खेल समाप्त हो गया हो तब ही आपको पुनः आरंभ करना चाहिए
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
_खेल के विकास के बारे में एक वार्म अप प्रश्नोत्तरी_
|
||||||
|
|
||||||
|
इस क्विज को कक्षा में पूरा करें
|
||||||
|
|
||||||
|
1. खेल को पुनः आरंभ करने का अच्छा समय कब है
|
||||||
|
|
||||||
|
- [ ] जब कोई खिलाड़ी जीतता है या हारता है
|
||||||
|
- [ ] कभीभी
|
||||||
|
|
||||||
|
2. खेल कब समाप्त होना चाहिए
|
||||||
|
|
||||||
|
- [ ] जब एक दुश्मन जहाज नष्ट हो जाता है
|
||||||
|
- [ ] जब एक नायक जहाज नष्ट हो जाता है
|
||||||
|
- [ ] जब अंक एकत्र किए जाते हैं
|
||||||
@ -0,0 +1,224 @@
|
|||||||
|
# एक अंतरिक्ष खेल बनाएँ भाग ६: अंत और पुनः आरंभ
|
||||||
|
|
||||||
|
## प्री-रीडिंग क्विज
|
||||||
|
|
||||||
|
[प्री-रीडिंग क्विज](.github/pre-lecture-quiz.hi.md)
|
||||||
|
|
||||||
|
एक खेल में व्यक्त करने और _अंतिम स्थिति_ के विभिन्न तरीके हैं। यह गेम के निर्माता के रूप में यह कहना है कि खेल क्यों समाप्त हो गया है। यहाँ कुछ कारण हैं, अगर हम मान लें कि हम उस अंतरिक्ष खेल के बारे में बात कर रहे हैं जो आप अभी तक बना रहे हैं:
|
||||||
|
|
||||||
|
- **`N` दुश्मन के जहाज तबाह हो गए हैं**: यदि आप एक गेम को विभिन्न स्तरों में विभाजित करते हैं तो यह काफी सामान्य है कि आपको एक स्तर पूरा करने के लिए `N` दुश्मन जहाजों को नष्ट करने की आवश्यकता है
|
||||||
|
- **आपका जहाज नष्ट हो गया है**: यदि आपका जहाज नष्ट हो जाता है तो निश्चित रूप से ऐसे खेल हैं जहाँ आप खेल को खो देते हैं। एक और आम दृष्टिकोण यह है कि आपके पास जीवन की अवधारणा है। हर बार जब आपका जहाज नष्ट हो जाता है तो यह जीवन काट देता है। एक बार जब सभी जान चली गई तो आप खेल खो देते हैं.
|
||||||
|
- **आपने `N` अंक एकत्र किए हैं**: एक और सामान्य अंतिम स्थिति आपके लिए अंक एकत्र करने की है। आप कैसे अंक प्राप्त करते हैं, यह आपके ऊपर है, लेकिन दुश्मन के जहाज को नष्ट करने या शायद वस्तुओं को इकट्ठा करने जैसी विभिन्न गतिविधियों के लिए अंक प्रदान करना काफी सामान्य है, जब वे _गिर_ जाते हैं।.
|
||||||
|
- **एक स्तर पूरा करें**: इसमें कई स्थितियां शामिल हो सकती हैं जैसे कि `X` दुश्मन के जहाज नष्ट,` Y` अंक एकत्र या शायद एक विशिष्ट आइटम एकत्र किया गया है.
|
||||||
|
|
||||||
|
## पुनरारंभ
|
||||||
|
|
||||||
|
यदि लोग आपके खेल का आनंद लेते हैं, तो वे इसे फिर से खेलना चाहते हैं। एक बार खेल जो भी कारण से आप को पुनरारंभ करने के लिए एक विकल्प की पेशकश के लिए समाप्त होता है.
|
||||||
|
|
||||||
|
✅ इस बारे में थोड़ा सोचें कि आपको किन परिस्थितियों में गेम समाप्त होता है, और फिर आपको कैसे पुनरारंभ करने के लिए प्रेरित किया जाता है
|
||||||
|
|
||||||
|
## क्या बनना है
|
||||||
|
|
||||||
|
आप इन नियमों को अपने खेल में शामिल करेंगे:
|
||||||
|
|
||||||
|
1. **खेल जीतना**. एक बार सभी दुश्मन जहाजों को नष्ट कर दिए जाने के बाद, आप गेम जीतते हैं। इसके अतिरिक्त किसी प्रकार का विजय संदेश प्रदर्शित करें.
|
||||||
|
1. **पुनरारंभ**. एक बार जब आपका सारा जीवन खो जाता है या खेल जीत जाता है, तो आपको खेल को पुनः आरंभ करने का एक तरीका पेश करना चाहिए। याद है! आपको खेल को फिर से संगठित करना होगा और पिछले खेल की स्थिति को साफ करना चाहिए.
|
||||||
|
|
||||||
|
## अनुशंसित कदम
|
||||||
|
|
||||||
|
उन फ़ाइलों का पता लगाएँ जो आपके लिए `your-work` सब फ़ोल्डर में बनाई गई हैं। इसमें निम्नलिखित शामिल होना चाहिए:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
-| assets
|
||||||
|
-| enemyShip.png
|
||||||
|
-| player.png
|
||||||
|
-| laserRed.png
|
||||||
|
-| life.png
|
||||||
|
-| index.html
|
||||||
|
-| app.js
|
||||||
|
-| package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
आप टाइप करके अपना प्रोजेक्ट `your_work` फ़ोल्डर शुरू करें:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd your-work
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
उपरोक्त पते पर एक HTTP सर्वर शुरू होगा `http: // localhost: 5000`। एक ब्राउज़र खोले और उस पतेको खोलें। आपका खेल खेलने योग्य अवस्था में होना चाहिए
|
||||||
|
|
||||||
|
> टिप: विज़ुअल स्टूडियो कोड में चेतावनियों से बचने के लिए, `window.onload` फ़ंक्शन को` gameLoopId` के रूप में (`let` के बिना) के रूप में संपादित करने के लिए संपादित करें, और स्वतंत्र रूप से फ़ाइल के शीर्ष पर gameLoopId की घोषणा करें, `let gameLoopId`;
|
||||||
|
|
||||||
|
### कोड जोड़े
|
||||||
|
|
||||||
|
1. **ट्रैक एंड कंडीशन**. उन कोडों को जोड़ें जो दुश्मनों की संख्या का ट्रैक रखते हैं, या यदि इन दो कार्यों को जोड़ते हुए नायक जहाज को नष्ट कर दिया गया है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function isHeroDead() {
|
||||||
|
return hero.life <= 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isEnemiesDead() {
|
||||||
|
const enemies = gameObjects.filter(
|
||||||
|
(go) => go.type === "Enemy" && !go.dead
|
||||||
|
);
|
||||||
|
return enemies.length === 0;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **संदेश संचालकों में तर्क जोड़ें**. इन स्थितियों को संभालने के लिए `EventEmitter` संपादित करें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
||||||
|
first.dead = true;
|
||||||
|
second.dead = true;
|
||||||
|
hero.incrementPoints();
|
||||||
|
|
||||||
|
if (isEnemiesDead()) {
|
||||||
|
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
|
||||||
|
enemy.dead = true;
|
||||||
|
hero.decrementLife();
|
||||||
|
if (isHeroDead()) {
|
||||||
|
eventEmitter.emit(Messages.GAME_END_LOSS);
|
||||||
|
return; // loss before victory
|
||||||
|
}
|
||||||
|
if (isEnemiesDead()) {
|
||||||
|
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
eventEmitter.on(Messages.GAME_END_WIN, () => {
|
||||||
|
endGame(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
eventEmitter.on(Messages.GAME_END_LOSS, () => {
|
||||||
|
endGame(false);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **नए संदेश प्रकार जोड़ें**. इन संदेशों को स्थिरांक वस्तु में जोड़ें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
GAME_END_LOSS: "GAME_END_LOSS",
|
||||||
|
GAME_END_WIN: "GAME_END_WIN",
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **पुनः आरंभ कोड जोड़ें** कोड जो चयनित बटन के प्रेस पर गेम को पुनरारंभ करता है.
|
||||||
|
|
||||||
|
1. **`Enter` की प्रेस सुनो**. इस प्रेस को सुनने के लिए अपनी विंडो के इवेंटलिस्ट को एडिट करें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
else if(evt.key === "Enter") {
|
||||||
|
eventEmitter.emit(Messages.KEY_EVENT_ENTER);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **पुनः आरंभ संदेश जोड़ें**. इस संदेश को अपने संदेशों में लगातार जोड़ें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **खेल के नियमों को लागू करें**. निम्नलिखित खेल नियमों को लागू करें:
|
||||||
|
|
||||||
|
1. **खिलाड़ी शर्त जीता**. जब सभी दुश्मन जहाज नष्ट हो जाते हैं, तो एक जीत संदेश प्रदर्शित करें.
|
||||||
|
|
||||||
|
1. सबसे पहले, एक `displayMessage()` फ़ंक्शन बनाएँ:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function displayMessage(message, color = "red") {
|
||||||
|
ctx.font = "30px Arial";
|
||||||
|
ctx.fillStyle = color;
|
||||||
|
ctx.textAlign = "center";
|
||||||
|
ctx.fillText(message, canvas.width / 2, canvas.height / 2);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. एक `endGame()` फ़ंक्शन बनाएँ:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function endGame(win) {
|
||||||
|
clearInterval(gameLoopId);
|
||||||
|
|
||||||
|
// set a delay so we are sure any paints have finished
|
||||||
|
setTimeout(() => {
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
if (win) {
|
||||||
|
displayMessage(
|
||||||
|
"Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
|
||||||
|
"green"
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
displayMessage(
|
||||||
|
"You died !!! Press [Enter] to start a new game Captain Pew Pew"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **तर्क पुनः आरंभ**. जब सभी जीवन खो जाते हैं या खिलाड़ी खेल जीत जाता है, तो प्रदर्शित करें कि खेल को फिर से शुरू किया जा सकता है। इसके अलावा खेल को पुनरारंभ करें जब _पुनरारंभ_ की हिट होती है (आप तय कर सकते हैं कि पुनरारंभ करने के लिए किस की को मैप किया जाना चाहिए).
|
||||||
|
|
||||||
|
1. `ResetGame()` फ़ंक्शन बनाएँ:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function resetGame() {
|
||||||
|
if (gameLoopId) {
|
||||||
|
clearInterval(gameLoopId);
|
||||||
|
eventEmitter.clear();
|
||||||
|
initGame();
|
||||||
|
gameLoopId = setInterval(() => {
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
drawPoints();
|
||||||
|
drawLife();
|
||||||
|
updateGameObjects();
|
||||||
|
drawGameObjects(ctx);
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. `InitGame()` में गेम को रीसेट करने के लिए` EventEmitter` में कॉल जोड़ें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
|
||||||
|
resetGame();
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
1. EventEmitter में `clear()` फ़ंक्शन जोड़ें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
clear() {
|
||||||
|
this.listeners = {};
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
👽 💥 🚀 बधाई हो, कैप्टन! आपका खेल पूरा हो गया है! बहुत बढ़िया! 🚀 💥 👽
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 चुनौती
|
||||||
|
|
||||||
|
एक ध्वनि जोड़ें! क्या आप अपने गेम खेलने को बढ़ाने के लिए एक ध्वनि जोड़ सकते हैं, हो सकता है कि जब कोई लेजर हिट हो, या नायक मर जाए या जीत जाए? जावास्क्रिप्ट का उपयोग करके ध्वनि कैसे खेलें, यह जानने के लिए इस [सैंडबॉक्स](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) पर एक नज़र डालें
|
||||||
|
|
||||||
|
## पोस्ट-व्याख्यान प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[पोस्ट-व्याख्यान प्रश्नोत्तरी](.github/post-lecture-quiz.hi.md)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
आपका असाइनमेंट एक फ्रेश सैंपल गेम बनाना है, इसलिए वहां के कुछ दिलचस्प गेम्स को देखें कि आप किस प्रकार के गेम का निर्माण कर सकते हैं.
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[एक नमूना खेल बनाएँ](assignment.hi.md)
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
# एक नमूना खेल बनाएँ
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
एक छोटा गेम बनाने की कोशिश करें जहां आप विभिन्न अंत स्थितियों पर अभ्यास करते हैं। कई अंकों के बीच भिन्न, नायक सभी जीवन खो देता है या सभी राक्षसों को हराया जाता है। कंसोल आधारित साहसिक गेम की तरह कुछ सरल बनाएं। प्रेरणा के रूप में नीचे के खेल प्रवाह का उपयोग करें:
|
||||||
|
|
||||||
|
```
|
||||||
|
Hero> Strikes with broadsword - orc takes 3p damage
|
||||||
|
Orc> Hits with club - hero takes 2p damage
|
||||||
|
Hero> Kicks - orc takes 1p damage
|
||||||
|
Game> Orc is defeated - Hero collects 2 coins
|
||||||
|
Game> ****No more monsters, you have conquered the evil fortress****
|
||||||
|
```
|
||||||
|
|
||||||
|
## शीर्ष
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | -------------------- | ------------------------------------- | --------------------------- |
|
||||||
|
| | पूरा खेल प्रस्तुत है | खेल आंशिक रूप से प्रस्तुत किया गया है | आंशिक खेल में बग्स होते हैं |
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
# एक अंतरिक्ष खेल बनाएँ
|
||||||
|
|
||||||
|
अधिक उन्नत जावास्क्रिप्ट बुनियादी बातों को सिखाने के लिए एक अंतरिक्ष खेल
|
||||||
|
|
||||||
|
इस पाठ में आप सीखेंगे कि कैसे अपना खुद का स्पेस गेम बनाएं। यदि आपने कभी "स्पेस इंवेडर्स" गेम खेला है, तो इस गेम का एक ही विचार है: एक अंतरिक्ष यान को चलाने और ऊपर से नीचे आने वाले राक्षसों पर आग लगाने के लिए। यहाँ समाप्त खेल कैसा दिखेगा
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
इन छह पाठों में आप निम्नलिखित सीखेंगे:
|
||||||
|
|
||||||
|
- एक स्क्रीन पर चीजों को खींचने के लिए कैनवास तत्व के साथ **इनरैक्ट** करें
|
||||||
|
- कार्टेशियन समन्वय प्रणाली को **समझें**
|
||||||
|
- ध्वनि-गेम आर्किटेक्चर बनाने के लिए पब-सब पैटर्न **सीखें** जो बनाए रखने और बढ़ाने में आसान है
|
||||||
|
- खेल संसाधनों को लोड करने के लिए Async/Await का **लाभ उठाएं**
|
||||||
|
- कीबोर्ड घटनाओं को **संभालें**
|
||||||
|
|
||||||
|
## अवलोकन
|
||||||
|
|
||||||
|
- सिद्धांतजावास्क्रिप्ट के साथ खेल के निर्माण का परिचय
|
||||||
|
- [Introduction to building games with JavaScript](1-introduction/README.md)
|
||||||
|
- अभ्यास
|
||||||
|
- [कैनवास पर आरेखण](../2-drawing-to-canvas/README.md)
|
||||||
|
- [स्क्रीन के चारों ओर बढ़ते तत्व](../3-moving-elements-around/README.md)
|
||||||
|
- [टक्कर की पहचान](../4-collision-detection/README.md)
|
||||||
|
- [हिसाब रखना](../5-keeping-score/README.md)
|
||||||
|
- [खेल को समाप्त और पुनः आरंभ करना](../6-end-condition/README.md)
|
||||||
|
|
||||||
|
## आभार सूची
|
||||||
|
|
||||||
|
इसके लिए इस्तेमाल की जाने वाली असेट् https://www.kenney.nl/ से आई है।
|
||||||
|
यदि आप खेल का निर्माण कर रहे हैं, तो ये कुछ गंभीर रूप से अच्छी असेट्स हैं, बहुत कुछ मुफ्त है और कुछ का भुगतान किया जाता है।
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. HTML टेम्पलेट डिफ़ॉल्ट रूप से DOM का हिस्सा हैं
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
2. रूटिंग के लिए URL के किस भाग की आवश्यकता है?
|
||||||
|
|
||||||
|
- [ ] window.location.pathname
|
||||||
|
- [ ] window.location.origin
|
||||||
|
- [ ] दोनों
|
||||||
|
|
||||||
|
3. `History.pushState()` फ़ंक्शन को कॉल करते समय का घटना का नाम क्या है?
|
||||||
|
|
||||||
|
- [ ] `pushstate`
|
||||||
|
- [ ] `popstate`
|
||||||
|
- [ ] `navigate`
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
_वेब ऐप्स के बारे में एक त्वरित वार्म-अप_
|
||||||
|
|
||||||
|
_इस क्विज को कक्षा में पूरा करें._
|
||||||
|
|
||||||
|
1. वेब ऐप में अलग-अलग स्क्रीन प्रदर्शित करने के लिए आपको कई HTML फाइल बनाने की आवश्यकता है
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
2. आप वेब ऐप में स्थानीय रूप से डेटा स्टोर और बनाये रख सकते हैं
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
3. वेब ऐप के लिए सबसे अच्छा डेटा प्रदाता क्या है?
|
||||||
|
|
||||||
|
- [ ] एक स्थानीय डेटाबेस
|
||||||
|
- [ ] एक जावास्क्रिप्ट वस्तु
|
||||||
|
- [ ] JSON API वाला सर्वर
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
# रूटिंग में सुधार करें
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
मार्गों की घोषणा में वर्तमान में उपयोग करने के लिए केवल टेम्पलेट आईडी है। लेकिन एक नया पृष्ठ प्रदर्शित करते समय, कभी-कभी थोड़ा और अधिक की आवश्यकता होती है। आइए दो अतिरिक्त सुविधाओं के साथ हमारे रूटिंग कार्यान्वयन में सुधार करें:
|
||||||
|
|
||||||
|
- प्रत्येक टेम्पलेट को शीर्षक दें और जब टेम्पलेट बदलता है तो इस नए शीर्षक के साथ विंडो शीर्षक को अपडेट करें।
|
||||||
|
- टेम्पलेट परिवर्तन के बाद कुछ कोड चलाने के लिए एक विकल्प जोड़ें। हम हर बार डैशबोर्ड पृष्ठ प्रदर्शित होने पर डेवलपर कंसोल में `'Dashboard is shown'` प्रिंट करना चाहते हैं
|
||||||
|
|
||||||
|
## शीर्ष
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | ------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
|
||||||
|
| | दो विशेषताएं कार्यान्वित और काम कर रही हैं। शीर्षक और कोड जोड़ भी `routes` घोषणा में जोड़े गए एक नए मार्ग के लिए काम करते हैं. | दो सुविधाएँ काम करती हैं, लेकिन व्यवहार कठिन है और `routes` घोषणा के माध्यम से विन्यास योग्य नहीं है। शीर्षक और कोड जोड़ के साथ तीसरा मार्ग जोड़ना आंशिक रूप से काम या काम नहीं करता है. | सुविधाओं में से एक गायब है या ठीक से काम नहीं कर रहा है. |
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. रूपों में `<label>` तत्वों का उपयोग केवल फ़ॉर्म को सुंदर बनाने के लिए है
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
2. आप कैसे परिभाषित कर सकते हैं कि एक फॉर्म सर्वर पर कैसे भेजा जाता है?
|
||||||
|
|
||||||
|
- [ ] `action` विशेषता का उपयोग करना
|
||||||
|
- [ ] `method` विशेषता का उपयोग करना
|
||||||
|
- [ ] दोनों
|
||||||
|
|
||||||
|
3. <input> पाठ के अधिकतम आकार को सेट करने के लिए आप किस विशेषता का उपयोग कर सकते हैं?
|
||||||
|
|
||||||
|
- [ ] `max`
|
||||||
|
- [ ] `maxlength`
|
||||||
|
- [ ] `pattern`
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
_इस क्विज को कक्षा में पूरा करें._
|
||||||
|
|
||||||
|
1. HTML फ़ॉर्म जावास्क्रिप्ट का उपयोग किए बिना एक सर्वर से उपयोगकर्ता इनपुट भेजने की अनुमति देते हैं
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
2. `<label>` तत्व हर फॉर्म नियंत्रण के लिए अनिवार्य हैं
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
3. HTTP पर सर्वर पर फ़ॉर्म डेटा भेजना सुरक्षित है
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
# अपने बैंक ऐप को स्टाइल करें
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
एक नई `style.css` फ़ाइल बनाएँ और अपने वर्तमान` index.html` फ़ाइल में एक लिंक जोड़ें. CSS फ़ाइल में आपने सिर्फ _लॉगिन_ और _डैशबोर्ड_ पेज बनाने के लिए कुछ स्टाइलिंग जोड़ दी है जो अच्छी और सुव्यवस्थित दिखती है. अपने ऐप को खुद की ब्रांडिंग देने के लिए कलर थीम बनाने की कोशिश करें.
|
||||||
|
|
||||||
|
> युक्ति: आप HTML को संशोधित कर सकते हैं और यदि आवश्यक हो तो नए तत्व और क्लासेस जोड़ सकते हैं.
|
||||||
|
|
||||||
|
## शीर्ष
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
|
||||||
|
| | सभी पृष्ठ साफ-सुथरे और पठनीय दिखते हैं, जिसमें एक सुसंगत रंग विषय और विभिन्न खंड ठीक से खड़े हैं. | पृष्ठों को स्टाइल किया गया है, लेकिन बिना थीम के या स्पष्ट रूप से परिसीमित नहीं किए गए अनुभागों के साथ. | पृष्ठों में स्टाइल की कमी है, खंड अव्यवस्थित दिखते हैं और जानकारी को पढ़ना मुश्किल है. |
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. सिंगल-पेज एप्लिकेशन में, HTML एक बार लोड होता है और कभी अपडेट नहीं होता है:
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
2. उपयोगकर्ता इनपुट से आने वाले डेटा पर भरोसा नहीं करना क्यों महत्वपूर्ण है?
|
||||||
|
|
||||||
|
- [ ] क्योंकि विशेष वर्णों का उपयोग करने से UI बदसूरत हो सकता है.
|
||||||
|
- [ ] क्योंकि इसमें गैर-अर्थ या आपत्तिजनक शब्द हो सकते हैं.
|
||||||
|
- [ ] क्योंकि यह दुर्भावनापूर्ण स्क्रिप्ट को निष्पादित करने के लिए हमले के वेक्टर के रूप में इस्तेमाल किया जा सकता है.
|
||||||
|
|
||||||
|
3. वेब सर्वर पर असिंक्रोनोस HTTP अनुरोध भेजने के लिए एपीआई नाम क्या है?
|
||||||
|
|
||||||
|
- [ ] `request()`
|
||||||
|
- [ ] `fetch()`
|
||||||
|
- [ ] `ajax()`
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
_इस क्विज को कक्षा में पूरा करें._
|
||||||
|
|
||||||
|
1. आप किसी ब्राउज़र में सर्वर से डेटा को सिंक्रोनाइज़ कर सकते हैं
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
|
|
||||||
|
2. वेब पर _डेटा_ का आदान-प्रदान करने के लिए सबसे आम प्रारूप क्या है?
|
||||||
|
|
||||||
|
- [ ] HTML
|
||||||
|
- [ ] XML
|
||||||
|
- [ ] JSON
|
||||||
|
|
||||||
|
3. सार्वजनिक सर्वर API तक वेब पेज को रोकने का कोई तरीका नहीं है
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
# अपना कोड रिफैक्टर और टिप्पणी करें
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
जैसे-जैसे आपका कोडबेस बढ़ता है, समय के साथ-साथ पठनीय और बनाए रखने के लिए अपने कोड को बार-बार रिफलेक्टर करना महत्वपूर्ण है। टिप्पणी जोड़ें और कोड की गुणवत्ता में सुधार करने के लिए अपने `app.js` को फिर से फ़िल्टर करें:
|
||||||
|
|
||||||
|
- सर्वर API बेस URL की तरह, स्थिरांक निकालें
|
||||||
|
- समान कोड को फैक्टराइज़ करें: उदाहरण के लिए आप दोनों `createAccount()` और `getAccount()` में उपयोग किए गए कोड को फिर से इकट्ठा करने के लिए एक `sendRequest()` फ़ंक्शन बना सकते हैं।
|
||||||
|
- कोड को पढ़ने, और टिप्पणी जोड़ने में आसान बनाने के लिए इसे पुनर्गठित करें
|
||||||
|
|
||||||
|
## शीर्ष
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
|
||||||
|
| | कोड टिप्पणी की गई है, विभिन्न वर्गों में सुव्यवस्थित और पढ़ने में आसान है। स्थिरांक निकाले जाते हैं और एक कारक `sendRequest()` फ़ंक्शन बनाया गया है. | कोड साफ है लेकिन फिर भी अधिक टिप्पणियों, निरंतर निष्कर्षण या कारक के साथ सुधार किया जा सकता है. | कोड गड़बड़ है, टिप्पणी नहीं की गई है, स्थिरांक नहीं निकाले गए हैं और कोड कारक नहीं है. |
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
_प्रति प्रश्न एक उत्तर की जाँच करके इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
1. _स्टेट मैनिज्मन्ट_ का मतलब है आप क्या सोचते हैं ?
|
||||||
|
|
||||||
|
- [ ] कानून और व्यवस्था का प्रवर्तन
|
||||||
|
- [ ] समय के साथ उपयोगकर्ता इंटरफ़ेस स्थिति लॉगिंग
|
||||||
|
- [ ] अपने एप्लिकेशन डेटा को स्वच्छ रखना और डेटा के साथ उपयोगकर्ता इंटरफ़ेस को सिंक्रनाइज़ करना
|
||||||
|
|
||||||
|
2. आप उपयोगकर्ता सत्र स्थिति का ट्रैक कैसे रख सकते हैं?
|
||||||
|
|
||||||
|
- [ ] HTTP कूकीज
|
||||||
|
- [ ] स्थानीय या सत्र भंडारण
|
||||||
|
- [ ] ऊपर के सभी
|
||||||
|
|
||||||
|
3. किसी ऑब्जेक्ट को मियूटेट करना हमेशा इसे अपडेट करने का सबसे अच्छा तरीका है
|
||||||
|
|
||||||
|
- [ ] सही
|
||||||
|
- [ ] गलत
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
_इस क्विज को कक्षा में पूरा करें._
|
||||||
|
|
||||||
|
1. एक अपरिवर्तनीय वस्तु क्या है?
|
||||||
|
|
||||||
|
- [ ] स्थिरांक के रूप में परिभाषित एक वस्तु
|
||||||
|
- [ ] एक ऐसी वस्तु जिसे बनने के बाद संशोधित नहीं किया जा सकता है
|
||||||
|
- [ ] मौजूदा वस्तु की एक प्रति
|
||||||
|
|
||||||
|
2. स्टेट मैनिज्मन्ट का उपयोग करने से आपको क्या लाभ होता है?
|
||||||
|
|
||||||
|
- [ ] आप हर उस जगह पर नज़र रख सकते हैं जहाँ स्टेट अपडेट किया गया है
|
||||||
|
- [ ] कोड डिबग करना आसान है
|
||||||
|
- [ ] ऊपर के सभी
|
||||||
|
|
||||||
|
3. विभिन्न सत्रों में महत्वपूर्ण उपयोगकर्ता डेटा को बनाए रखने का सबसे अच्छा तरीका क्या है?
|
||||||
|
|
||||||
|
- [ ] फ़ाइलों का उपयोग करना
|
||||||
|
- [ ] ब्राउज़र के `लोकलस्टोरेज` एपीआई का उपयोग करना
|
||||||
|
- [ ] एक सर्वर एपीआई के पीछे एक डेटाबेस में
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
# लेनदेन जोड़ें डियलॉग लागू करें
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
हमारा बैंक ऐप अभी भी एक महत्वपूर्ण विशेषता को याद कर रहा है: नए लेनदेन दर्ज करने की संभावना।
|
||||||
|
पिछले चार पाठों में आपने जो कुछ भी सीखा है, उसका उपयोग करके "लेनदेन जोड़ें" डियलॉग को लागू करें:
|
||||||
|
|
||||||
|
- डैशबोर्ड पृष्ठ में "लेनदेन जोड़ें" बटन जोड़ें
|
||||||
|
- या तो HTML टेम्पलेट के साथ एक नया पृष्ठ बनाएँ, या डैशबोर्ड पृष्ठ को छोड़े बिना संवाद HTML दिखाने / छिपाने के लिए जावास्क्रिप्ट का उपयोग करें (आप उसके लिए, या CSS कक्षाओं के लिए [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) हुई संपत्ति का उपयोग कर सकते हैं)
|
||||||
|
- सुनिश्चित करें कि आप [कीबोर्ड और स्क्रीन रीडर एक्सेसिबिलिटी](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) डियलॉग संभालते हैं
|
||||||
|
- इनपुट डेटा प्राप्त करने के लिए एक HTML फॉर्म को लागू करें
|
||||||
|
- फॉर्म डेटा से JSON डेटा बनाएं और इसे API पर भेजें
|
||||||
|
- नए डेटा के साथ डैशबोर्ड पृष्ठ को अपडेट करें
|
||||||
|
|
||||||
|
[सर्वर एपीआई विनिर्देशों](../../api/README.md) को देखें कि आपको कौन सा एपीआई कॉल करने की आवश्यकता है और जो JSON प्रारूप अपेक्षित है उसे देखने के लिए।
|
||||||
|
|
||||||
|
यहां असाइनमेंट पूरा करने के बाद एक उदाहरण परिणाम है:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## शीर्ष
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | -------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
|
||||||
|
| | लेन-देन को जोड़ना पाठों में देखी जाने वाली सभी सर्वोत्तम प्रथाओं का पूरी तरह से पालन किया जाता है. | लेन-देन जोड़ना कार्यान्वयन है, लेकिन पाठों में देखी गई सर्वोत्तम प्रथाओं का पालन नहीं करना, या केवल आंशिक रूप से काम करना. | लेनदेन जोड़ना बिल्कुल भी काम नहीं कर रहा है. |
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
# बैंक एपीआई
|
||||||
|
|
||||||
|
> [नोडजेयस](https://nodejs.org) + [एक्सप्रेस](https://expressjs.com/) के साथ बनाया गया बैंक एपीआई.
|
||||||
|
|
||||||
|
एपीआई आपके लिए पहले से ही बनाया गया है और व्यायाम का हिस्सा नहीं है.
|
||||||
|
|
||||||
|
हालाँकि, अगर आप यह जानने के लिए इच्छुक हैं कि एपीआई कैसे बनाया जाए तो आप इस वीडियो की श्रृंखला का अनुसरण कर सकते हैं: https://aka.ms/NodeBeener (वीडियो 17 से 21 के माध्यम से इस सटीक एपीआई कवर करता है).
|
||||||
|
|
||||||
|
आप इस इंटरेक्टिव ट्यूटोरियल पर भी नज़र डाल सकते हैं: https://aka.ms/learn/express-api
|
||||||
|
|
||||||
|
## सर्वर चल रहा है
|
||||||
|
|
||||||
|
सुनिश्चित करें कि आपके पास [नोडजेयस](https://nodejs.org) स्थापित है.
|
||||||
|
|
||||||
|
1. ये गिट रेपो क्लोन करे.
|
||||||
|
2. `api` फ़ोल्डर में एक टर्मिनल खोलें, फिर `npm install` चलाएं.
|
||||||
|
3. `npm start` चलाए.
|
||||||
|
|
||||||
|
सर्वर को `5000` पोर्ट पर सुनना शुरू करना चाहिए.
|
||||||
|
|
||||||
|
> नोट: सभी प्रविष्टियों को मेमोरी में संग्रहीत किया जाता है और उन्हें बनाए नहीं रखा जाता है, इसलिए जब सर्वर बंद हो जाता है तो सभी डेटा खो जाता है.
|
||||||
|
|
||||||
|
## एपीआई विवरण
|
||||||
|
|
||||||
|
| रूट | विवरण |
|
||||||
|
| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
|
||||||
|
| GET /api/ | सर्वर जानकारी प्राप्त करें |
|
||||||
|
| POST /api/accounts/ | एक खाता बनाएँ, उदाहरण के लिए: `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }` |
|
||||||
|
| GET /api/accounts/:user | निर्दिष्ट खाते के लिए सभी डेटा प्राप्त करें |
|
||||||
|
| DELETE /api/accounts/:user | निर्दिष्ट खाता हटाए |
|
||||||
|
| POST /api/accounts/:user/transactions | एक लेनदेन जोड़े, उदाहरण के लिए: `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }` |
|
||||||
|
| DELETE /api/accounts/:user/transactions/:id | निर्दिष्ट लेनदेन हटाए |
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
# बैंक एप
|
||||||
|
|
||||||
|
> बैंक ऐप परियोजना के लिए उदाहरण समाधान, वेनिला एचटीएमएल 5, सीएसएस और जावास्क्रिप्ट के साथ बनाया गया (कोई फ्रेमवर्क या लाइब्रेरी का उपयोग नहीं किया गया) है.
|
||||||
|
|
||||||
|
## ऐप चल रहा हैं
|
||||||
|
|
||||||
|
First make sure you have the [API server](../api/README.md) running पहले सुनिश्चित करें कि आपके पास [एपीआई सर्वर](../../api/translations/README.hi.md) चल रहा है.
|
||||||
|
|
||||||
|
एप्लिकेशन को चलाने के लिए किसी भी वेब सर्वर का उपयोग किया जा सकता है, लेकिन चूंकि आपके पास एपीआई चलाने के लिए वैसे भी [नोडजेयस](https://nodejs.org) स्थापित होना चाहिए, आप कर सकते हैं:
|
||||||
|
|
||||||
|
1. ये रेपो गिट क्लोन.
|
||||||
|
2. एक टर्मिनल खोलें, फिर `npx lite-server solution` चलाएँ। यह पोर्ट `3000` पर एक विकास वेब सर्वर शुरू करेगा
|
||||||
|
3. एप्लिकेशन चलाने के लिए ब्राउज़र में `http://localhost:3000` खोलें.
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
# : डॉलर: एक बैंक बनाएँ
|
||||||
|
|
||||||
|
इस परियोजना में, आप सीखेंगे कि एक काल्पनिक बैंक कैसे बनाया जाए। इन पाठों में एक वेब ऐप को लेआउट करने और मार्ग प्रदान करने, प्रपत्र बनाने, राज्य का प्रबंधन करने और एपीआई से डेटा प्राप्त करने के निर्देश शामिल हैं, जिनसे आप बैंक का डेटा प्राप्त कर सकते हैं।.
|
||||||
|
|
||||||
|
|  |  |
|
||||||
|
| ----------------------------------- | ----------------------------------- |
|
||||||
|
|
||||||
|
## पाठ
|
||||||
|
|
||||||
|
1. [HTML टेम्पलेट्स और वेब ऐप में रूट](../1-template-route/README.md)
|
||||||
|
2. [एक लॉगिन और पंजीकरण फॉर्म बनाएँ](../2-forms/README.md)
|
||||||
|
3. [डेटा लाने और उपयोग करने के तरीके](../3-data/README.md)
|
||||||
|
4. [राज्य प्रबंधन की अवधारणाएँ](../4-state-management/README.md)
|
||||||
|
|
||||||
|
### आभार सूची
|
||||||
|
|
||||||
|
[Yohan Lasorsa](https://twitter.com/sinedied) द्वारा इन पाठों को :hearts: के साथ लिखा गया था.
|
||||||
|
|
||||||
|
यदि आप सीखना चाहते हैं कि इन पाठों में उपयोग किए जाने वाले [सर्वर एपीआई](../api/translations/README.hi.md) का निर्माण कैसे किया जाए, तो आप [वीडियो की यह श्रृंखला](https://aka.ms/NodeBeginner) का अनुसरण कर सकते हैं (विशेष रूप से वीडियो १७ से २१).
|
||||||
|
|
||||||
|
आप [इस इंटरएक्टिव लर्न ट्यूटोरियल](https://aka.ms/learn/express-api) पर भी नज़र डाल सकते हैं.
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
_प्रति प्रश्न के एक उत्तर की जाँच करके अपने प्रस्तुतिकरण के साथ इस प्रश्नोत्तरी को पूरा करें._
|
||||||
|
|
||||||
|
क्विज़ को पूरा करने के लिए आपको निम्नलिखित लर्निंग मॉड्यूल(एस) को पूरा करना होगा:
|
||||||
|
|
||||||
|
[लर्न लिंक १]()
|
||||||
|
[लर्न लिंक २]()
|
||||||
|
|
||||||
|
1. [Q1]
|
||||||
|
|
||||||
|
- [ ] [विकल्प १]
|
||||||
|
- [ ] [विकल्प २]
|
||||||
|
- [ ] [विकल्प ३]
|
||||||
|
|
||||||
|
2. [Q2]
|
||||||
|
|
||||||
|
- [ ] [विकल्प १]
|
||||||
|
- [ ] [विकल्प २]
|
||||||
|
- [ ] [विकल्प ३]
|
||||||
|
|
||||||
|
3. [Q3]
|
||||||
|
|
||||||
|
- [ ] [विकल्प १]
|
||||||
|
- [ ] [विकल्प २]
|
||||||
|
- [ ] [विकल्प ३]
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
_इस क्विज को कक्षा में पूरा करें_
|
||||||
|
|
||||||
|
1. [Q1]
|
||||||
|
|
||||||
|
- [ ] [विकल्प १]
|
||||||
|
- [ ] [विकल्प २]
|
||||||
|
- [ ] [विकल्प ३]
|
||||||
|
|
||||||
|
2. [Q2]
|
||||||
|
|
||||||
|
- [ ] [विकल्प १]
|
||||||
|
- [ ] [विकल्प २]
|
||||||
|
- [ ] [विकल्प ३]
|
||||||
|
|
||||||
|
3. [Q3]
|
||||||
|
|
||||||
|
- [ ] [विकल्प १]
|
||||||
|
- [ ] [विकल्प २]
|
||||||
|
- [ ] [विकल्प ३]
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
# [पाठ विषय]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## [पूर्व-पठन क्विज़](.github/pre-lecture-quiz.hi.md)
|
||||||
|
|
||||||
|
[वर्णन करें कि हम क्या सीखेंगे]
|
||||||
|
|
||||||
|
### परिचय
|
||||||
|
|
||||||
|
वर्णन करें कि क्या कवर किया जाएगा
|
||||||
|
|
||||||
|
> टिप्पणियाँ
|
||||||
|
|
||||||
|
### शर्त
|
||||||
|
|
||||||
|
इस पाठ से पहले क्या कदम उठाए जाने चाहिए थे?
|
||||||
|
|
||||||
|
### तैयारी
|
||||||
|
|
||||||
|
इस पाठ को शुरू करने के लिए प्रारंभिक कदम
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
[ब्लॉकों में सामग्री के माध्यम से कदम]
|
||||||
|
|
||||||
|
## [विषय १]
|
||||||
|
|
||||||
|
### कार्य:
|
||||||
|
|
||||||
|
साझा कोड के साथ प्रोजेक्ट बनाने के लिए अपने कोडबेस को उत्तरोत्तर बढ़ाने के लिए मिलकर काम करें:
|
||||||
|
|
||||||
|
```html
|
||||||
|
code blocks
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ नॉलेज चेक - इस पल का उपयोग खुले प्रश्नों के साथ छात्रों के ज्ञान को फैलाने के लिए करें
|
||||||
|
|
||||||
|
## [विषय २]
|
||||||
|
|
||||||
|
## [विषय ३]
|
||||||
|
|
||||||
|
🚀 चुनौती: परियोजना को बढ़ाने के लिए कक्षा में सहयोगी रूप से काम करने के लिए छात्रों के लिए एक चुनौती जोड़ें
|
||||||
|
|
||||||
|
वैकल्पिक: उपयुक्त होने पर पूर्ण पाठ के UI का स्क्रीनशॉट जोड़ें
|
||||||
|
|
||||||
|
## [पोस्ट-व्याख्यान प्रश्नोत्तरी](.github/post-lecture-quiz.hi.md)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
**बाकी असाइनमेंट [MM/YY]**: [असाइनमेंटका नाम](assignment.hi.md)
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
# [असाइनमेंटका नाम]
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
## शीर्ष
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| ------ | ----------- | -------- | -------------- |
|
||||||
|
| | | | |
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue