You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
281 lines
10 KiB
281 lines
10 KiB
# Event-Driven Programming - Build a Typing Game
|
|
|
|
```mermaid
|
|
journey
|
|
title Your Typing Game Development Journey
|
|
section Foundation
|
|
Plan game structure: 3: Student
|
|
Design user interface: 4: Student
|
|
Setup HTML elements: 4: Student
|
|
section Functionality
|
|
Handle user input: 4: Student
|
|
Track timing: 5: Student
|
|
Calculate accuracy: 5: Student
|
|
section Features
|
|
Add visual feedback: 5: Student
|
|
Implement game logic: 5: Student
|
|
Polish experience: 5: Student
|
|
```
|
|
## Introduction
|
|
|
|
Here's something every developer knows but rarely talks about: typing fast is a superpower! 🚀 Think about it - the faster you can get your ideas from your brain to your code editor, the more your creativity can flow. It's like having a direct pipeline between your thoughts and the screen.
|
|
|
|
```mermaid
|
|
pie title Game Features
|
|
"Real-time Feedback" : 25
|
|
"Performance Tracking" : 20
|
|
"Interactive UI" : 20
|
|
"Timer System" : 15
|
|
"Quote Management" : 10
|
|
"Results Display" : 10
|
|
```
|
|
Want to know one of the best ways to level up this skill? You guessed it - we're going to build a game!
|
|
|
|
```mermaid
|
|
flowchart LR
|
|
A[Player starts game] --> B[Random quote displayed]
|
|
B --> C[Player types characters]
|
|
C --> D{Character correct?}
|
|
D -->|Yes| E[Green highlight]
|
|
D -->|No| F[Red highlight]
|
|
E --> G[Update accuracy]
|
|
F --> G
|
|
G --> H{Quote complete?}
|
|
H -->|No| C
|
|
H -->|Yes| I[Calculate WPM]
|
|
I --> J[Display results]
|
|
J --> K[Play again?]
|
|
K -->|Yes| B
|
|
K -->|No| L[Game over]
|
|
|
|
style A fill:#e1f5fe
|
|
style D fill:#fff3e0
|
|
style E fill:#e8f5e8
|
|
style F fill:#ffebee
|
|
style I fill:#f3e5f5
|
|
```
|
|
> Let's create an awesome typing game together!
|
|
|
|
Ready to put all those JavaScript, HTML, and CSS skills you've been learning to work? We're going to build a typing game that'll challenge you with random quotes from the legendary detective [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes). The game will track how fast and accurately you can type - and trust me, it's more addictive than you might think!
|
|
|
|
```mermaid
|
|
mindmap
|
|
root((Typing Game Development))
|
|
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
|
|
```
|
|
|
|
|
|
## What You'll Need to Know
|
|
|
|
```mermaid
|
|
flowchart TD
|
|
A[User Action] --> B{Event Type?}
|
|
B -->|Key Press| C[Keyboard Event]
|
|
B -->|Button Click| D[Mouse Event]
|
|
B -->|Timer| E[Time Event]
|
|
|
|
C --> F[Check Character]
|
|
D --> G[Start/Reset Game]
|
|
E --> H[Update Timer]
|
|
|
|
F --> I{Correct?}
|
|
I -->|Yes| J[Highlight Green]
|
|
I -->|No| K[Highlight Red]
|
|
|
|
J --> L[Update Score]
|
|
K --> L
|
|
L --> M[Check Game State]
|
|
|
|
G --> N[Generate New Quote]
|
|
H --> O[Display Time]
|
|
|
|
M --> P{Game Complete?}
|
|
P -->|Yes| Q[Show Results]
|
|
P -->|No| R[Continue Game]
|
|
|
|
style A fill:#e1f5fe
|
|
style F fill:#e8f5e8
|
|
style I fill:#fff3e0
|
|
style Q fill:#f3e5f5
|
|
```
|
|
Before we dive in, make sure you're comfortable with these concepts (don't worry if you need a quick refresher - we've all been there!):
|
|
|
|
- Creating text input and button controls
|
|
- CSS and setting styles using classes
|
|
- JavaScript basics
|
|
- Creating an array
|
|
- Creating a random number
|
|
- Getting the current time
|
|
|
|
If any of these feel a bit rusty, that's totally fine! Sometimes the best way to solidify your knowledge is by jumping into a project and figuring things out as you go.
|
|
|
|
### 🔄 **Pedagogical Check-in**
|
|
**Foundation Assessment**: Before starting development, ensure you understand:
|
|
- ✅ How HTML forms and input elements work
|
|
- ✅ CSS classes and dynamic styling
|
|
- ✅ JavaScript event listeners and handlers
|
|
- ✅ Array manipulation and random selection
|
|
- ✅ Time measurement and calculations
|
|
|
|
**Quick Self-Test**: Can you explain how these concepts work together in an interactive game?
|
|
- **Events** trigger when users interact with elements
|
|
- **Handlers** process those events and update game state
|
|
- **CSS** provides visual feedback for user actions
|
|
- **Timing** enables performance measurement and game progression
|
|
|
|
```mermaid
|
|
quadrantChart
|
|
title Typing Game Skills Development
|
|
x-axis Beginner --> Expert
|
|
y-axis Static --> Interactive
|
|
quadrant-1 Advanced Games
|
|
quadrant-2 Real-time Apps
|
|
quadrant-3 Basic Pages
|
|
quadrant-4 Interactive Sites
|
|
|
|
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]
|
|
```
|
|
## Let's Build This Thing!
|
|
|
|
[Creating a typing game by using event driven programming](./typing-game/README.md)
|
|
|
|
### ⚡ **What You Can Do in the Next 5 Minutes**
|
|
- [ ] Open your browser console and try listening for keyboard events with `addEventListener`
|
|
- [ ] Create a simple HTML page with an input field and test typing detection
|
|
- [ ] Practice string manipulation by comparing typed text with target text
|
|
- [ ] Experiment with `setTimeout` to understand timing functions
|
|
|
|
### 🎯 **What You Can Accomplish This Hour**
|
|
- [ ] Complete the post-lesson quiz and understand event-driven programming
|
|
- [ ] Build a basic version of the typing game with word validation
|
|
- [ ] Add visual feedback for correct and incorrect typing
|
|
- [ ] Implement a simple scoring system based on speed and accuracy
|
|
- [ ] Style your game with CSS to make it visually appealing
|
|
|
|
### 📅 **Your Week-Long Game Development**
|
|
- [ ] Complete the full typing game with all features and polish
|
|
- [ ] Add difficulty levels with varying word complexity
|
|
- [ ] Implement user statistics tracking (WPM, accuracy over time)
|
|
- [ ] Create sound effects and animations for better user experience
|
|
- [ ] Make your game mobile-responsive for touch devices
|
|
- [ ] Share your game online and gather feedback from users
|
|
|
|
### 🌟 **Your Month-Long Interactive Development**
|
|
- [ ] Build multiple games exploring different interaction patterns
|
|
- [ ] Learn about game loops, state management, and performance optimization
|
|
- [ ] Contribute to open source game development projects
|
|
- [ ] Master advanced timing concepts and smooth animations
|
|
- [ ] Create a portfolio showcasing various interactive applications
|
|
- [ ] Mentor others interested in game development and user interaction
|
|
|
|
## 🎯 Your Typing Game Mastery Timeline
|
|
|
|
```mermaid
|
|
timeline
|
|
title Game Development Learning Progression
|
|
|
|
section Setup (10 minutes)
|
|
Project Structure: HTML foundation
|
|
: CSS styling setup
|
|
: JavaScript file creation
|
|
|
|
section User Interface (20 minutes)
|
|
Interactive Elements: Input fields
|
|
: Button controls
|
|
: Display areas
|
|
: Responsive layout
|
|
|
|
section Event Handling (25 minutes)
|
|
User Interaction: Keyboard events
|
|
: Mouse events
|
|
: Real-time feedback
|
|
: State management
|
|
|
|
section Game Logic (30 minutes)
|
|
Core Functionality: Quote generation
|
|
: Character comparison
|
|
: Accuracy calculation
|
|
: Timer implementation
|
|
|
|
section Performance Tracking (35 minutes)
|
|
Metrics & Analytics: WPM calculation
|
|
: Error tracking
|
|
: Progress visualization
|
|
: Results display
|
|
|
|
section Polish & Enhancement (45 minutes)
|
|
User Experience: Visual feedback
|
|
: Sound effects
|
|
: Animations
|
|
: Accessibility features
|
|
|
|
section Advanced Features (1 week)
|
|
Extended Functionality: Difficulty levels
|
|
: Leaderboards
|
|
: Custom quotes
|
|
: Multiplayer options
|
|
|
|
section Professional Skills (1 month)
|
|
Game Development: Performance optimization
|
|
: Code architecture
|
|
: Testing strategies
|
|
: Deployment patterns
|
|
```
|
|
### 🛠️ Your Game Development Toolkit Summary
|
|
|
|
After completing this project, you'll have mastered:
|
|
- **Event-Driven Programming**: Responsive user interfaces that react to input
|
|
- **Real-Time Feedback**: Instant visual and performance updates
|
|
- **Performance Measurement**: Accurate timing and scoring systems
|
|
- **Game State Management**: Controlling application flow and user experience
|
|
- **Interactive Design**: Creating engaging, addictive user experiences
|
|
- **Modern Web APIs**: Utilizing browser capabilities for rich interactions
|
|
- **Accessibility Patterns**: Inclusive design for all users
|
|
|
|
**Real-World Applications**: These skills directly apply to:
|
|
- **Web Applications**: Any interactive interface or dashboard
|
|
- **Educational Software**: Learning platforms and skill assessment tools
|
|
- **Productivity Tools**: Text editors, IDEs, and collaboration software
|
|
- **Gaming Industry**: Browser games and interactive entertainment
|
|
- **Mobile Development**: Touch-based interfaces and gesture handling
|
|
|
|
**Next Level**: You're ready to explore advanced game frameworks, real-time multiplayer systems, or complex interactive applications!
|
|
|
|
## Credits
|
|
|
|
Written with ♥️ by [Christopher Harrison](http://www.twitter.com/geektrainer)
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**Disclaimer**:
|
|
This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we strive for accuracy, please be aware that automated translations may contain errors or inaccuracies. The original document in its native language should be considered the authoritative source. For critical information, professional human translation is recommended. We are not liable for any misunderstandings or misinterpretations arising from the use of this translation.
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |