You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
281 lines
23 KiB
281 lines
23 KiB
# ఈవెంట్-డ్రివెన్ ప్రోగ్రామింగ్ - ఒక టైపింగ్ గేమ్ తయారు చేయండి
|
|
|
|
```mermaid
|
|
journey
|
|
title మీ టైపింగ్ గేమ్ అభివృద్ధి ప్రయాణం
|
|
section మౌలికం
|
|
గేమ్ నిర్మాణం ప్రణాళిక: 3: Student
|
|
వినియోగదారుడు ఇంటర్ఫేస్ డిజైన్ చేయండి: 4: Student
|
|
HTML అంశాలను సెటప్ చేయండి: 4: Student
|
|
section ఫంక్షనాలిటీ
|
|
వినియోగదారు ఇన్పుట్ నిర్వహించండి: 4: Student
|
|
సమయాన్ని ట్రాక్ చేయండి: 5: Student
|
|
ఖచ్చితత్వాన్ని లెక్కించండి: 5: Student
|
|
section లక్షణాలు
|
|
విజువల్ ఫీడ్బ్యాక్ జోడించండి: 5: Student
|
|
గేమ్ లాజిక్ అమలు చేయండి: 5: Student
|
|
అనుభవాన్ని మెరుగుపరచండి: 5: Student
|
|
```
|
|
## పరిచయం
|
|
|
|
ప్రతి డెవలపర్ తెలుసుకున్న కానీ అరుదుగా మాట్లాడే విషయం ఇదే: వేగంగా టైప్ చేయటం ఒక సూపర్ పవర్! 🚀 దీ్ని గురించి ఆలోచించండి - మీరు మీ ఆలోచనలను మెదడుండి మీ కోడ్ ఎడిటర్ వరకు ఎంత వేగంగా తేవగలరో, అంతే మీ సృజనాత్మకత ఎక్కువగా ప్రవహిస్తుంది. ఇది మీ ఆలోచనలు మరియు స్క్రీన్ మధ్య ప్రత్యక్ష పైప్లైన్ లాగా ఉంటుంది.
|
|
|
|
```mermaid
|
|
pie title గేమ్ ఫీచర్లు
|
|
"సమయానుకూల అభిప్రాయం" : 25
|
|
"ప్రదర్శన ట్రాకింగ్" : 20
|
|
"ఇంటరాక్టివ్ UI" : 20
|
|
"టైమర్ సిస్టమ్" : 15
|
|
"కొటేషన్ నిర్వహణ" : 10
|
|
"ఫలితాల ప్రదర్శన" : 10
|
|
```
|
|
ఈ నైపుణ్యాన్ని మెరుగుపర్చడానికి ఉత్తమ మార్గాల్లో ఒకటి తెలుసుకోవాలా? మీరు ఊహించినట్టు - మనం ఒక గేమ్ తయారుచేయబోతున్నాము!
|
|
|
|
```mermaid
|
|
flowchart LR
|
|
A[ప్లేయర్ ఆట మొదలుపెట్టి] --> B[యాదృచ్ఛిక اقتباس ప్రదర్శించబడింది]
|
|
B --> C[ప్లేయర్ అక్షరాలు టైప్ చేస్తాడు]
|
|
C --> D{అక్షరం సరియైనదా?}
|
|
D -->|అవును| E[పచ్చటి హైలైట్]
|
|
D -->|కాదు| F[ఆవిరి హైలైట్]
|
|
E --> G[ఖచ్చితత్వాన్ని నవీకరించు]
|
|
F --> G
|
|
G --> H{اقتбاس పూర్తి కాలేదా?}
|
|
H -->|కాదు| C
|
|
H -->|అవును| I[వర్డ్ పర్ మినిట్ లెక్కించు]
|
|
I --> J[ఫలితాలను ప్రదర్శించు]
|
|
J --> K[మళ్ళీ ఆడు?]
|
|
K -->|అవును| B
|
|
K -->|కాదు| L[గేమ్ ముగిసింది]
|
|
|
|
style A fill:#e1f5fe
|
|
style D fill:#fff3e0
|
|
style E fill:#e8f5e8
|
|
style F fill:#ffebee
|
|
style I fill:#f3e5f5
|
|
```
|
|
> మనం కలిసి ఒక అద్భుతమైన టైపింగ్ గేమ్ సృష్టしましょう!
|
|
|
|
మీరు నేర్చుకుంటున్న JavaScript, HTML, మరియు CSS నైపుణ్యాలను ఉపయోగించడానికి సిద్ధంగా ఉన్నారా? మనం టైపింగ్ గేమ్ బిల్డ్ చేయబోతున్నాము, ఇది పුරాతన డిటెక్టివ్ [షెర్లాక్ హోమ్స్](https://en.wikipedia.org/wiki/Sherlock_Holmes) నుండి యాదృచ్ఛిక కోట్ లతో మీని సవాలు చేస్తుంది. ఈ గేమ్ మీరు ఎంత వేగంగా మరియు ఖచ్చితత్వంతో టైప్ చేయగలరో ట్రాక్ చేస్తుంది -そして నమ్మండి, ఇది మీరు అనుకున్నదానికంటే ఎక్కువ అలవాటు చేయనిది!
|
|
|
|
```mermaid
|
|
mindmap
|
|
root((টাইপিং গేమ్ উন্নয়ন))
|
|
User Interface
|
|
Input Elements
|
|
Visual Feedback
|
|
Responsive Design
|
|
Accessibility
|
|
Game Logic
|
|
Quote Selection
|
|
Timer Management
|
|
Accuracy Tracking
|
|
Score Calculation
|
|
Event Handling
|
|
Keyboard Input
|
|
Button Clicks
|
|
Real-time Updates
|
|
Game State Changes
|
|
Performance Metrics
|
|
Words Per Minute
|
|
Character Accuracy
|
|
Error Tracking
|
|
Progress Display
|
|
User Experience
|
|
Immediate Feedback
|
|
Clear Instructions
|
|
Engaging Content
|
|
Achievement System
|
|
```
|
|
|
|
|
|
## మీరు తెలుసుకోవలసిందు ఏమిటి
|
|
|
|
```mermaid
|
|
flowchart TD
|
|
A[యూజర్ చర్య] --> B{ఈవెంట్ రకం?}
|
|
B -->|సెలక్ట్ నొక్కడం| C[కీలిపడ事件]
|
|
B -->|బటన్ క్లిక్| D[మౌస్ ఈవెంట్]
|
|
B -->|టైమర్| E[సమయం ఈవెంట్]
|
|
|
|
C --> F[అక్షరం తనిఖీ చేయండి]
|
|
D --> G[గేమ్ ప్రారంభం/రీసెట్]
|
|
E --> H[టైమర్ అప్డేటు]
|
|
|
|
F --> I{సరిచేయాలా?}
|
|
I -->|అవును| J[గ్రీన్ హైలైట్]
|
|
I -->|కాదు| K[రెడ్ హైలైట్]
|
|
|
|
J --> L[స్కోర్ అప్డేటు]
|
|
K --> L
|
|
L --> M[గేమ్ స్థితి తనిఖీ]
|
|
|
|
G --> N[కొత్త కోట్ తయారు చేయండి]
|
|
H --> O[సమయం ప్రదర్శన]
|
|
|
|
M --> P{గేమ్ పూర్తయిందా?}
|
|
P -->|అవును| Q[ఫలితాలు చూపించు]
|
|
P -->|కాదు| R[గేమ్ కొనసాగించు]
|
|
|
|
style A fill:#e1f5fe
|
|
style F fill:#e8f5e8
|
|
style I fill:#fff3e0
|
|
style Q fill:#f3e5f5
|
|
```
|
|
మనం లోతుగా వెళ్లేముందు, మీరు ఈ ఆలోచనలతో సౌకర్యంగా ఉన్నారని నిర్ధారించుకోండి (తక్షణ హవా అవసరం అయితే భయపడకండి - మనందరం అలానే ఉన్నాము!):
|
|
|
|
- టెక్స్ట్ ఇన్పుట్ మరియు బటన్ నియంత్రణలను సృష్టించడం
|
|
- CSS మరియు తరగతుల ద్వారా శైలులను సెట్ చేయడం
|
|
- JavaScript ప్రారంభాలు
|
|
- అర్రే సృష్టించడం
|
|
- యాదృచ్ఛిక సంఖ్యను సృష్టించడం
|
|
- ప్రస్తుత సమయాన్ని పొందడం
|
|
|
|
ఇవి ఏదైనా కొంచెం మాత్రం నన్నయినట్లయితే, అది బాగానే ఉంది! కొన్ని సార్లు మీ జ్ఞానాన్ని బలపర్చడానికి ఉత్తమ మార్గం ప్రాజెక్టులో చొరబడడం మరియు దారిలో తెలుసుకోవడం.
|
|
|
|
### 🔄 **పాఠశాలాత్మక తనిఖీ**
|
|
**ఆధార మూల్యాంకనం**: అభివృద్ధి ప్రారంభించే ముందు, మీరు ఈ విషయాలను అర్థం చేసుకోవాలి:
|
|
- ✅ HTML ఫారమ్స్ మరియు ఇన్పుట్ ఎలిమెంట్లు ఎలా పనిచేస్తాయో
|
|
- ✅ CSS తరగతులు మరియు డైనమిక్ స్టైలింగ్
|
|
- ✅ JavaScript ఈవెంట్ లిసనర్లు మరియు హ్యాండ్లర్స్
|
|
- ✅ అర్రే మానిప్యులేషన్ మరియు యాదృచ్ఛిక ఎంపిక
|
|
- ✅ సమయ కొలత మరియు లెక్కలు
|
|
|
|
**త్వరిత స్వీయ పరీక్ష**: ఈ ఆలోచనలు ఇంటరాక్టివ్ గేమ్ లో ఎలా పనిచేస్తాయో మీరు వివరిస్తుందా?
|
|
- **ఈవెంట్లు** వినియోగదారులు ఎలిమెంట్లతో ఇంటరాక్ట్ చేసినప్పుడు ప్రారంభమవుతాయి
|
|
- **హ్యాండ్లర్స్** ఆ ఈవెంట్లను ప్రాసెస్ చేసి గేమ్ స్థితిని నవీకరిస్తాయి
|
|
- **CSS** వినియోగదారుల చర్యలకు విజువల్ ఫీడ్బ్యాక్ ఇస్తుంది
|
|
- **టైమింగ్** పనితీరు కొలత మరియు గేమ్ ప్రగతికి అనుమతిస్తుంది
|
|
|
|
```mermaid
|
|
quadrantChart
|
|
title టైపింగ్ గేమ్ నైపుణ్యాల అభివృద్ధి
|
|
x-axis ప్రారంభకుడు --> నిపుణుడు
|
|
y-axis స్థిరమైనది --> పరస్పర క్రియాత్మక
|
|
quadrant-1 సున్నిత గేమ్స్
|
|
quadrant-2 రియల్-టైమ్ యాప్స్
|
|
quadrant-3 ప్రాథమిక పేజీలు
|
|
quadrant-4 పరస్పర సైట్లు
|
|
|
|
HTML ఫారమ్స్: [0.3, 0.2]
|
|
CSS స్టైలింగ్: [0.4, 0.3]
|
|
ఈవెంట్ హ్యాండ్లింగ్: [0.7, 0.8]
|
|
గేమ్ లాజిక్: [0.8, 0.9]
|
|
పనితీరు ట్రాకింగ్: [0.9, 0.7]
|
|
```
|
|
## మనం ఈ విషయం సృష్టిద్దాం!
|
|
|
|
[ఈవెంట్ డ్రివెన్ ప్రోగ్రామింగ్ ఉపయోగించి టైపింగ్ గేమ్ సృష్టించడం](./typing-game/README.md)
|
|
|
|
### ⚡ **తరువాతి 5 నిమిషాల్లో మీరు చేయగలిగేది**
|
|
- [ ] మీ బ్రౌజర్ కన్సోల్ తెరిచి, `addEventListener` తో కీబోర్డ్ ఈవెంట్లను వినడం ప్రయత్నించండి
|
|
- [ ] ఒక సాదా HTML పేజీ సృష్టించి, ఇన్పుట్ ఫీల్డ్ తో టైపింగ్ గుర్తింపును పరీక్షించండి
|
|
- [ ] టైప్ చేసిన టెక్స్ట్ ను లక్ష్య టెక్స్ట్ తో పోల్చి స్ట్రింగ్ మానిప్యులేషన్ పరిపర్యవేక్షణ
|
|
- [ ] టైమింగ్ ఫంక్షన్లను అర్థం చేసుకోవడానికి `setTimeout` తో ప్రయోగించండి
|
|
|
|
### 🎯 **ఈ గంటలో మీరు సాధించగలిగేది**
|
|
- [ ] పాఠం తరువాత చేసుకునే క్విజ్ పూర్తి చేసి ఈవెంట్-డ్రివెన్ ప్రోగ్రామింగ్ అర్థం చేసుకోవడం
|
|
- [ ] పద ధ్రువీకరణతో టైపింగ్ గేమ్ యొక్క ప్రాథమిక వెర్షన్ నిర్మాణం
|
|
- [ ] సరైన మరియు తప్పు టైపింగ్ కోసం విజువల్ ఫీడ్బ్యాక్ జోడించడం
|
|
- [ ] వేగం మరియు ఖచ్చితత్వం ఆధారంగా సాధారణ స్కోరింగ్ వ్యవస్థ అమలు
|
|
- [ ] మీ గేమ్ దృష్టిని ఆకర్షించేలా CSS తో స్టైలింగ్
|
|
|
|
### 📅 **మీ వారాంతపు గేమ్ అభివృద్ధి**
|
|
- [ ] అన్ని ఫీచర్లతో పూర్తి టైపింగ్ గేమ్ తయారు చేయడం మరియు మెరుగుదల
|
|
- [ ] వేరు వేరు పద క్లిష్టతలతో కష్టం స్థాయిలను జోడించడం
|
|
- [ ] వినియోగదారుల గణాంకాలు ట్రాకింగ్ (WPM, సమయం తో ఖచ్చితత్వం)
|
|
- [ ] మెరుగైన వినియోగదారుల అనుభవం కోసం శబ్ద эффекты మరియు అనిమేషన్స్ సృష్టించడం
|
|
- [ ] మీ గేమ్ ను మొబైల్-ప్రతిస్పందకంగా చేసుకోవడం
|
|
- [ ] ఆన్లైన్లో మీ గేమ్ను పంచుకోవడం మరియు వినియోగదారుల స్పందన సేకరించడం
|
|
|
|
### 🌟 **మీ నెల పాటు ఇంటరాక్టివ్ అభివృద్ధి**
|
|
- [ ] వేరు వేరు ఇంటరాక్షన్ నమూనాలు ఇన్వెస్టిగేట్ చేసే మల్టిపుల్ గేమ్స్ సృష్టించడం
|
|
- [ ] గేమ్ లూప్లు, స్థితి నిర్వహణ, పనితీరు మెరుగుదల గురించి నేర్చుకోవడం
|
|
- [ ] ఓపెన్ సార్స్ గేమ్ అభివృద్ధి ప్రాజెక్టులకు సహకారం
|
|
- [ ] ప్రగతిషీల టైమింగ్ కాన్సెప్ట్స్ మరియు సజీవ అనిమేషన్లలో నైపుణ్యం పొందడం
|
|
- [ ] వివిధ ఇంటరాక్టివ్ అప్లికేషన్లను ప్రదర్శించే పోర్ట్ఫోలియో సృష్టించడం
|
|
- [ ] గేమ్ అభివృద్ధి మరియు వినియోగదారు ఇంటరాక్షన్ లో ఆసక్తి ఉన్నవారికి మెంటార్గా ఉండడం
|
|
|
|
## 🎯 మీ టైపింగ్ గేమ్ మాస్టరీ టైమ్లైన్
|
|
|
|
```mermaid
|
|
timeline
|
|
title గేమ్ డెవలప్మెంట్ నేర్చుకొనే ప్రగతిచి
|
|
|
|
section సెటప్ (10 నిమిషాలు)
|
|
ప్రాజెక్ట్ రचना: HTML మౌళికం
|
|
: CSS స్టైలింగ్ సెటప్
|
|
: JavaScript ఫైల్ సృష్టి
|
|
|
|
section యూజర్ ఇంటర్ఫేస్ (20 నిమిషాలు)
|
|
ఇంటరాక్టివ్ ఎలిమెంట్స్: ఇన్పుట్ ఫీల్డ్స్
|
|
: బటన్ నియంత్రణలు
|
|
: ప్రదర్శన ప్రాంతాలు
|
|
: స్పందనాత్మక లేఅవుట్
|
|
|
|
section ఈవెంట్ హ్యాండ్లింగ్ (25 నిమిషాలు)
|
|
యూజర్ ఇంటరాక్షన్: కీబోర్డ్ ఈవెంట్స్
|
|
: మౌస్ ఈవెంట్స్
|
|
: తక్షణ స్పందన
|
|
: స్థితి నిర్వహణ
|
|
|
|
section గేమ్ లాజిక్ (30 నిమిషాలు)
|
|
మూల కార్యాచరణ: కోట్ సృష్టి
|
|
: క్యారెక్టర్ సరిపోల్చడం
|
|
: ఖచ్చితత్వ లెక్కింపు
|
|
: టైమర్ అమలు
|
|
|
|
section పనితీరు ట్రాకింగ్ (35 నిమిషాలు)
|
|
ప్రమాణాలు & విశ్లేషణలు: WPM లెక్కింపు
|
|
: లోపాలని ట్రాక్ చేయడం
|
|
: ప్రగతి విజువలైజేషన్
|
|
: ఫలితాల ప్రదర్శన
|
|
|
|
section పాలిష్ & మెరుగుదల (45 నిమిషాలు)
|
|
యూజర్ అనుభవం: దృశ్య స్పందన
|
|
: శబ్ద ప్రభావాలు
|
|
: కార్యక్రమాలు
|
|
: ప్రాప్తి సౌకర్యాలు
|
|
|
|
section అభివృద్ధి గల ఫీచర్లు (1 వారంలో)
|
|
విస్తృత కార్యాచరణ: కష్టస్థాయిలు
|
|
: లీడర్బోర్డ్స్
|
|
: వ్యక్తిగత కోట్స్
|
|
: బహు-ప","\play\options
|
|
|
|
section ప్రొఫెషనల్ నైపుణ్యాలు (1 నెల)
|
|
గేమ్ డెవలప్మెంట్: పనితీరు ఆప్టిమైజేషన్
|
|
: కోడ్ వాస్తుశిల్పం
|
|
: పరీక్షా వ్యూహాలు
|
|
: మెయిన్ అమలు నమూనాలు
|
|
```
|
|
### 🛠️ మీ గేమ్ అభివృద్ధి టూల్కిట్ సంగ్రహం
|
|
|
|
ఈ ప్రాజెక్ట్ పూర్తి చేసిన తర్వాత, మీరు నేర్చుకుంటారు:
|
|
- **ఈవెంట్-డ్రివెన్ ప్రోగ్రామింగ్**: ఇన్పుట్కు ప్రతిస్పందించే యూజర్ ఇంటర్ఫేస్లు
|
|
- **రీయల్-టైమ్ ఫీడ్బ్యాక్**: తక్షణ విజువల్ మరియు పనితీరు అప్డేట్స్
|
|
- **పనితీరు కొలత**: ఖచ్చితమైన టైమింగ్ మరియు స్కోరింగ్ సిస్టమ్లు
|
|
- **గేమ్ స్థితి నిర్వహణ**: అనువర్తన ప్రవాహం మరియు వినియోగదారుల అనుభవం నియంత్రణ
|
|
- **ఇంటరాక్టివ్ డిజైన్**: ఆకట్టుకునే, అలవాటు పెడిచే వినియోగదారు అనుభవాల సృష్టి
|
|
- **ఆధునిక వెబ్ APIలు**: బ్రౌజర్ సామర్థ్యాలు వాడుకొని సమృద్ధి గల ఇంటరాక్షన్స్
|
|
- **ప్రాప్తి నమూనాలు**: అన్ని వినియోగదారుల కోసం సమానమైన డిజైన్
|
|
|
|
**వాస్తవ ప్రపంచ అనువర్తనాలు**: ఈ నైపుణ్యాలు ప్రత్యక్షంగా వర్తిస్తాయి:
|
|
- **వెబ్ అనువర్తనాలు**: ఏదైనా ఇంటరాక్టివ్ ఇంటర్ఫేస్ లేదా డాష్బోర్డు
|
|
- **విద్యా సాఫ్ట్ వేర్**: నేర్చుకునే వేదికలు మరియు నైపుణ్య మూల్యాంకన టూల్లు
|
|
- **ఉత్పాదకత టూల్లు**: టెక్ట్స్ ఎడిటర్లు, IDEలు మరియు సహకార సాఫ్ట్వేర్
|
|
- **గేమింగ్ పరిశ్రమ**: బ్రౌజర్ గేమ్స్ మరియు ఇంటరాక్టివ్ వినోదం
|
|
- **మొబైల్ అభివృద్ధి**: టచ్-ఆధారిత ఇంటర్ఫేస్లు మరియు ఇశారాలు నిర్వహణ
|
|
|
|
**తరువాతి స్థాయి**: మీరు అధునాతన గేమ్ ఫ్రేమ్వర్క్స్, రియల్-టైమ్ మల్టీ ప్లేయర్ సిస్టమ్స్, లేదా సంక్లిష్ట ఇంటరాక్టివ్ అప్లికేషన్లను అన్వేషించడానికి సిద్ధంగా ఉన్నారు!
|
|
|
|
## క్రెడిట్స్
|
|
|
|
♥️ తో రచించారు [Christopher Harrison](http://www.twitter.com/geektrainer)
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**అస్పష్టం**:
|
|
ఈ పత్రాన్ని AI అనువాద సేవ [Co-op Translator](https://github.com/Azure/co-op-translator) ఉపయోగించి అనువదించడం జరిగింది. మేము ఖచ్చితత్వానికి ప్రయత్నించినప్పటికీ, స్వయంచాలక అనువాదాల్లో తప్పులు లేదా అసమర్థతలు ఉండవచ్చు. స్థానిక భాషలో ఉన్న మౌలిక పత్రం అధికారిక మూలంగా పరిగణించాల్సినది. ముఖ్యమైన సమాచారానికి, నిపుణుల మానవ అనువాదం చేయించుకోవడం మంజూరు చేయబడింది. ఈ అనువాదం వాడకం వల్ల ఏర్పడే ఏవైనా అపార్థాలు లేదా తప్పుఅర్థాలు కోసం మేము బాధ్యత వహించము.
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |