|
|
# การเขียนโปรแกรมแบบขับเคลื่อนด้วยเหตุการณ์ - สร้างเกมพิมพ์ข้อความ
|
|
|
|
|
|
```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
|
|
|
```
|
|
|
|
|
|
|
|
|
## สิ่งที่คุณต้องรู้
|
|
|
|
|
|
```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 DISCLAIMER START -->
|
|
|
**ข้อจำกัดความรับผิดชอบ**:
|
|
|
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษาอัตโนมัติ [Co-op Translator](https://github.com/Azure/co-op-translator) แม้เราจะพยายามรักษาความถูกต้อง แต่กรุณาทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมถือเป็นแหล่งข้อมูลที่ถูกต้องสำหรับข้อมูลสำคัญ การแปลโดยผู้เชี่ยวชาญมนุษย์จึงเป็นที่แนะนำ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |
