|
|
# Προγραμματισμός με Βάση τα Γεγονότα - Δημιουργήστε ένα Παιχνίδι Πληκτρολόγησης
|
|
|
|
|
|
```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
|
|
|
- Δημιουργία πίνακα
|
|
|
- Δημιουργία τυχαίου αριθμού
|
|
|
- Λήψη της τρέχουσας ώρας
|
|
|
|
|
|
Αν κάτι από αυτά σου φαίνεται λίγο σκουριασμένο, δεν πειράζει καθόλου! Μερικές φορές ο καλύτερος τρόπος να εδραιώσεις τη γνώση σου είναι να πηδήξεις σε ένα project και να μάθεις στην πορεία.
|
|
|
|
|
|
### 🔄 **Παιδαγωγικός Έλεγχος**
|
|
|
**Αξιολόγηση Βάσης**: Πριν ξεκινήσεις την ανάπτυξη, βεβαιώσου ότι κατανοείς:
|
|
|
- ✅ Πώς λειτουργούν οι 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, ακρίβεια με την πάροδο του χρόνου)
|
|
|
- [ ] Δημιούργησε ηχητικά εφέ και κινούμενα σχέδια για καλύτερη εμπειρία χρήστη
|
|
|
- [ ] Κάνε το παιχνίδι σου προσαρμοστικό για κινητές συσκευές αφής
|
|
|
- [ ] Μοιράσου το παιχνίδι σου online και συγκέντρωσε σχόλια από χρήστες
|
|
|
|
|
|
### 🌟 **Η Μηνιαία Διαδραστική Ανάπτυξή σου**
|
|
|
- [ ] Δημιούργησε πολλαπλά παιχνίδια εξερευνώντας διαφορετικά μοτίβα αλληλεπίδρασης
|
|
|
- [ ] Μάθε για game loops, διαχείριση κατάστασης, και βελτιστοποίηση επιδόσεων
|
|
|
- [ ] Συνεισέφερε σε ανοιχτού κώδικα projects ανάπτυξης παιχνιδιών
|
|
|
- [ ] Κατέκτησε προχωρημένες έννοιες χρονισμού και ομαλών animations
|
|
|
- [ ] Δημιούργησε ένα portfolio που παρουσιάζει διάφορες διαδραστικές εφαρμογές
|
|
|
- [ ] Καθοδήγησε άλλους που ενδιαφέρονται για την ανάπτυξη παιχνιδιών και την αλληλεπίδραση με χρήστες
|
|
|
|
|
|
## 🎯 Το Χρονοδιάγραμμά Σοου για την Ικανοποίηση στο Παιχνίδι Πληκτρολόγησης
|
|
|
|
|
|
```mermaid
|
|
|
timeline
|
|
|
title Εξέλιξη Μάθησης Ανάπτυξης Παιχνιδιών
|
|
|
|
|
|
section Εγκατάσταση (10 λεπτά)
|
|
|
Δομή Έργου: Βάση HTML
|
|
|
: Ρύθμιση στυλ CSS
|
|
|
: Δημιουργία αρχείου JavaScript
|
|
|
|
|
|
section Διεπαφή Χρήστη (20 λεπτά)
|
|
|
Διαδραστικά Στοιχεία: Πεδία εισαγωγής
|
|
|
: Κουμπιά ελέγχου
|
|
|
: Περιοχές προβολής
|
|
|
: Ανταποκρινόμενη διάταξη
|
|
|
|
|
|
section Διαχείριση Γεγονότων (25 λεπτά)
|
|
|
Αλληλεπίδραση Χρήστη: Γεγονότα πληκτρολογίου
|
|
|
: Γεγονότα ποντικιού
|
|
|
: Ανατροφοδότηση σε πραγματικό χρόνο
|
|
|
: Διαχείριση κατάστασης
|
|
|
|
|
|
section Λογική Παιχνιδιού (30 λεπτά)
|
|
|
Βασική Λειτουργικότητα: Δημιουργία αποσπασμάτων
|
|
|
: Σύγκριση χαρακτήρων
|
|
|
: Υπολογισμός ακρίβειας
|
|
|
: Υλοποίηση χρονομέτρου
|
|
|
|
|
|
section Παρακολούθηση Απόδοσης (35 λεπτά)
|
|
|
Μετρικές & Αναλύσεις: Υπολογισμός WPM
|
|
|
: Παρακολούθηση σφαλμάτων
|
|
|
: Οπτικοποίηση προόδου
|
|
|
: Προβολή αποτελεσμάτων
|
|
|
|
|
|
section Βελτίωση & Εμπλουτισμός (45 λεπτά)
|
|
|
Εμπειρία Χρήστη: Οπτική ανατροφοδότηση
|
|
|
: Ηχητικά εφέ
|
|
|
: Κινήσεις
|
|
|
: Λειτουργίες προσβασιμότητας
|
|
|
|
|
|
section Προχωρημένες Λειτουργίες (1 εβδομάδα)
|
|
|
Επεκταμένη Λειτουργικότητα: Επίπεδα δυσκολίας
|
|
|
: Πίνακες κατάταξης
|
|
|
: Προσαρμοσμένα αποσπάσματα
|
|
|
: Επιλογές πολλών παικτών
|
|
|
|
|
|
section Επαγγελματικές Δεξιότητες (1 μήνας)
|
|
|
Ανάπτυξη Παιχνιδιών: Βελτιστοποίηση απόδοσης
|
|
|
: Αρχιτεκτονική κώδικα
|
|
|
: Στρατηγικές δοκιμών
|
|
|
: Πρότυπα ανάπτυξης
|
|
|
```
|
|
|
### 🛠️ Πηγή Εργαλείων Ανάπτυξης Παιχνιδιού
|
|
|
|
|
|
Μετά την ολοκλήρωση αυτού του έργου, θα έχεις μάθει:
|
|
|
- **Προγραμματισμός με Βάση τα Γεγονότα**: Ευσύχναστες διεπαφές χρήστη που αντιδρούν σε εισόδους
|
|
|
- **Άμεση Ανατροφοδότηση**: Απρόσκοπτες οπτικές και επιδόσεις ενημερώσεις
|
|
|
- **Μέτρηση Απόδοσης**: Ακριβείς μετρήσεις χρόνου και συστήματα βαθμολόγησης
|
|
|
- **Διαχείριση Κατάστασης Παιχνιδιού**: Έλεγχος ροής εφαρμογής και εμπειρίας χρήστη
|
|
|
- **Διαδραστικός Σχεδιασμός**: Δημιουργία ελκυστικών, εθιστικών εμπειριών χρήστη
|
|
|
- **Σύγχρονα Web APIs**: Αξιοποίηση δυνατοτήτων περιηγητή για πλούσιες αλληλεπιδράσεις
|
|
|
- **Προτύπα Προσβασιμότητας**: Συμπεριληπτικός σχεδιασμός για όλους τους χρήστες
|
|
|
|
|
|
**Πραγματικές Εφαρμογές**: Αυτές οι ικανότητες εφαρμόζονται άμεσα σε:
|
|
|
- **Διαδικτυακές Εφαρμογές**: Οποιαδήποτε διαδραστική διεπαφή ή πίνακα ελέγχου
|
|
|
- **Εκπαιδευτικό Λογισμικό**: Πλατφόρμες μάθησης και εργαλεία αξιολόγησης δεξιοτήτων
|
|
|
- **Εργαλεία Παραγωγικότητας**: Επεξεργαστές κειμένου, IDEs, και λογισμικό συνεργασίας
|
|
|
- **Βιομηχανία Παιχνιδιών**: Παιχνίδια browser και διαδραστική ψυχαγωγία
|
|
|
- **Κινητή Ανάπτυξη**: Διεπαφές αφής και διαχείριση χειρονομιών
|
|
|
|
|
|
**Επόμενο Επίπεδο**: Είσαι έτοιμος να εξερευνήσεις προηγμένα frameworks παιχνιδιών, συστήματα πολυπαικτών σε πραγματικό χρόνο, ή σύνθετες διαδραστικές εφαρμογές!
|
|
|
|
|
|
## Δημιουργοί
|
|
|
|
|
|
Γραμμένο με ♥️ από τον [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 --> |
