# កម្មវិធីប្លែកខ្លួនដោយព្រឹត្តិការណ៍ - សាងសង់ហ្គេមវាយអក្សរ ```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 -->|Yes| E[ពន្លូតបៃតង] D -->|No| F[ពន្លូតក្រហម] E --> G[ធ្វើបច្ចុប្បន្នភាពភាពត្រឹមត្រូវ] F --> G G --> H{សម្រង់បញ្ចប់ទេ?} H -->|No| C H -->|Yes| I[គណនាពាក្យក្នុងមួយនាទី] I --> J[បង្ហាញលទ្ធផល] J --> K[លេងម្ដងទៀតទេ?] K -->|Yes| B K -->|No| L[ហ្គេមបញ្ចប់] style A fill:#e1f5fe style D fill:#fff3e0 style E fill:#e8f5e8 style F fill:#ffebee style I fill:#f3e5f5 ``` > មកបង្កើតហ្គេមវាយអក្សរដ៏អស្ចារ្យរួមគ្នា! តើអ្នកបានត្រៀមខ្លួនសម្រាប់ដាក់ជំនាញ JavaScript, HTML និង CSS ដែលអ្នកបានរៀនមកហើយចូលប្រើប្រាស់ទេ? យើងនឹងសង់ហ្គេមវាយអក្សរមួយដែលនឹងបញ្ចេញការប្រកួតប្រជែងជាមួយអត្ថបទចម្លែកៗពីអ្នកស៊ើបអង្កេតដ៏ល្បី [Sherlock Holmes](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 [ប្រព័ន្ធសម្រេចបាន] ``` ![demo](../../../4-typing-game/images/demo.gif) ## អ្វីដែលអ្នកត្រូវដឹង ```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 form និងធាតុ input ដំណើរការ - ✅ ថ្នាក់ CSS និងការរៀបរយរចនាបថ dynamique - ✅ អ្នកស្ដាប់ព្រឹត្តិការណ៍ JavaScript និងអ្នកគ្រប់គ្រង - ✅ ការកែច្នៃអារេ និងជ្រើសយកចៃដន្យ - ✅ ការវាស់វេលា និងគណនា **ការប្រលងខ្លីផ្ទាល់ខ្លួន**៖ តើអ្នកអាចពន្យល់ថាគំនិតទាំងនេះធ្វើការ ដោយសហគ្រិនក្នុងហ្គេមប្រតិបត្តិការថែមទៀតដូចម្តេច? - **ព្រឹត្តិការណ៍** បញ្ចេញពេលអ្នកប្រើប្រាស់អង្គធាតុ - **អ្នកគ្រប់គ្រង** ដំណើរការព្រឹត្តិការណ៍និងធ្វើបច្ចុប្បន្នភាពស្ថានភាពហ្គេម - **CSS** ផ្តល់មតិយោបល់សម្រាប់សកម្មភាពអ្នកប្រើប្រាស់ - **ពេលវេលា** អនុញ្ញាតឲ្យវាស់វែងការប្រតិបត្តិ និងដំណើរការហ្គេម ```mermaid quadrantChart title ការអភិវឌ្ឍជំនាញហ្គេមវាយអក្សរ x-axis អ្នកចាប់ផ្តើម --> អ្នកជំនាញ y-axis ស្ថិតស្ថេរបាន --> មានអន្តរកម្ម quadrant-1 ហ្គេមកម្រិតខ្ពស់ quadrant-2 កម្មវិធីពេលវេលាពិត quadrant-3 ទំព័រមូលដ្ឋាន quadrant-4 វេបសាយមានអន្តរកម្ម 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] ``` ## មកសាងសង់រឿងនេះ! [ការបង្កើតហ្គេមវាយអក្សរដោយប្រើកម្មវិធីប្លែកខ្លួនដោយព្រឹត្តិការណ៍](./typing-game/README.md) ### ⚡ **អ្វីដែលអ្នកអាចធ្វើបានក្នុងរយៈពេល 5 នាទីក្រោយនេះ** - [ ] បើកផ្ទាំង console របស់អ្នក និងសាកល្បងស្តាប់ព្រឹត្តិការណ៍ក្តារចុចជាមួយ `addEventListener` - [ ] បង្កើតទំព័រ HTML សាមញ្ញមួយជាមួយប្រអប់បញ្ចូល និងសាកល្បងរកដំណឹងវាយអក្សរ - [ ] ប្រើប្រាស់ការបំលែងខ្សែអក្សរដោយប្រៀបធៀបអក្សរវាយនិងអក្សរគោលដៅ - [ ] សាកល្បង `setTimeout` ដើម្បីយល់ពីមុខងារពេលវេលា ### 🎯 **អ្វីដែលអ្នកអាចសម្រេចបានក្នុង​មួយម៉ោងនេះ** - [ ] បញ្ចប់ការប្រលងក្រោយមេរៀនហើយយល់ដឹងពីកម្មវិធីប្លែកខ្លួនដោយព្រឹត្តិការណ៍ - [ ] សាងសង់ជំនាន់មូលដ្ឋាននៃហ្គេមវាយអក្សរជាមួយការត្រួតពិនិត្យពាក្យ - [ ] បន្ថែមមតិយោបល់វិជ្ជមានសម្រាប់ការវាយត្រឹមត្រូវនិងមិនត្រឹមត្រូវ - [ ] អនុវត្តប្រព័ន្ធពិន្ទុសាមញ្ញដោយផ្អែកលើល្បឿននិងការត្រឹមត្រូវ - [ ] បំពាក់រចនាបថហ្គេមរបស់អ្នកជាមួយ CSS ដើម្បីធ្វើឲ្យវាស្រស់ស្អាត ### 📅 **ការអភិវឌ្ឍហ្គេមរយៈពេលមួយសប្តាហ៍របស់អ្នក** - [ ] បញ្ចប់ហ្គេមវាយអក្សរពេញលេញជាមួយមុខងារទាំងអស់ និងការសម្រួល - [ ] បន្ថែមកម្រិតភាពតឹងរឹងជាមួយភាពស្មុគស្មាញនៃពាក្យផ្សេងៗគ្នា - [ ] អនុវត្តការតាមដានស្ថិតិអ្នកប្រើប្រាស់ (WPM, ការត្រឹមត្រូវក្រោមពេលវេលា) - [ ] បង្កើតផលប៉ះពាល់សម្លេងនិងសកម្មភាពសម្រាប់បទពិសោធន៍ប្រើប្រាស់ល្អប្រសើរ - [ ] ធ្វើឲ្យហ្គេមរបស់អ្នកឆបគ្នាជាមួយទូរស័ព្ទដៃសំរាប់ការប៉ះប៉ោះ - [ ] ចែករំលែកហ្គេមរបស់អ្នកតាមអ៊ីនធឺណិត ហើយប្រមូលមតិយោបល់ពីអ្នកប្រើប្រាស់ ### 🌟 **ការអភិវឌ្ឍរបស់អ្នករយៈពេលមួយខែ** - [ ] សាងសង់ហ្គេមច្រើនៗស្វែងរក​គន្លងអន្តរកម្មផ្សេងៗគ្នា - [ ] រៀនអំពីរលកហ្គេម, ការគ្រប់គ្រងស្ថានភាព, និងការបង្កើនប្រសិទ្ធភាព - [ ] ចូលរួមខែក្នុងគម្រោងអភិវឌ្ឍហ្គេម Open source - [ ] ជំនាញខ្ពស់ក្នុងគន្លងពេលវេលា និងសកម្មភាពរលូន - [ ] បង្កើតពូត្វហ្វូលីយ៉ូបង្ហាញកម្មវិធីអន្តរកម្មច្រើន - [ ] ជាមេធាវីអូបង្គំអ្នកដទៃចាប់អារម្មណ៍ការអភិវឌ្ឍហ្គេម និងអន្តរកម្មអ្នកប្រើ ## 🎯 ពេលវេលាសម្រាប់មានជំនាញល្បឿនវាយអក្សររបស់អ្នក ```mermaid timeline title ការសិក្សាការអភិវឌ្ឍហ្គេម section ការតំឡើង (10 នាទី) រចនាសម្ព័ន្ធគម្រោង: មូលដ្ឋាន HTML : ការតំឡើងកែសម្រួល CSS : ការបង្កើតហ фай JavaScript section មុខងារអ្នកប្រើ (20 នាទី) ធាតុអន្ដរាគមន៍: បញ្ចូលទិន្នន័យ : គ្រប់គ្រងប៊ូតុង : តំបន់បង្ហាញ : គំរូឆ្លូតឆ្លាយ section ការកាន់កាប់ព្រឹត្តិការណ៍ (25 នាទី) អន្តរកម្មអ្នកប្រើ: ព្រឹត្តិការណ៍ក្តារចុច : ព្រឹត្តិការណ៍កណ្តុរ : មតិយោបល់ពេលវេលាពិត : ការគ្រប់គ្រងស្ថានភាព section តុល្យភាពហ្គេម (30 នាទី) មុខងារស្នូល: ការបង្កើតសម្រង់ : ការប្រៀបធៀបតួអក្សរ : ការគណនាការពេញចិត្ត : ការអនុវត្តម៉ោង section ការតាមដានប្រសិទ្ធភាព (35 នាទី) មាត្រដ្ឋាន និងវិភាគ: ការគណនាពាក្យក្នុងមួយនាទី : ការតាមដានកំហុស : ការបង្ហាញកំណត់ត្រាកើតឡើង : ការបង្ហាញលទ្ធផល section ការតុបតែង និងការកែលម្អ (45 នាទី) បទពិសោធន៍អ្នកប្រើ: មតិយោបល់មើលឃើញ : អ efectos សំឡេង : អនុភាពចលនា : មុខងារចូលដំណើរការ section មុខងារលំដាប់ខ្ពស់ (1 សប្តាហ៍) មុខងារពង្រីក: ដំណាក់កាលលំបាក : តារាងជើងឯក : សម្រង់ផ្ទាល់ខ្លួន : ជម្រើសលេងច្រើនលើ section ជំនាញវិជ្ជាជីវៈ (1 ខែ) ការអភិវឌ្ឍហ្គេម: ការបង្កើនប្រសិទ្ធភាព : សំណង់កូដ : ផែនការតេស្ត : រចនាប័ទ្មដាក់ឲ្យប្រើ ``` ### 🛠️ សង្ខេបឧបករណ៍អភិវឌ្ឍហ្គេមរបស់អ្នក បន្ទាប់ពីបញ្ចប់គម្រោងនេះ អ្នកនឹងមានជំនាញលើ៖ - **កម្មវិធីប្លែកខ្លួនដោយព្រឹត្តិការណ៍**: ចំណុចប្រទាក់ប្រតិកម្មដែលឆ្លើយតបទៅនឹងការបញ្ចូល - **មតិយោបល់ពេលវេលាចាំបាច់**: ការអាប់ដេតភ្លាមៗទាំងត្រឹមត្រូវនិងការបង្ហាញ - **ការវាស់វែងប្រសិទ្ធភាព**: ការវាស់វេលានិងប្រព័ន្ធពិន្ទុត្រឹមត្រូវ - **ការគ្រប់គ្រងស្ថានភាពហ្គេម**: គ្រប់គ្រងដំណើរការនិងបទពិសោធន៍អ្នកប្រើ - **រចនាបទអន្តរកម្ម**: បង្កើតបទពិសោធន៍ដែលគួរឲ្យចាប់អារម្មណ៍ និងបង្វិលរូប - **Web APIs សម័យថ្មី**: ប្រើប្រាស់សមត្ថភាពប្រេរស័ព្ទសម្រាប់អន្តរកម្មសម្បូរ - **លំនាំគាំទ្រអ្នកចូលដំណើរការ**: រចនាដើម្បីចូលរួមសំរាប់អ្នកប្រើគ្រប់រូប **កម្មវិធីដាក់ឲ្យប្រើបានជាក់ស្តែង**៖ ជំនាញទាំងនេះអាចប្រើប្រាស់ថ្ងៃនេះដូចជា៖ - **កម្មវិធីវែប**: ចំណុចប្រទាក់អន្តរកម្មឬផ្ទាំងតំណាងណាមួយ - **កម្មវិធីសិក្សា**: វេទិកាអប់រំ និងឧបករណ៍វាយតម្លៃជំនាញ - **ឧបករណ៍ផលិតកម្ម**: កម្មវិធីកែសម្រួលអត្ថបទ IDE និងកម្មវិធីសហការណ៍ - **ឧស្សាហកម្មហ្គេម**: ហ្គេមប្រេរស័ព្ទ និងកម្សាន្តអន្តរកម្ម - **អភិវឌ្ឍន៍លើទូរស័ព្ទដៃ**: ចំណុចប្រទាក់ប៉ះប៉ះ និងការរងចាំចលនា **កម្រិតបន្ទាប់**: អ្នកបានត្រៀមខ្លួនសម្រាប់ជ្រាបចូលក្នុងផ្នែកហ្គេមកម្រិតខ្ពស់ ប្រព័ន្ធពហុអ្នកលេងពេលវេលាពិត ឬកម្មវិធីអន្តរកម្មស្មុគស្មាញ! ## ខ្លឹមសារ​ប្រគល់កិត្តិយស បានសរសេរជាមួយ ♥️ ដោយ [Christopher Harrison](http://www.twitter.com/geektrainer) --- **ការបដិសេធ**៖ ឯកសារនេះបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI [Co-op Translator](https://github.com/Azure/co-op-translator)។ ខណៈពេលដែលយើងខំប្រឹងរកភាពត្រឹមត្រូវ សូមយល់ដឹងថាការបកប្រែដោយស្វ័យប្រវត្តិអាចមានកំហុស ឬភាពមិនត្រឹមត្រូវ។ ឯកសារដើមនៅភាសាម្ចាស់គួรถูกទុកចិត្តឲ្យជាឯកសារដែលមានអំណាច។ សម្រាប់ព័ត៌មានសំខាន់ ការប្រែដោយអ្នកជំនាញមនុស្សគឺត្រូវបានអញ្ជើញណែនាំ។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ច្រឡំ ឬការបកប្រែខុសពីការប្រើប្រាស់ការបកប្រែនេះឡើយ។