A pixel-art browser game built as part of the HTML Academy professional JavaScript course (Stream 29). Create your own wizard character, customize its appearance, and explore a side-scrolling magical world!
| Key | Action |
|---|---|
Space |
Start the game |
Arrows |
Move Pendalf |
Shift |
Cast fireballs! |
Click the avatar icon to open the character setup:
- Choose a unique name
- Select an avatar
- Click robes, eyes, or fireball to change their colors
- Browse auto-generated similar wizards for inspiration
- Pixel-art side-scrolling gameplay
- Full character customization (name, avatar, colors)
- Random wizard generator + "similar wizards" feature
- Form validation with Pristine API
- Debounced input handling
- Keyboard event handlers (click, Escape)
- Avatar selection system
| Stage | Feature |
|---|---|
| 0 | HTML/CSS initial version |
| 1 | Movement speed and fireball physics |
| 2 | Random name, robe, eye, and fireball color generation |
| 3 | Random wizard creation from generated data |
| 4 | Settings modal with random wizard gallery |
| 5 | Click and Escape key event handlers |
| 6 | Form validation (Pristine API) |
| 7 | Form submission |
| 8 | Similar wizard generation (matching features) |
| 9 | Input debouncing |
| 10 | Avatar change system |
| Language | JavaScript (ES6+) |
| Validation | Pristine.js |
| Styling | CSS3 with pixel-art aesthetic |
| Course | HTML Academy, Stream 29 |
index.html # Entry point
css/ # Stylesheets
img/ # Sprites and pixel art
js/ # Game logic modules
pristine/ # Pristine.js validation library
Made by Elena Rumiru, 2023 | Educational project from HTML Academy