Summary
Develop a browser-based educational game called Keyboard Ninja where players must quickly press the correct keyboard key to slice incoming objects before they reach the bottom of the screen.
The objective is to help children improve keyboard familiarity, reaction speed, letter recognition, and typing confidence through a fun arcade-style experience.
Background
We are exploring lightweight educational games that can run entirely in the browser and be deployed as part of our learning platform.
The game should be:
- Simple to understand
- Fun within the first 10 seconds
- Keyboard-driven
- Mobile-friendly where possible
- Offline capable (PWA compatible)
Gameplay
Basic Flow
-
Start button appears.
-
Game countdown: 3, 2, 1, Go.
-
Objects fall from the top of the screen.
-
Each object displays:
- A letter
- A number
- A simple word (higher levels)
-
Player presses the matching key.
-
Correct answer:
- Object is destroyed
- Score increases
- Small animation and sound
-
Wrong answer:
-
Object reaching the bottom:
-
Game ends when all lives are exhausted.
Difficulty Levels
Level 1
Single letters
Examples:
A, B, C, D
Level 2
Numbers
Examples:
1, 2, 3, 4
Level 3
Mixed letters and numbers
Examples:
A, 7, K, 3
Level 4
Simple words
Examples:
CAT, DOG, SUN
Player must type the entire word.
Scoring
Action| Points
Correct key| +10
Correct word| +25
Combo streak| Bonus
Miss| 0
Visual Requirements
- Bright child-friendly UI
- Large readable characters
- Responsive layout
- Smooth animations
- Dark and light mode support
Technical Requirements
Stack
State
Use React hooks only.
Keyboard Handling
Use:
window.addEventListener("keydown", handler)
Properly cleanup listeners on unmount.
Performance
- No backend
- No database
- No external game engine
- Avoid unnecessary re-renders
Suggested Folder Structure
src/
├── components/
│ ├── GameBoard.tsx
│ ├── FallingItem.tsx
│ ├── ScoreBoard.tsx
│ └── GameOver.tsx
├── hooks/
│ └── useGameEngine.ts
├── utils/
│ ├── levels.ts
│ └── scoring.ts
└── pages/
└── keyboard-ninja.astro
Stretch Goals
Power Ups
- Slow Motion
- Double Score
- Extra Life
Achievements
- 10 Hit Combo
- 50 Correct Keys
- Perfect Round
Leaderboard
Store locally using LocalStorage.
Acceptance Criteria
- Game starts and ends correctly
- Falling objects animate smoothly
- Keyboard input works reliably
- Score updates correctly
- Multiple difficulty levels available
- Works in latest Chrome, Edge, Firefox
- No TypeScript errors
- No console errors
Deliverables
- Source code
- README.md
- Screenshots
- Demo GIF
- Short architecture explanation
Estimated Effort: 3 Days
Summary
Develop a browser-based educational game called Keyboard Ninja where players must quickly press the correct keyboard key to slice incoming objects before they reach the bottom of the screen.
The objective is to help children improve keyboard familiarity, reaction speed, letter recognition, and typing confidence through a fun arcade-style experience.
Background
We are exploring lightweight educational games that can run entirely in the browser and be deployed as part of our learning platform.
The game should be:
Gameplay
Basic Flow
Start button appears.
Game countdown: 3, 2, 1, Go.
Objects fall from the top of the screen.
Each object displays:
Player presses the matching key.
Correct answer:
Wrong answer:
Object reaching the bottom:
Game ends when all lives are exhausted.
Difficulty Levels
Level 1
Single letters
Examples:
A, B, C, D
Level 2
Numbers
Examples:
1, 2, 3, 4
Level 3
Mixed letters and numbers
Examples:
A, 7, K, 3
Level 4
Simple words
Examples:
CAT, DOG, SUN
Player must type the entire word.
Scoring
Action| Points
Correct key| +10
Correct word| +25
Combo streak| Bonus
Miss| 0
Visual Requirements
Technical Requirements
Stack
State
Use React hooks only.
Keyboard Handling
Use:
window.addEventListener("keydown", handler)
Properly cleanup listeners on unmount.
Performance
Suggested Folder Structure
Stretch Goals
Power Ups
Achievements
Leaderboard
Store locally using LocalStorage.
Acceptance Criteria
Deliverables
Estimated Effort: 3 Days