localizeflow[bot]
823724bfa3
|
4 months ago | |
|---|---|---|
| .. | ||
| solution | 8 months ago | |
| typing-game | 4 months ago | |
| README.md | 4 months ago | |
README.md
Įvykių valdomas programavimas - Sukurkite rašymo žaidimą
journey
title Jūsų Rašymo Žaidimo Kūrimo Kelionė
section Pagrindai
Planavimas žaidimo struktūros: 3: Studentas
Vartotojo sąsajos dizainas: 4: Studentas
HTML elementų nustatymas: 4: Studentas
section Funkcionalumas
Vartotojo įvesties tvarkymas: 4: Studentas
Laiko sekimas: 5: Studentas
Tikslumo skaičiavimas: 5: Studentas
section Funkcijos
Pridėti vizualinį grįžtamąjį ryšį: 5: Studentas
Įgyvendinti žaidimo logiką: 5: Studentas
Tobulinti patirtį: 5: Studentas
Įvadas
Tai, ką žino kiekvienas programuotojas, bet retai apie tai kalba: greitas rašymas yra supergalia! 🚀 Pagalvokite – kuo greičiau galite savo idėjas perkelti nuo smegenų į kodo redaktorių, tuo labiau gali tekėti jūsų kūrybiškumas. Tai tarsi tiesioginė linija tarp jūsų minčių ir ekrano.
pie title Žaidimo Funkcijos
"Realaus laiko atsiliepimai" : 25
"Veiklos stebėjimas" : 20
"Interaktyvi sąsaja" : 20
"Laikmačio sistema" : 15
"Citatos valdymas" : 10
"Rezultatų rodymas" : 10
Norite sužinoti vieną geriausių būdų patobulinti šį įgūdį? Atspėjote – mes kursime žaidimą!
flowchart LR
A[Žaidėjas pradeda žaidimą] --> B[Atsitiktinė citata rodoma]
B --> C[Žaidėjas rašo simbolius]
C --> D{Simbolis teisingas?}
D -->|Taip| E[Žalia paryškinimas]
D -->|Ne| F[Rausva paryškinimas]
E --> G[Atnaujinti tikslumą]
F --> G
G --> H{Citata baigta?}
H -->|Ne| C
H -->|Taip| I[Apskaičiuoti žodžius per minutę]
I --> J[Rodyti rezultatus]
J --> K[Žaisti dar?]
K -->|Taip| B
K -->|Ne| L[Žaidimas baigtas]
style A fill:#e1f5fe
style D fill:#fff3e0
style E fill:#e8f5e8
style F fill:#ffebee
style I fill:#f3e5f5
Sukurkime kartu nuostabų rašymo žaidimą!
Pasiruošę panaudoti visas tas JavaScript, HTML ir CSS žinias, kurias mokėtės? Mes kursime rašymo žaidimą, kuris iššūkį jums mestų su atsitiktinėmis legendinio detektyvo Šerloko Holmo citatomis. Žaidimas sekios, kaip greitai ir tiksliai sugebate rašyti – ir patikėkite manimi, tai yra labiau priklausomybę keliantis, nei galbūt manėte!
mindmap
root((Rašymo žaidimo kūrimas))
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
Ką reikės žinoti
flowchart TD
A[Vartotojo Veiksmas] --> B{Įvykio Tipas?}
B -->|Klavišo Paspaudimas| C[Klaviatūros Įvykis]
B -->|Mygtuko Paspaudimas| D[Pelės Įvykis]
B -->|Laikmatis| E[Laiko Įvykis]
C --> F[Patikrinti Simbolį]
D --> G[Pradėti/Atnaujinti Žaidimą]
E --> H[Atnaujinti Laikmatį]
F --> I{Teisinga?}
I -->|Taip| J[Paryškinti Žaliai]
I -->|Ne| K[Paryškinti Raudonai]
J --> L[Atnaujinti Rezultatą]
K --> L
L --> M[Patikrinti Žaidimo Būklę]
G --> N[Sugeneruoti Naują Citata]
H --> O[Rodyti Laiką]
M --> P{Žaidimas Baigtas?}
P -->|Taip| Q[Rodyti Rezultatus]
P -->|Ne| R[Tęsti Žaidimą]
style A fill:#e1f5fe
style F fill:#e8f5e8
style I fill:#fff3e0
style Q fill:#f3e5f5
Prieš pradėdami, įsitikinkite, kad esate susipažinę su šiomis sąvokomis (nesijaudinkite, jei reikės greitos peržiūros – mes visi taip buvome!):
- Teksto įvesties ir mygtukų valdiklių kūrimas
- CSS ir stilių nustatymas naudojant klases
- JavaScript pagrindai
- Masyvų kūrimas
- Atsitiktinio skaičiaus generavimas
- Einamo laiko gavimas
Jei kuris nors iš šių dalykų skamba kiek neryškiai, viskas gerai! Kartais geriausias būdas tvirtai įsisavinti yra įšokti į projektą ir spręsti problemas kelyje.
🔄 Pedagoginis patikrinimas
Pagrindų vertinimas: Prieš pradedant kūrimą, įsitikinkite, kad suprantate:
- ✅ Kaip veikia HTML formos ir įvesties elementai
- ✅ CSS klasės ir dinaminis stilizavimas
- ✅ JavaScript įvykių klausytojai ir apdorotojai
- ✅ Masyvų valdymas ir atsitiktinis pasirinkimas
- ✅ Laiko matavimas ir skaičiavimai
Greitas savitikrinimas: Ar galite paaiškinti, kaip šios sąvokos veikia kartu interaktyviame žaidime?
- Įvykiai suveikia, kai vartotojai sąveikauja su elementais
- Apdorotojai tvarko tuos įvykius ir atnaujina žaidimo būseną
- CSS suteikia vizualinį grįžtamąjį ryšį vartotojo veiksmams
- Laikmačiai leidžia matuoti našumą ir valdyti žaidimo eigą
quadrantChart
title Įrašymo žaidimo įgūdžių tobulinimas
x-axis Pradedantysis --> Ekspertas
y-axis Statinis --> Interaktyvus
quadrant-1 Pažangūs žaidimai
quadrant-2 Realiojo laiko programos
quadrant-3 Paprasti puslapiai
quadrant-4 Interaktyvūs svetainės
HTML Forms: [0.3, 0.2]
CSS Styling: [0.4, 0.3]
Event Handling: [0.7, 0.8]
Game Logic: [0.8, 0.9]
Performance Tracking: [0.9, 0.7]
Pradėkime kurti!
Rašymo žaidimo kūrimas naudojant įvykių valdomą programavimą
⚡ Ką galite padaryti per artimiausias 5 minutes
- Atidarykite naršyklės konsolę ir pabandykite klausytis klaviatūros įvykių su
addEventListener - Sukurkite paprastą HTML puslapį su įvesties lauku ir pabandykite aptikti rašymą
- Praktikuokitės manipuliuoti eilutėmis, lygindami įvestą tekstą su tikslu
- Eksperimentuokite su
setTimeout, kad suprastumėte laiko funkcijas
🎯 Ką galite pasiekti per šią valandą
- Atlikite po pamokos testą ir supraskite įvykių valdomą programavimą
- Sukurkite bazinę rašymo žaidimo versiją su žodžių tikrinimu
- Pridėkite vizualinį grįžtamąjį ryšį teisingam ir klaidingam rašymui
- Įgyvendinkite paprastą taškų sistemą, pagrįstą greičiu ir tikslumu
- Stilizuokite žaidimą su CSS, kad jis būtų vizualiai patrauklus
📅 Savaitės trukmės žaidimo kūrimas
- Užbaikite pilną rašymo žaidimą su visomis funkcijomis ir šlifavimu
- Pridėkite sunkumo lygius su skirtingo sudėtingumo žodžiais
- Įgyvendinkite vartotojų statistikos sekimą (WPM, tikslumas per laiką)
- Sukurkite garsinius efektus ir animacijas geresnei naudotojo patirčiai
- Padarykite žaidimą mobiliesiems pritaikytą prisilietimui
- Pasidalinkite žaidimu internete ir rinkite vartotojų atsiliepimus
🌟 Mėnesio trukmės interaktyvus kūrimas
- Sukurkite kelis žaidimus, tyrinėdami įvairias sąveikos schemas
- Išmokite apie žaidimų ciklus, būsenų valdymą ir našumo optimizavimą
- Prisidėkite prie atvirojo kodo žaidimų kūrimo projektų
- Įvaldykite pažangias laiko koncepcijas ir sklandžias animacijas
- Sukurkite portfolio, demonstruojantį įvairias interaktyvias programas
- Mokykite kitus, besidominčius žaidimų kūrimu ir vartotojo sąveika
🎯 Jūsų rašymo žaidimo meistriškumo laiko planas
timeline
title Žaidimų kūrimo mokymosi eiga
section Paruošimas (10 minučių)
Projekto struktūra: HTML pagrindas
: CSS stiliaus nustatymas
: JavaScript failo kūrimas
section Vartotojo sąsaja (20 minučių)
Interaktyvūs elementai: Įvesties laukai
: Mygtukų valdikliai
: Rodo plotai
: Reaguojantis išdėstymas
section Įvykių valdymas (25 minučių)
Vartotojo sąveika: Klaviatūros įvykiai
: Pelės įvykiai
: Realaus laiko atsiliepimai
: Būsenos valdymas
section Žaidimo logika (30 minučių)
Pagrindinės funkcijos: Citatos generavimas
: Simbolių palyginimas
: Tikslumo skaičiavimas
: Laikmačio įgyvendinimas
section Veiklos stebėsena (35 minučių)
Metrikos ir analizė: Žodžių per minutę skaičiavimas
: Klaidų fiksavimas
: Progreso vizualizavimas
: Rezultatų rodymas
section Tobulinimas ir patobulinimai (45 minučių)
Vartotojo patirtis: Vizualiniai atsiliepimai
: Garso efektai
: Animacijos
: Prieinamumo funkcijos
section Pažangios funkcijos (1 savaitė)
Išplėstinės funkcijos: Sunkumo lygiai
: Lyderių lentelės
: Individualios citatos
: Daugelio žaidėjų parinktys
section Profesionalūs įgūdžiai (1 mėnuo)
Žaidimų kūrimas: Veiklos optimizavimas
: Kodo architektūra
: Testavimo strategijos
: Diegimo modeliai
🛠️ Jūsų žaidimo kūrimo įrankių rinkinio santrauka
Baigę šį projektą, jūs būsitreipę:
- Įvykių valdomas programavimas: Reaguojančios vartotojo sąsajos, kurios prisitaiko prie įvesties
- Realiojo laiko grįžtamasis ryšys: Momentiniai vizualiniai ir našumo atnaujinimai
- Našumo matavimas: Tikslūs laiko ir taškų skaičiavimo mechanizmai
- Žaidimo būsenos valdymas: Programos eigos ir vartotojo patirties valdymas
- Interaktyvus dizainas: Įtraukiančios, priklausomybę sukeliančios vartotojo patirtys
- Šiuolaikiniai žiniatinklio API: Naršyklės galimybių panaudojimas turtingoms sąveikoms
- Prieinamumo modeliai: Įtraukus dizainas visiems vartotojams
Tikrojo pasaulio taikymai: Šie įgūdžiai tiesiogiai taikomi:
- Žiniatinklio programos: Bet kuri interaktyvi sąsaja ar valdymo skydelis
- Mokomoji programinė įranga: Mokymosi platformos ir įgūdžių vertinimo įrankiai
- Produktyvumo įrankiai: Teksto redaktoriai, IDE ir bendradarbiavimo programinė įranga
- Žaidimų industrija: Naršyklės žaidimai ir interaktyvi pramoga
- Mobilioji kūrimas: Prisilietimo pagrindu veikiančios sąsajos ir gestų valdymas
Kitas lygis: Jūs esate pasirengę tyrinėti pažangias žaidimų sistemas, realaus laiko daugelio žaidėjų sistemas ar sudėtingas interaktyvias programas!
Autoriai
Parašė su ♥️ Christopher Harrison
Atsakomybės apribojimas: Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą Co-op Translator. Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas gimtąja kalba laikomas autoritetingu šaltiniu. Esant svarbiai informacijai, rekomenduojama kreiptis į profesionalų vertėją. Mes neprisiimame atsakomybės už bet kokius nesusipratimus ar neteisingus interpretavimus, kylančius dėl šio vertimo naudojimo.