This is a 2D magic-adventure game developed using JavaScript, HTML, and CSS. In this game, you play as a Hogwarts student trying to stop Lord Voldemort from acquiring the Deathly Hallows and using them to rule the magical world. Explore Hogwarts, face enemies, and collect the Hallows before Voldemort does!
📑 Table of Contents
- 🧙♂️ Introduction
- 🎮 DEMO
- 🐦🔥 Features
- 💡 Key Learnings
- 🕹️ How to Play
- 🪜 Levels
- 🛠️ Technologies Used
- 🔮 Future Improvements
In this JavaScript-based game, you must explore Hogwarts, face magical enemies, and collect the Deathly Hallows before Voldemort does. He already possesses the Elder Wand, and your goal is to stop him from obtaining the Resurrection Stone and the Invisibility Cloak. If Voldemort manages to obtain all three, he will gain unimaginable power and dominate the magical world.
- Explore Hogwarts and the Forbidden Forest: Battle magical enemies, explore Hogwarts and the Forbidden Forest, and gather the first two Deathly Hallows before Voldemort does.
- Final Duel: A typing duel with Voldemort for the Elder Wand. Defeat him to stop his plan and save the wizarding world.
Play the Quest for the Deathly Hallows✨
- Hogwarts House Selection Test: A quiz inspired by the Sorting Hat that assigns the player to a Hogwarts house based on their answer.
- Player Controls: Walk, jump, cast spells, and collect objects.
- Dynamic gameplay: 3 levels with enemies that chase the player, following their movement in the direction they go.
- Collect the Deathly Hallows: Resurrection Stone 🪨, Invisibility Cloak 🧥 and Elder Wand 🪄.
- Final Challenge: Defeat Voldemort in a mini-game where you must correctly type spells with a 7-second time limit for each spell.
- Player Health & Spells: Limited spellcasting and health management (using chocolate frogs for healing).
- Ranking System: Top 5 high scores using localStorage.
- Interactive and Responsive Menus: View different screens, including rankings, and a responsive design that adjusts according to screen size.
- Game Over / Win Screen: Includes options to restart or exit the game.
This project allowed me to strengthen my JavaScript, HTML, and CSS skills while developing a fully interactive game. Some key concepts I worked with include:
- Game Logic & Timers: Managed real-time events such as spell cooldowns and timed challenges using setInterval and setTimeout.
- OOP: Organized classes for enemies, items, and Deathly Hallows, using inheritance for code reuse.
- DOM Manipulation: Switch between screens and display rankings.
- Responsive Design: Used media queries to ensure menus are responsive across devices.
- State Management: Track health, score, and collected deathly hallows.
- HTML & CSS: Styled the layout, buttons, and menus.
- Up Arrow: Jump
- Space Bar: Cast a spell to attack enemies and get points, with a 3-second cooldown before the next cast.
- Down Arrow: Collect the Deathly Hallows and Chocolate Frogs.
- Left Arrow / Right Arrow: Move left or right.
- Level 1 & 2: Explore Hogwarts and The Forbidden Forest, collect the Resurrection Stone and the Invisibility Cloak, and defeat enemies to progress.
- Level 3 (Final Challenge): Face Voldemort in a typing duel to collect the Elder Wand.
- Type spells correctly within 7 seconds to defeat Voldemort.
- JavaScript: Game logic, event handling, timers, and interactions.
- HTML: Game structure and layout.
- CSS: Styling and responsive design for menus.
- Canvas: Used for rendering the game graphics and animations.
- More Enemies: Add more enemies with unique abilities.
- Spell Riddles: Magical puzzles where players must answer correctly to progress.
- Deadly Obstacles: Introduce traps like poisonous potions or Devil’s Snare.
- Moving Platforms: Platforms that move, requiring the player to jump or climb.