|
|
# Програмиране, основано на събития - Създайте игра за писане
|
|
|
|
|
|
```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
|
|
|
"Интерактивен потребителски интерфейс" : 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[Изчисляване на WPM]
|
|
|
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 страница с полe за въвеждане и тествайте засичане на писане
|
|
|
- [ ] Упражнявайте манипулиране на текст, като сравнявате написания текст с целевия
|
|
|
- [ ] Експериментирайте с `setTimeout`, за да разберете как работят таймерите
|
|
|
|
|
|
### 🎯 **Какво можете да постигнете този час**
|
|
|
- [ ] Завършете викторината след урока и разберете програмиране, основано на събития
|
|
|
- [ ] Изградете основна версия на играта за писане с проверка на думи
|
|
|
- [ ] Добавете визуална обратна връзка за правилно и неправилно писане
|
|
|
- [ ] Прилагайте проста система за оценяване на базата на скорост и точност
|
|
|
- [ ] Стилизирайте играта с CSS, за да я направите визуално привлекателна
|
|
|
|
|
|
### 📅 **Вашето седмично разработване на игра**
|
|
|
- [ ] Завършете пълната игра за писане с всички функции и полиран вид
|
|
|
- [ ] Добавете нива на трудност с различна сложност на думите
|
|
|
- [ ] Прилагайте проследяване на статистики на потребителя (думи в минута, точност с времето)
|
|
|
- [ ] Създайте звукови ефекти и анимации за по-добро потребителско преживяване
|
|
|
- [ ] Направете играта си адаптивна за мобилни устройства с тъч интерфейс
|
|
|
- [ ] Споделете играта си онлайн и съберете обратна връзка от потребители
|
|
|
|
|
|
### 🌟 **Вашето месечно интерактивно развитие**
|
|
|
- [ ] Създавайте множество игри, изследващи различни модели на взаимодействие
|
|
|
- [ ] Научете за игрови цикли, управление на състояния и оптимизация на производителността
|
|
|
- [ ] Допринасяйте за проекти с отворен код в разработката на игри
|
|
|
- [ ] Овладейте напреднали концепции за време и плавни анимации
|
|
|
- [ ] Създайте портфолио, показващо разнообразни интерактивни приложения
|
|
|
- [ ] Наставлявайте други, заинтересовани от разработката на игри и потребителско взаимодействие
|
|
|
|
|
|
## 🎯 Вашата времева линия за овладяване на игра за писане
|
|
|
|
|
|
```mermaid
|
|
|
timeline
|
|
|
title Прогрес в усвояването на разработка на игри
|
|
|
|
|
|
section Настройка (10 минути)
|
|
|
Project Structure: HTML основа
|
|
|
: CSS стилизиране
|
|
|
: Създаване на JavaScript файл
|
|
|
|
|
|
section Потребителски интерфейс (20 минути)
|
|
|
Interactive Elements: Полета за въвеждане
|
|
|
: Бутони
|
|
|
: Зони за показване
|
|
|
: Адаптивен дизайн
|
|
|
|
|
|
section Обработка на събития (25 минути)
|
|
|
User Interaction: Събития от клавиатура
|
|
|
: Събития с мишка
|
|
|
: Обратна връзка в реално време
|
|
|
: Управление на състоянието
|
|
|
|
|
|
section Игрова логика (30 минути)
|
|
|
Core Functionality: Генериране на цитати
|
|
|
: Сравнение на символи
|
|
|
: Изчисляване на точност
|
|
|
: Имплементация на таймер
|
|
|
|
|
|
section Проследяване на производителността (35 минути)
|
|
|
Metrics & Analytics: Изчисляване на WPM
|
|
|
: Проследяване на грешки
|
|
|
: Визуализация на напредъка
|
|
|
: Показване на резултати
|
|
|
|
|
|
section Финални щрихи и подобрения (45 минути)
|
|
|
User Experience: Визуална обратна връзка
|
|
|
: Звукови ефекти
|
|
|
: Анимации
|
|
|
: Функции за достъпност
|
|
|
|
|
|
section Разширени функции (1 седмица)
|
|
|
Extended Functionality: Нива на трудност
|
|
|
: Таблици с класиране
|
|
|
: Персонализирани цитати
|
|
|
: Опции за мултиплейър
|
|
|
|
|
|
section Професионални умения (1 месец)
|
|
|
Game Development: Оптимизация на производителността
|
|
|
: Архитектура на кода
|
|
|
: Стратегии за тестване
|
|
|
: Шаблони за разгръщане
|
|
|
```
|
|
|
### 🛠️ Резюме на вашите инструменти за разработка на игри
|
|
|
|
|
|
След завършване на този проект ще сте овладели:
|
|
|
- **Програмиране, основано на събития**: Отзивчиви потребителски интерфейси, които реагират на вход
|
|
|
- **Обратна връзка в реално време**: Незабавни визуални и представителни актуализации
|
|
|
- **Измерване на производителността**: Точни системи за измерване на време и точкуване
|
|
|
- **Управление на състоянието на играта**: Контрол на потока на приложението и потребителското преживяване
|
|
|
- **Интерактивен дизайн**: Създаване на ангажиращи, пристрастяващи потребителски преживявания
|
|
|
- **Модерни уеб API-та**: Използване на възможностите на браузъра за богати взаимодействия
|
|
|
- **Патерни за достъпност**: Приобщаващ дизайн за всички потребители
|
|
|
|
|
|
**Приложения в реалния свят**: Тези умения се прилагат директно в:
|
|
|
- **Уеб приложения**: Всеки интерактивен интерфейс или табло за управление
|
|
|
- **Образователен софтуер**: Платформи за обучение и инструменти за оценка на умения
|
|
|
- **Продуктивни инструменти**: Текстови редактори, IDE-та и софтуер за съвместна работа
|
|
|
- **Индустрията на игрите**: Игри в браузъра и интерактивни забавления
|
|
|
- **Мобилна разработка**: Тъч-базирани интерфейси и обработка на жестове
|
|
|
|
|
|
**Следващо ниво**: Готови сте да изследвате напреднали игрови рамки, системи за мултиплейър в реално време или сложни интерактивни приложения!
|
|
|
|
|
|
## Благодарности
|
|
|
|
|
|
Написано с ♥️ от [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 --> |
