Inspiration

The inspiration behind creating this Dungeon Crawler Game was to bring the classic dungeon-exploration experience to a modern web environment. Inspired by games like The Legend of Zelda and Diablo, we wanted to create an accessible, browser-based game that challenges players with quests, puzzles, and epic boss battles. The goal was to build a game that blends nostalgic gameplay mechanics with intuitive controls, allowing players to explore dungeons, complete quests, and fight enemies, all within the convenience of their web browser.

What it does

The Dungeon Crawler Game immerses the player into a rich, pixelated world where they can take on the role of a brave ninja who starts off as having to save his town from mutant monster invasion. Players will then be able to navigate through various levels filled with monsters, traps, and hidden treasures.

Some of the game features include...

  • Players can attack enemies with their sword and dodge (by walking out the way) incoming attacks
  • Still working on implementing collectibles for players to pick items up such as health hearts dropped by the mobs in order to restore their overall health
  • Totally-self-composed background-music in addition to sword swinging noise and also monster taking damage and player taking damage noise
  • Working on building the final boss where the player has to take on a dragon in order for the dragon to drop a very overpowered and valuable weapon
  • The game automatically resets the user at a designated spawn point, when the user/player's health drops down to 0

How we built it

We built the game using a combination of HTML, CSS, and JavaScript. We also developed the game using React for managing UI components and game menus. Phaser.js powered the core game engine, handling animations, collisions, and player interactions. Vite served as our fast build tool, allowing rapid testing and optimized production builds. Howler.js was used for audio management, providing seamless background music and sound effects.

Challenges we ran into

Some of the challenges we faced while developing the game included...

  • Ensuring accurate collision detection between the player, monsters, and obstacles required precise calculations to maintain smooth gameplay
  • Integrating background music and sound effects while ensuring they played correctly across different browsers was initially tricky due to auto play restrictions
  • Rendering multiple layers, enemies, and dynamic objects on the canvas without affecting game performance required optimizing the draw and update cycles

Accomplishments that we're proud of

Some of the accomplishments that we're proud of include implementing a real-time combat system that feels responsive and satisfying, We also added immersive background music and sound effects that enhance the overall gameplay experience. Designed a modular game architecture that allows for easy addition of new levels, enemies, and features. We also learned a bunch of different frameworks and read documentations for those libraries in order to develop a deeper sense of an understanding as to what those libraries are both capable of and how well they integrate with our current code space. (A lot of back and forth deliberation as to how we were going to implement certain libraries)

What we learned

Through this project, we gained a deeper understanding of:

  • Canvas rendering techniques and optimizing performance for smooth gameplay
  • Modular JavaScript design patterns for handling complex game mechanics efficiently
  • Audio integration with Howler.js, resolving browser compatibility issues for sound effects
  • Managing game state and building a responsive UI using React
  • Leveraging libraries and frameworks like React, Vite, Phaser.js, and Howler.js to streamline development and enhance the game's functionality

What's next for Dungeon Crawler Game

For our next steps, we hope to expand upon the game and add more levels and quests to expand the overall gameplay experience. Hopefully learn how to implement multiplayer mode where players can team up to explore dungeons together or FIGHT TO THE DEATH. Another idea is to come up with a save system so players can continue their progress across sessions, this will most likely require the using of a backend server and a database, so we were thinking of using Express.js, Node.js, and MongoDB. Another thing is that we could hopefully figure out a way to up the difficulty of fighting with enemies and boss fights and this'll probably require more challenging AI behaviors. Adding customizable character options and different weapons to diversify gameplay.

Built With

Share this project:

Updates