# การเขียนโปรแกรมแบบขับเคลื่อนด้วยเหตุการณ์ - สร้างเกมพิมพ์ข้อความ ```mermaid journey title การพัฒนาเกมพิมพ์ของคุณ section Foundation วางแผนโครงสร้างเกม: 3: Student ออกแบบส่วนติดต่อผู้ใช้: 4: Student ตั้งค่าองค์ประกอบ HTML: 4: Student section Functionality จัดการข้อมูลป้อนเข้าของผู้ใช้: 4: Student ติดตามเวลา: 5: Student คำนวณความแม่นยำ: 5: Student section Features เพิ่มข้อเสนอแนะทางภาพ: 5: Student ดำเนินตรรกะของเกม: 5: Student ขัดเกลาประสบการณ์: 5: Student ``` ## บทนำ นี่คือสิ่งที่นักพัฒนาทุกคนรู้ แต่ไม่ค่อยพูดถึง: การพิมพ์เร็วคือพลังวิเศษ! 🚀 ลองคิดดูสิ - ยิ่งคุณสามารถส่งไอเดียจากสมองสู่โปรแกรมแก้ไขโค้ดได้เร็วเท่าไร ความคิดสร้างสรรค์ของคุณก็จะไหลลื่นมากขึ้นเท่านั้น มันเหมือนกับมีกระแสตรงเชื่อมต่อระหว่างความคิดกับหน้าจอโดยตรง ```mermaid pie title คุณสมบัติเกม "ข้อเสนอแนะแบบเรียลไทม์" : 25 "การติดตามประสิทธิภาพ" : 20 "ส่วนต่อประสานผู้ใช้แบบโต้ตอบ" : 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 ``` ![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 - ✅ คลาส CSS และการตั้งค่าสไตล์แบบไดนามิค - ✅ ตัวฟังเหตุการณ์และตัวจัดการเหตุการณ์ใน 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 นาทีข้างหน้า** - [ ] เปิดคอนโซลเบราว์เซอร์และลองฟังเหตุการณ์คีย์บอร์ดด้วย `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 สัปดาห์) ฟังก์ชันขยาย: ระดับความยาก : กระดานผู้นำ : คำคมที่ปรับแต่งได้ : ตัวเลือกผู้เล่นหลายคน section ทักษะมืออาชีพ (1 เดือน) การพัฒนาเกม: การเพิ่มประสิทธิภาพ : สถาปัตยกรรมโค้ด : กลยุทธ์การทดสอบ : รูปแบบการปรับใช้ ``` ### 🛠️ สรุปชุดเครื่องมือพัฒนาเกมของคุณ หลังจากทำโครงการนี้เสร็จ คุณจะชำนาญใน: - **การเขียนโปรแกรมแบบขับเคลื่อนด้วยเหตุการณ์**: อินเทอร์เฟซตอบสนองที่ไวต่อการป้อนข้อมูล - **ฟีดแบ็คแบบเรียลไทม์**: การอัปเดตทางสายตาและการวัดประสิทธิภาพทันที - **การวัดประสิทธิภาพ**: ระบบจับเวลาและคะแนนที่แม่นยำ - **การจัดการสถานะเกม**: ควบคุมการไหลของแอปและประสบการณ์ผู้ใช้ - **การออกแบบแบบโต้ตอบ**: สร้างประสบการณ์ผู้ใช้ที่น่าดึงดูดและติดใจ - **Modern Web APIs**: ใช้ประโยชน์จากความสามารถของเบราว์เซอร์สำหรับการโต้ตอบที่หลากหลาย - **รูปแบบการเข้าถึง**: การออกแบบแบบครอบคลุมเพื่อผู้ใช้ทุกคน **การใช้งานในโลกจริง**: ทักษะเหล่านี้นำไปใช้ได้โดยตรงกับ: - **เว็บแอปพลิเคชัน**: อินเทอร์เฟซโต้ตอบหรือแดชบอร์ดใด ๆ - **ซอฟต์แวร์เพื่อการศึกษา**: แพลตฟอร์มการเรียนรู้และเครื่องมือประเมินทักษะ - **เครื่องมือเพิ่มประสิทธิภาพการทำงาน**: ตัวแก้ไขข้อความ, IDE และซอฟต์แวร์ร่วมมือ - **อุตสาหกรรมเกม**: เกมบนเบราว์เซอร์และความบันเทิงแบบโต้ตอบ - **การพัฒนาบนมือถือ**: อินเทอร์เฟซสัมผัสและการจัดการท่าทาง **ขั้นต่อไป**: คุณพร้อมที่จะสำรวจเฟรมเวิร์กเกมขั้นสูง, ระบบผู้เล่นหลายคนแบบเรียลไทม์ หรือแอปพลิเคชันโต้ตอบซับซ้อน! ## เครดิต เขียนด้วย ♥️ โดย [Christopher Harrison](http://www.twitter.com/geektrainer) --- **ข้อจำกัดความรับผิดชอบ**: เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษาอัตโนมัติ [Co-op Translator](https://github.com/Azure/co-op-translator) แม้เราจะพยายามรักษาความถูกต้อง แต่กรุณาทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมถือเป็นแหล่งข้อมูลที่ถูกต้องสำหรับข้อมูลสำคัญ การแปลโดยผู้เชี่ยวชาญมนุษย์จึงเป็นที่แนะนำ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้