Magedle
Game Overview
Magedle is a web-based defense game developed from scratch in plain JavaScript, featuring a custom engine built with canvas rendering. The player takes on the role of a mage tasked with defending their village from waves of monsters. With each wave, players gain experience points and items, while also having the opportunity to purchase upgrades from a traveling merchant. This project was a complete solo effort, where every element—from the UI to the game loop and collision detection—was developed independently.
Gameplay Mechanics
- Wave-Based Combat: Enemies approach from the top in waves, and players must defeat them before they reach the village barrier.
- Collecting Drops: Monsters drop equippable items and gold coins, which players can collect between waves.
- Stats and Levels: Gaining XP increases the player's level and base stats, including magic damage, spell cast rate, and critical hit chance.
- Simple Left-Click Combat: The player attacks using basic left-click fireballs to fend off the advancing enemies.
- Traveling Merchant: Between waves, a merchant may appear, offering items in exchange for collected gold coins.
Skills Demonstrated
| Skill | Description |
|---|---|
| Game Loop Development | Implemented a custom game loop for real-time updates, ensuring smooth gameplay and consistent frame updates. |
| Canvas Rendering | Created all game visuals using the HTML5 canvas API, including characters, items, and environments. |
| Custom Collision Detection | Developed a collision detection system to handle interactions between the player, enemies, and items. |
| User Interface Design | Implemented a custom UI for displaying stats, level progress, and item effects, ensuring clarity and functionality. |
Game Features
- Defensive Barrier: Protects the village during enemy waves, dropping between waves to allow item collection.
- Collectible Items: Items dropped by enemies provide stat boosts and add depth to the player’s character progression.
- Traveling Merchant: Appears between waves, allowing players to spend coins on items and upgrades.
- Solo-Developed Engine: Built entirely from scratch with JavaScript, including the game loop, rendering, and physics.
Technical Concepts and Tools
Game Loop Implementation
Designed a custom game loop to manage timing, actions, and rendering, allowing for consistent updates and real-time gameplay.
Canvas API
Utilized the HTML5 canvas API for drawing characters, environment, and interface, achieving responsive graphics without external libraries.
Collision Detection
Developed a collision detection system from scratch to handle interactions between players, enemies, and collectibles in the game space.
Gallery
Learning Takeaways
Developing Magedle as a solo project was a valuable experience in end-to-end game creation, from building a custom engine to designing every aspect of gameplay and visuals. The project strengthened my understanding of JavaScript and canvas, as well as core game development principles such as collision detection and game loop management.
Tools Used
- JavaScript: Main programming language for game logic, engine, and UI implementation.
- HTML5 Canvas: Used for rendering all visual elements directly within the web browser.
- Jetbrains WebStorm: JavaScript IDE.