Updated 4.typing-game to hi
This commit is contained in:
Sanjay
Родитель
834a93d809
Коммит
32affbd505
|
|
@ -1,47 +1,47 @@
|
|||
# Creating a game using events
|
||||
# इवेंट्स का उपयोग करके एक गेम बनाना
|
||||
|
||||
## Pre-Lecture Quiz
|
||||
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/21)
|
||||
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/21?loc=hi)
|
||||
|
||||
## Event driven programming
|
||||
## इवेंट संचालित प्रोग्रामिंग
|
||||
|
||||
When creating a browser based application, we provide a graphical user interface (GUI) for the user to use when interacting with what we've built. The most common way to interact with the browser is through clicking and typing in various elements. The challenge we face as a developer is we don't know when they're going to perform these operations!
|
||||
ब्राउज़र आधारित एप्लिकेशन बनाते समय, हम उपयोगकर्ता के लिए एक ग्राफिकल यूजर इंटरफेस (जीयूआई) प्रदान करते हैं, जो कि हमने जो बनाया है, उसके साथ इंटरैक्ट करने के लिए। ब्राउज़र के साथ बातचीत करने का सबसे आम तरीका विभिन्न तत्वों में क्लिक और टाइपिंग है। एक डेवलपर के रूप में हमारे सामने जो चुनौती है, वह यह है कि हम नहीं जानते कि वे कब इन ऑपरेशनों को करने जा रहे हैं!
|
||||
|
||||
[Event-driven programming](https://en.wikipedia.org/wiki/Event-driven_programming) is the name for the type of programming we need to do to create our GUI. If we break this phrase down a little bit, we see the core word here is **event**. [Event](https://www.merriam-webster.com/dictionary/event), according to Merriam-Webster, is defined as "something which happens". This describes our situation perfectly. We know something is going to happen for which we want to execute some code in response, but we don't know when it will take place.
|
||||
[ईवेंट संचालित प्रोग्रामिंग] (https://en.wikipedia.org/wiki/Event-driven_programming) प्रोग्रामिंग का प्रकार जो हमें अपने GUI को बनाने के लिए करने की आवश्यकता है। यदि हम इस वाक्यांश को थोड़ा तोड़ते हैं, तो हम यहाँ मुख्य शब्द ** ईवेंट ** देखते हैं। [ईवेंट](https://www.merriam-webster.com/dEDIA/event), मरियम-वेबस्टर के अनुसार, "कुछ ऐसा होता है" के रूप में परिभाषित किया गया है। यह हमारी स्थिति का पूरी तरह से वर्णन करता है। हम जानते हैं कि कुछ ऐसा होने जा रहा है जिसके लिए हम प्रतिक्रिया में कुछ कोड निष्पादित करना चाहते हैं, लेकिन हम नहीं जानते कि यह कब होगा।
|
||||
|
||||
The way we mark a section of code we want to execute is by creating a function. When we think about [procedural programming](https://en.wikipedia.org/wiki/Procedural_programming), functions are called in a specific order. This same thing is going to be true with event driven programming. The difference is **how** the functions will be called.
|
||||
जिस तरह से हम कोड के एक भाग को चिह्नित करते हैं जिसे हम निष्पादित करना चाहते हैं वह एक फ़ंक्शन बनाकर है। जब हम [प्रक्रियात्मक प्रोग्रामिंग] (https://en.wikipedia.org/wiki/Procedural_programming) के बारे में सोचते हैं, तो कार्यों को एक विशिष्ट क्रम में बुलाया जाता है। यही बात इवेंट संचालित प्रोग्रामिंग के साथ सही होने वाली है। अंतर **कैसे** कार्यों को कहा जाएगा।
|
||||
|
||||
To handle events (button clicking, typing, etc.), we register **event listeners**. An event listener is a function which listens for an event to occur and executes in response. Event listeners can update the UI, make calls to the server, or whatever else needs to be done in response to the user's action. We add an event listener by using [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener), and providing a function to execute.
|
||||
ईवेंट्स (बटन क्लिकिंग, टाइपिंग आदि) को संभालने के लिए, हम **ईवेंट श्रोताओं** को रजिस्टर करते हैं। एक ईवेंट श्रोता एक ऐसा फंक्शन है जो किसी घटना को होने के लिए सुनता है और प्रतिक्रिया में निष्पादित करता है। इवेंट श्रोता यूआई को अपडेट कर सकते हैं, सर्वर पर कॉल कर सकते हैं, या उपयोगकर्ता की कार्रवाई के जवाब में और कुछ भी किया जा सकता है। हम एक घटना श्रोता को [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) का उपयोग करके, और निष्पादित करने के लिए एक फ़ंक्शन प्रदान करके जोड़ते हैं।
|
||||
|
||||
> **NOTE:** It's worth highlighting there are numerous ways to create event listeners. You can use anonymous functions, or create named ones. You can use various shortcuts, like setting the `click` property, or using `addEventListener`. In our exercise we are going to focus on `addEventLister` and anonymous functions, as it's probably the most common technique web developers use. It's also the most flexible, as `addEventListener` works for all events, and the event name can be provided as a parameter.
|
||||
> **ध्यान दें:** यह ध्यान देने योग्य है कि घटना श्रोताओं को बनाने के कई तरीके हैं। आप अनाम फ़ंक्शंस का उपयोग कर सकते हैं, या नामित नाम बना सकते हैं। आप विभिन्न शॉर्टकट का उपयोग कर सकते हैं, जैसे कि `click` प्रॉपर्टी सेट करना, या `addEventListener` का उपयोग करना। हमारे अभ्यास में हम `addEventLister` और अनाम कार्यों पर ध्यान केंद्रित करने जा रहे हैं, क्योंकि यह संभवतः सबसे आम तकनीक वेब डेवलपर्स का उपयोग है। यह सबसे अधिक लचीली भी है, क्योंकि सभी घटनाओं के लिए `addEventListener` काम करता है, और इवेंट नाम को एक पैरामीटर के रूप में प्रदान किया जा सकता है।
|
||||
|
||||
### Common events
|
||||
### आम इवेंट्स
|
||||
|
||||
There are [dozens of events](https://developer.mozilla.org/docs/Web/Events) available for you to listen to when creating an application. Basically anything a user does on a page raises an event, which gives you a lot of power to ensure they get the experience you desire. Fortunately, you'll normally only need a small handful of events. Here's a few common ones (including the two we'll use when creating our game):
|
||||
एप्लिकेशन बनाते समय आपको सुनने के लिए [दर्जनों इवेंट](https://developer.mozilla.org/docs/Web/Events) उपलब्ध हैं। मूल रूप से एक पृष्ठ पर एक उपयोगकर्ता कुछ भी करता है, एक घटना को बढ़ाता है, जो आपको यह सुनिश्चित करने के लिए बहुत शक्ति देता है कि वे आपकी इच्छा का अनुभव प्राप्त करें। सौभाग्य से, आपको आम तौर पर केवल कुछ मुट्ठी भर घटनाओं की आवश्यकता होगी। यहां कुछ सामान्य बातें हैं (दोनों में से एक का उपयोग हम अपने खेल को बनाते समय करेंगे)
|
||||
|
||||
- [click](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event): The user clicked on something, typically a button or hyperlink
|
||||
- [contextmenu](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): The user clicked the right mouse button
|
||||
- [select](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event): The user highlighted some text
|
||||
- [input](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event): The user input some text
|
||||
- [click](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event): उपयोगकर्ता ने कुछ पर क्लिक किया, आमतौर पर एक बटन या हाइपरलिंक
|
||||
- [contextmenu](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): उपयोगकर्ता ने सही माउस बटन क्लिक किया
|
||||
- [select](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event): उपयोगकर्ता ने कुछ टेक्स्ट पर प्रकाश डाला
|
||||
- [input](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event): उपयोगकर्ता कुछ टेक्स्ट इनपुट करता है
|
||||
|
||||
## Creating the game
|
||||
## खेल का निर्माण
|
||||
|
||||
We are going to create a game to explore how events work in JavaScript. Our game is going to test a player's typing skill, which is one of the most underrated skills all developers should have. We should all be practicing our typing! The general flow of the game will look like this:
|
||||
हम जावास्क्रिप्ट में ईवेंट कैसे काम करते हैं, यह जानने के लिए एक गेम बनाने जा रहे हैं। हमारा खेल एक खिलाड़ी के टाइपिंग कौशल का परीक्षण करने जा रहा है, जो सभी डेवलपर्स के पास सबसे कम क्षमता वाले कौशल में से एक है। हम सभी को अपनी टाइपिंग का अभ्यास करना चाहिए! खेल का सामान्य प्रवाह इस तरह दिखेगा:
|
||||
|
||||
- Player clicks on start button and is presented with a quote to type
|
||||
- Player types the quote as quickly as they can in a textbox
|
||||
- As each word is completed, the next one is highlighted
|
||||
- If the player has a typo, the textbox is updated to red
|
||||
- When the player completes the quote, a success message is displayed with the elapsed time
|
||||
- प्लेयर स्टार्ट बटन पर क्लिक करता है और टाइप करने के लिए एक उद्धरण के साथ प्रस्तुत किया जाता है
|
||||
- प्लेयर टेक्स्ट बॉक्स में जितनी जल्दी हो सके उद्धरण टाइप करें
|
||||
- जैसा कि प्रत्येक शब्द पूरा हो गया है, अगले एक को हाइलाइट किया गया है
|
||||
- यदि खिलाड़ी के पास टाइपो है, तो टेक्स्टबॉक्स को लाल रंग में अपडेट किया जाता है
|
||||
- जब खिलाड़ी बोली को पूरा करता है, तो एक सफल संदेश बीते हुए समय के साथ प्रदर्शित होता है
|
||||
|
||||
Let's build our game, and learn about events!
|
||||
चलो हमारे खेल का निर्माण करें, और घटनाओं के बारे में जानें!
|
||||
|
||||
### File structure
|
||||
### फ़ाइल संरचना
|
||||
|
||||
We're going to need three total files: **index.html**, **script.js** and **style.css**. Let's start by setting those up to make life a little easier for us.
|
||||
हमें कुल तीन फ़ाइलों की आवश्यकता है: **index.html**, **script.js** और **style.css**. आइए उन लोगों की स्थापना करके शुरू करें, जो हमारे लिए जीवन को थोड़ा आसान बनाते हैं।
|
||||
|
||||
- Create a new folder for your work by opening a console or terminal window and issuing the following command:
|
||||
- कंसोल या टर्मिनल विंडो खोलकर और निम्न आदेश जारी करके अपने काम के लिए एक नया फ़ोल्डर बनाएँ:
|
||||
|
||||
```bash
|
||||
# Linux or macOS
|
||||
|
|
@ -51,29 +51,29 @@ mkdir typing-game && cd typing-game
|
|||
md typing-game && cd typing-game
|
||||
```
|
||||
|
||||
- Open Visual Studio Code
|
||||
- विजुअल स्टूडियो कोड खोलें
|
||||
|
||||
```bash
|
||||
code .
|
||||
```
|
||||
|
||||
- Add three files to the folder in Visual Studio Code with the following names:
|
||||
- विज़ुअल स्टूडियो कोड के फ़ोल्डर में निम्नलिखित नामों के साथ तीन फाइलें जोड़ें:
|
||||
- index.html
|
||||
- script.js
|
||||
- style.css
|
||||
|
||||
## Create the user interface
|
||||
## उपयोगकर्ता इंटरफ़ेस बनाएँ
|
||||
|
||||
If we explore the requirements, we know we're going to need a handful of elements on our HTML page. This is sort of like a recipe, where we need some ingredients:
|
||||
यदि हम आवश्यकताओं का पता लगाते हैं, तो हम जानते हैं कि हमें अपने HTML पृष्ठ पर मुट्ठी भर तत्वों की आवश्यकता है। यह एक रेसिपी की तरह है, जहाँ हमें कुछ सामग्री की आवश्यकता होती है:
|
||||
|
||||
- Somewhere to display the quote for the user to type
|
||||
- Somewhere to display any messages, like a success message
|
||||
- A textbox for typing
|
||||
- A start button
|
||||
- उपयोगकर्ता टाइप करने के लिए बोली प्रदर्शित करने के लिए कहीं
|
||||
- कहीं कोई संदेश प्रदर्शित करने के लिए, जैसे कोई सफलता संदेश
|
||||
- टाइपिंग के लिए एक टेक्स्टबॉक्स
|
||||
- एक स्टार्ट बटन
|
||||
|
||||
Each of those will need IDs so we can work with them in our JavaScript. We will also add references to the CSS and JavaScript files we're going to create.
|
||||
उनमें से प्रत्येक को आईडी की आवश्यकता होगी ताकि हम अपने जावास्क्रिप्ट में उनके साथ काम कर सकें। हम सीएसएस और जावास्क्रिप्ट फ़ाइलों के संदर्भ भी जोड़ेंगे जिन्हें हम बनाने जा रहे हैं।
|
||||
|
||||
Create a new file named **index.html**. Add the following HTML:
|
||||
**index.html** नामक एक नई फ़ाइल बनाएँ। निम्नलिखित HTML जोड़ें:
|
||||
|
||||
```html
|
||||
<!-- inside index.html -->
|
||||
|
|
@ -96,26 +96,26 @@ Create a new file named **index.html**. Add the following HTML:
|
|||
</html>
|
||||
```
|
||||
|
||||
### Launch the application
|
||||
### एप्लिकेशन लॉन्च करें
|
||||
|
||||
It's always best to develop iteratively to see how things look. Let's launch our application. There's a wonderful extension for Visual Studio Code called [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) which will both host your application locally and refresh the browser each time you save.
|
||||
यह देखना हमेशा सबसे अच्छा होता है कि कैसे चीजें देखें। चलो हमारे आवेदन का शुभारंभ करें। विजुअल स्टूडियो कोड के लिए एक अद्भुत एक्सटेंशन है जिसे [लाइव सर्वर](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) कहा जाता है, जो आपके आवेदन को सहेजने और हर बार सहेजने के लिए ब्राउज़र को ताज़ा करेगा।
|
||||
|
||||
- Install [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) by following the link and clicking **Install**
|
||||
- You will be prompted by the browser to open Visual Studio Code, and then by Visual Studio Code to perform the installation
|
||||
- Restart Visual Studio Code if prompted
|
||||
- Once installed, in Visual Studio Code, click Ctrl-Shift-P (or Cmd-Shift-P) to open the command pallate
|
||||
- Type **Live Server: Open with Live Server**
|
||||
- Live Server will start hosting your application
|
||||
- Open a browser and navigate to **https://localhost:5500**
|
||||
- You should now see the page you created!
|
||||
- लिंक का पालन करके और **स्थापित** पर क्लिक करके [लाइव सर्वर](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) स्थापित करें
|
||||
- आपको विज़ुअल स्टूडियो कोड खोलने के लिए ब्राउज़र द्वारा और फिर इंस्टॉलेशन करने के लिए विज़ुअल स्टूडियो कोड द्वारा संकेत दिया जाएगा
|
||||
- संकेत मिलने पर विज़ुअल स्टूडियो कोड को पुनरारंभ करें
|
||||
- विजुअल स्टूडियो कोड में स्थापित होने के बाद, कमांड पलेट खोलने के लिए Ctrl-Shift-P (या Cmd-Shift-P) पर क्लिक करें।
|
||||
- **Live Server: Open with Live Server** लिखे
|
||||
- लाइव सर्वर आपके एप्लिकेशन को होस्ट करना शुरू कर देगा
|
||||
- एक ब्राउज़र खोलें और **https://localhost:5500** पर नेविगेट करें
|
||||
- अब आपको आपके द्वारा बनाया गया पेज देखना चाहिए!
|
||||
|
||||
Let's add some functionality.
|
||||
चलो कुछ कार्यक्षमता जोड़ते हैं।
|
||||
|
||||
## Add the CSS
|
||||
## सीएसएस जोड़ें
|
||||
|
||||
With our HTML created, let's add the CSS for core styling. We need to highlight the word the player should be typing, and colorize the textbox if what they've typed is incorrect. We'll do this with two classes.
|
||||
हमारे HTML के निर्माण के साथ, मुख्य स्टाइलिंग के लिए CSS जोड़ते हैं। हमें उस शब्द को हाइलाइट करने की आवश्यकता है जो खिलाड़ी को टाइप करना चाहिए, और यदि उन्होंने टाइप किया है तो टेक्स्टबॉक्स को रंगीन करें। हम इसे दो वर्गों के साथ करेंगे।
|
||||
|
||||
Create a new file named **style.css** and add the following syntax.
|
||||
**style.css** नाम की एक नई फ़ाइल बनाएं और निम्न सिंटैक्स जोड़ें।
|
||||
|
||||
```css
|
||||
/* inside style.css */
|
||||
|
|
@ -129,36 +129,36 @@ Create a new file named **style.css** and add the following syntax.
|
|||
}
|
||||
```
|
||||
|
||||
✅ When it comes to CSS you can layout your page however you might like. Take a little time and make the page look more appealing:
|
||||
✅ जब यह सीएसएस की बात आती है तो आप अपने पेज को लेआउट कर सकते हैं लेकिन आप इसे पसंद कर सकते हैं थोड़ा समय लें और पृष्ठ को अधिक आकर्षक बनाएं:
|
||||
|
||||
- Choose a different font
|
||||
- Colorize the headers
|
||||
- Resize items
|
||||
- एक अलग फ़ॉन्ट चुनें
|
||||
- हेडर को कलर करें
|
||||
- आइटम का आकार बदलें
|
||||
|
||||
## JavaScript
|
||||
## जावास्क्रिप्ट
|
||||
|
||||
With our UI created, it's time to focus our attention on the JavaScript which will provide the logic. We're going to break this down into a handful of steps:
|
||||
हमारे यूआई के साथ, यह जावास्क्रिप्ट पर हमारा ध्यान केंद्रित करने का समय है जो तर्क प्रदान करेगा। हम इसे मुट्ठी भर चरणों में तोड़ने जा रहे हैं:
|
||||
|
||||
- [Create the constants](#add-the-constants)
|
||||
- [Event listener to start the game](#add-start-logic)
|
||||
- [Event listener to typing](#add-typing-logic)
|
||||
- [स्थिरांक बनाएँ]](#add-the-constants)
|
||||
- [खेल शुरू करने के लिए इवेंट श्रोता](#add-start-logic)
|
||||
- [टाइप करने के लिए ईवेंट श्रोता](#add-typing-logic)
|
||||
|
||||
But first, create a new file named **script.js**.
|
||||
लेकिन सबसे पहले, **script.js** नामक एक नई फ़ाइल बनाएं।
|
||||
|
||||
### Add the constants
|
||||
### स्थिरांक जोड़ें
|
||||
|
||||
We're going to need a few items to make our lives a little easier for programming. Again, similar to a recipe, here's what we'll need:
|
||||
प्रोग्रामिंग के लिए हमारे जीवन को थोड़ा आसान बनाने के लिए हमें कुछ वस्तुओं की आवश्यकता है। फिर, एक नुस्खा के समान, यहाँ हम क्या करेंगे:
|
||||
|
||||
- Array with the list of all quotes
|
||||
- Empty array to store all the words for the current quote
|
||||
- Space to store the index of the word the player is currently typing
|
||||
- The time the player clicked start
|
||||
- सभी उद्धरणों की सूची के साथ अरै
|
||||
- वर्तमान बोली के लिए सभी शब्दों को संग्रहीत करने के लिए खाली अरै
|
||||
- खिलाड़ी शब्द के सूचकांक को संग्रहीत करने के लिए स्थान वर्तमान में टाइप कर रहा है
|
||||
- जिस समय खिलाड़ी ने शुरुआत पर क्लिक किया
|
||||
|
||||
We're also going to want references to the UI elements:
|
||||
हम UI तत्वों के संदर्भ भी चाहते हैं:
|
||||
|
||||
- The textbox (**typed-value**)
|
||||
- The quote display (**quote**)
|
||||
- The message (**message**)
|
||||
- टेक्सटबॉक्स (**typed-value**)
|
||||
- क्वोट डिस्प्ले (**quote**)
|
||||
- मैसेज (**message**)
|
||||
|
||||
```javascript
|
||||
// inside script.js
|
||||
|
|
@ -183,21 +183,21 @@ const messageElement = document.getElementById('message');
|
|||
const typedValueElement = document.getElementById('typed-value');
|
||||
```
|
||||
|
||||
✅ Go ahead and add more quotes to your game
|
||||
✅ आगे बढ़ो और अपने खेल के लिए अधिक उद्धरण जोड़ें
|
||||
|
||||
> **NOTE:** We can retrieve the elements whenever we want in code by using `document.getElementById`. Because of the fact we're going to refer to these elements on a regular basis we're going to avoid typos with string literals by using constants. Frameworks such as [Vue.js](https://vuejs.org/) or [React](https://reactjs.org/) can help you better manage centralizing your code.
|
||||
> **नोट:** हम तत्वों को पुनः प्राप्त कर सकते हैं जब भी हम `document.getElementById` का उपयोग करके कोड में चाहते हैं। इस तथ्य के कारण कि हम नियमित रूप से इन तत्वों को संदर्भित करने जा रहे हैं, हम स्थिरांक के साथ स्थिरांक का उपयोग करके स्थिरांक से बचने जा रहे हैं। फ्रेमवर्क जैसे कि [Vue.js](https://vuejs.org/) या [रिएक्ट](https://reactjs.org/) आपको अपने कोड को बेहतर बनाने में मदद कर सकते हैं।
|
||||
|
||||
Take a minute to watch a video on using `const`, `let` and `var`
|
||||
`const`,` let` और `var` का उपयोग करके वीडियो देखने के लिए एक मिनट का समय लें
|
||||
|
||||
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Types of variables")
|
||||
[](https://youtube.com/watch?v=JNIXfGiDWM8 "चर के प्रकार")
|
||||
|
||||
> Click the image above for a video about variables.
|
||||
> चरों के बारे में वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
|
||||
|
||||
### Add start logic
|
||||
### प्रारंभ तर्क जोड़ें
|
||||
|
||||
To begin the game, the player will click on start. Of course, we don't know when they're going to click start. This is where an [event listener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) comes into play. An event listener will allow us to listen for something to occur (an event) and execute code in response. In our case, we want to execute code when the user clicks on start.
|
||||
गेम शुरू करने के लिए, प्लेयर स्टार्ट पर क्लिक करेगा। बेशक, हम नहीं जानते कि वे कब शुरू करने जा रहे हैं। यह वह जगह है जहाँ एक [इवेंट श्रोता](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) खेल में आता है। एक ईवेंट श्रोता हमें कुछ होने (किसी घटना) के लिए सुनने और प्रतिक्रिया में कोड निष्पादित करने की अनुमति देगा। हमारे मामले में, हम उस कोड को निष्पादित करना चाहते हैं जब उपयोगकर्ता प्रारंभ पर क्लिक करता है।
|
||||
|
||||
When the user clicks **start**, we need to select a quote, setup the user interface, and setup tracking for the current word and timing. Below is the JavaScript you'll need to add; we discuss it just after the script block.
|
||||
जब उपयोगकर्ता **प्रारंभ** पर क्लिक करता है, तो हमें एक उद्धरण का चयन करना होगा, उपयोगकर्ता इंटरफ़ेस सेटअप करना और वर्तमान शब्द और समय के लिए सेटअप ट्रैकिंग करना होगा। नीचे दिए गए जावास्क्रिप्ट को आपको जोड़ना होगा; हम स्क्रिप्ट ब्लॉक के ठीक बाद इस पर चर्चा करते हैं।
|
||||
|
||||
```javascript
|
||||
// at the end of script.js
|
||||
|
|
@ -232,27 +232,27 @@ document.getElementById('start').addEventListener('click', () => {
|
|||
});
|
||||
```
|
||||
|
||||
Let's break down the code!
|
||||
चलो कोड को तोड़ते है
|
||||
|
||||
- Setup the word tracking
|
||||
- Using [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) and [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) allows us to randomly select a quote from the `quotes` array
|
||||
- We convert the `quote` into an array of `words` so we can track the word the player is currently typing
|
||||
- `wordIndex` is set to 0, since the player will start on the first word
|
||||
- Setup the UI
|
||||
- Create an array of `spanWords`, which contains each word inside a `span` element
|
||||
- This will allow us to highlight the word on the display
|
||||
- `join` the array to create a string which we can use to update the `innerHTML` on `quoteElement`
|
||||
- This will display the quote to the player
|
||||
- Set the `className` of the first `span` element to `highlight` to highlight it as yellow
|
||||
- Clean the `messageElement` by setting `innerText` to `''`
|
||||
- Setup the textbox
|
||||
- Clear the current `value` on `typedValueElement`
|
||||
- Set the `focus` to `typedValueElement`
|
||||
- Start the timer by calling `getTime`
|
||||
- ट्रैकिंग शब्द सेट करें
|
||||
- [math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) और [math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) का उपयोग करके हम `quotes` सरणी से एक उद्धरण का चयन करने के लिए अनुमति देते हैं।
|
||||
- हम `quote` को `words` की एक सरणी में बदलते हैं, इसलिए हम उस खिलाड़ी को ट्रैक कर सकते हैं जो खिलाड़ी वर्तमान में टाइप कर रहा है
|
||||
- `wordIndex` 0 पर सेट है, क्योंकि खिलाड़ी पहले शब्द पर शुरू होगा
|
||||
- यूआई सेटअप करें
|
||||
- `spanWords` की एक सरणी बनाएं, जिसमें `span` तत्व के अंदर प्रत्येक शब्द होता है
|
||||
- यह हमें प्रदर्शन पर शब्द को उजागर करने की अनुमति देगा
|
||||
- एक स्ट्रिंग बनाने के लिए `join` करने के लिए अरै का उपयोग करें जिसे हम `quoteElement` पर `innerHTML` अपडेट करने के लिए उपयोग कर सकते हैं
|
||||
- यह खिलाड़ी को बोली प्रदर्शित करेगा
|
||||
- पीले रंग के रूप में हाइलाइट करने के लिए `highlight` के लिए पहले `span` तत्व का `className` सेट करें
|
||||
- `messageElement` को `''` पर सेट करके `messageElement` को साफ करें
|
||||
- टेक्स्टबॉक्स सेट करें
|
||||
- `typedValueElement` पर वर्तमान `value` को साफ़ करें
|
||||
- `focus` को 'typedValueElement' पर सेट करें
|
||||
- `getTime` कहकर टाइमर शुरू करें
|
||||
|
||||
### Add typing logic
|
||||
### टाइपिंग तर्क जोड़ें
|
||||
|
||||
As the player types, an `input` event will be raised. This event listener will check to ensure the player is typing the word correctly, and handle the current status of the game. Returning to **script.js**, add the following code to the end. We will break it down afterwards.
|
||||
खिलाड़ी के प्रकार के रूप में, एक `input` घटना को उठाया जाएगा। यह ईवेंट श्रोता यह सुनिश्चित करने के लिए जांच करेगा कि खिलाड़ी शब्द को सही ढंग से टाइप कर रहा है, और गेम की वर्तमान स्थिति को संभाल सकता है। **script.js** पर लौटकर, निम्नलिखित कोड को अंत में जोड़ें। हम इसे बाद में तोड़ देंगे।
|
||||
|
||||
```javascript
|
||||
// at the end of script.js
|
||||
|
|
@ -291,49 +291,49 @@ typedValueElement.addEventListener('input', () => {
|
|||
});
|
||||
```
|
||||
|
||||
Let's break down the code! We start by grabbing the current word and the value the player has typed thus far. Then we have waterfall logic, where we check if the quote is complete, the word is complete, the word is correct, or (finally), if there is an error.
|
||||
कोड को तोड़ दो! हम वर्तमान शब्द को पकड़कर शुरू करते हैं और खिलाड़ी ने इस प्रकार अब तक टाइप किया है। फिर हमारे पास झरना तर्क है, जहां हम जांचते हैं कि क्या उद्धरण पूरा है, शब्द पूरा है, शब्द सही है, या (अंत में), अगर कोई त्रुटि है।
|
||||
|
||||
- Quote is complete, indicated by `typedValue` being equal to `currentWord`, and `wordIndex` being equal to one less than the `length` of `words`
|
||||
- Calculate `elapsedTime` by subtracting `startTime` from the current time
|
||||
- Divide `elapsedTime` by 1,000 to convert from milliseconds to seconds
|
||||
- Display a success message
|
||||
- Word is complete, indicated by `typedValue` ending with a space (the end of a word) and `typedValue` being equal to `currentWord`
|
||||
- Set `value` on `typedElement` to be `''` to allow for the next word to be typed
|
||||
- Increment `wordIndex` to move to the next word
|
||||
- Loop through all `childNodes` of `quoteElement` to set `className` to `''` to revert to default display
|
||||
- Set `className` of the current word to `highlight` to flag it as the next word to type
|
||||
- Word is currently typed correctly (but not complete), indicated by `currentWord` started with `typedValue`
|
||||
- Ensure `typedValueElement` is displayed as default by clearing `className`
|
||||
- If we made it this far, we have an error
|
||||
- Set `className` on `typedValueElement` to `error`
|
||||
- उद्धरण पूर्ण है, `typedValue` द्वारा `currentWord` के बराबर होने का संकेत दिया गया है, और `wordIndex` को `words` की `length` से कम के बराबर किया जा रहा है
|
||||
- वर्तमान समय से `startTime` घटाकर` elapsedTime` की गणना करें
|
||||
- मिलीसेकंड से सेकंड में परिवर्तित करने के लिए `elapsedTime` को 1,000 से विभाजित करें
|
||||
- एक सफलता संदेश प्रदर्शित करें
|
||||
- शब्द पूरा हो गया है, जो `typedValue` द्वारा एक स्थान के साथ समाप्त होने का संकेत है (एक शब्द का अंत) और `typedValue` को` currentWord` के बराबर किया जा रहा है
|
||||
- अगले शब्द को टाइप करने की अनुमति देने के लिए `typedElement` to `''` पर `value` सेट करें
|
||||
- वृद्धि `wordIndex` अगले शब्द पर ले जाने के लिए
|
||||
- प्रदर्शन को फिर से प्रदर्शित करने के लिए `className` को `''` के लिए `quoteElement` के सभी `childNodes` के माध्यम से लूप करें
|
||||
- वर्तमान शब्द के `className` को टाइप करने के लिए अगले शब्द के रूप में फ़्लैग करने के लिए `highlight` पर सेट करें
|
||||
- वर्तमान में शब्द सही ढंग से टाइप किया गया है (लेकिन पूरा नहीं), `currentWord` द्वारा इंगित `typedValue` से शुरू हुआ
|
||||
- सुनिश्चित करें कि `typeNalueElement` को `className` को क्लीयर करके डिफ़ॉल्ट के रूप में प्रदर्शित किया गया है
|
||||
- यदि हमने इसे दूर किया है, तो हमारे पास एक त्रुटि है
|
||||
- `className` पर `typedValueElement` से `error` सेट करे
|
||||
|
||||
## Test your application
|
||||
## अपने ऐप्लकैशनको टेसेट करे
|
||||
|
||||
You've made it to the end! The last step is to ensure our application works. Give it a shot! Don't worry if there are errors; **all developers** have errors. Examine the messages and debug as needed.
|
||||
आपने इसे अंत तक बना दिया है! अंतिम चरण हमारे आवेदन कार्यों को सुनिश्चित करना है। इसे आजमा कर देखें! अगर वहाँ त्रुटियां हैं तो चिंता न करें; **सभी डेवलपर्स** में त्रुटियां हैं। संदेशों की जांच करें और आवश्यकतानुसार डिबग करें।
|
||||
|
||||
Click on **start**, and start typing away! It should look a little like the animation we saw before.
|
||||
**start** पर क्लिक करें, और दूर टाइप करना शुरू करें! यह हमें पहले देखे गए एनीमेशन की तरह दिखना चाहिए।
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Challenge
|
||||
## 🚀 चुनौती
|
||||
|
||||
Add more functionality
|
||||
अधिक कार्यक्षमता जोड़ें
|
||||
|
||||
- Disable the `input` event listener on completion, and re-enable it when the button is clicked
|
||||
- Disable the textbox when the player completes the quote
|
||||
- Display a modal dialog box with the success message
|
||||
- Store high scores using [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
|
||||
- पूर्ण होने पर `input` ईवेंट श्रोता को अक्षम करें, और बटन पर क्लिक करने पर इसे फिर से सक्षम करें
|
||||
- खिलाड़ी द्वारा बोली पूरा करने पर टेक्स्टबॉक्स को अक्षम करें
|
||||
- सफलता संदेश के साथ एक मॉडल संवाद बॉक्स प्रदर्शित करें
|
||||
- [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) का उपयोग करके उच्च स्कोर स्टोर करें
|
||||
|
||||
## Post-Lecture Quiz
|
||||
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/22)
|
||||
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/22?loc=hi)
|
||||
|
||||
## Review & Self Study
|
||||
## समीक्षा और स्व अध्ययन
|
||||
|
||||
Read up on [all the events available](https://developer.mozilla.org/en-US/docs/Web/Events) to the developer via the web browser, and consider the scenarios in which you would use each one.
|
||||
वेब ब्राउज़र के माध्यम से डेवलपर के लिए [उपलब्ध सभी घटनाओं](https://developer.mozilla.org/en-US/docs/Web/Events) को पढ़ें, और उन परिदृश्यों पर विचार करें जिनमें आप प्रत्येक का उपयोग करेंगे।
|
||||
|
||||
## Assignment
|
||||
## असाइनमेंट
|
||||
|
||||
[Create a new keyboard game](assignment.md)
|
||||
[एक नया कीबोर्ड गेम बनाए](assignment.hi.md)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
# एक नया कीबोर्ड गेम बनाएं
|
||||
|
||||
## अनुदेश
|
||||
|
||||
एक छोटा गेम बनाएं जो कार्यों को करने के लिए कीबोर्ड इवेंट का उपयोग करता है। यह एक अलग तरह का टाइपिंग गेम या एक आर्ट टाइप गेम हो सकता है जो कि कीस्ट्रोक पर स्क्रीन के लिए पिक्सल को पेंट करता है। रचनात्मक हो!
|
||||
|
||||
## शीर्ष
|
||||
|
||||
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||
| -------- | ------------------------ | ------------------------ | ----------------- |
|
||||
| | एक पूर्ण खेल प्रस्तुत किया गया है | खेल बहुत कम है | खेल में बगस हैं |
|
||||
| |
|
||||
Загрузка…
Ссылка в новой задаче