Hack n Hoard

Hack n Hoard: Project Story

Inspiration

Hack n Hoard was inspired by classic adventure games where players explore, solve puzzles, and collect treasures. We wanted to create a game that combines nostalgic pixel art with modern gameplay mechanics, offering players a fun and engaging experience. The idea of "unlocking doors with keys" and "finding hidden treasures" felt timeless, and we aimed to bring that concept to life with a dynamic and interactive world.

What it does

Hack n Hoard is a 2D top-down adventure game where players navigate through a map filled with obstacles, collectibles, and challenges. Players control a character who can:

Move in four directions using keyboard or touch controls.
Collect keys to unlock doors.
Find power-ups like speed boots to enhance their abilities.
Open treasure chests to win the game. The game dynamically adjusts to the player's screen size, ensuring a seamless device experience. It also features sound effects and background music to immerse players in the adventure.

How we built it

We built Hack n Hoard using HTML5 Canvas and JavaScript. Here’s an overview of our development process:

Dynamic Canvas Scaling: To ensure the game works on various screen sizes, we implemented a function to dynamically adjust the canvas dimensions based on the user's screen aspect ratio.
Tile-Based Map System: The game uses a tile-based map system, where each tile represents a specific type of terrain (e.g., grass, walls, water). This allows for easy map design and collision detection.
Object Interactions: We added interactive objects like keys, doors, boots, and treasure chests. Each object has unique behaviors, such as disabling collisions for doors when a key is collected.
Animation and Sound: Player animations and sound effects were integrated to enhance the visual and auditory experience. For example, picking up a key plays a "coin" sound, while opening a door triggers an "unlock" sound.
Game Loop: The game runs on a loop that updates the player's position, checks for collisions, and renders the game state at a consistent frame rate.

Challenges we ran into

Collision Detection: Implementing precise collision detection for tiles and objects was challenging. We had to account for the player's solid area and ensure smooth interactions with doors and other objects.
Dynamic Asset Loading: Loading and managing assets (images and sounds) dynamically required careful planning to avoid delays or errors during gameplay.
Cross-Device Compatibility: Ensuring the game works seamlessly on both desktop and mobile devices involved extensive testing and adjustments to the canvas scaling and touch controls.
Sound Timing Issues: Some sound effects, like the sword sound, had silent gaps at the beginning, causing delays in playback. We resolved this by trimming the audio files and optimizing the sound playback logic.

Accomplishments that we're proud of

Successfully implementing a dynamic and responsive canvas system that adapts to different screen sizes.
Creating a polished and engaging gameplay experience with smooth animations and immersive sound effects.
Building a robust collision detection system that handles both tiles and objects efficiently.
Adding fun and interactive elements like power-ups and treasure chests that enhance the player's journey.

What we learned

Game Development Fundamentals: We gained hands-on experience with game loops, collision detection, and asset management.
JavaScript and Canvas API: We deepened our understanding of JavaScript for rendering graphics and animations.
Debugging and Optimization: We learned the importance of debugging tools and techniques to identify and resolve issues like sound delays and collision inaccuracies.
Team Collaboration: Working together as a team taught us how to divide tasks effectively, share knowledge, and combine our strengths to build a cohesive project.

What's next for Hack n Hoard

New Levels and Challenges: Introduce additional maps with more complex layouts and puzzles to keep players engaged.
Enemy AI: Add enemies with basic AI to challenge the player and make the game more exciting.
Multiplayer Mode: Explore the possibility of adding a local multiplayer mode where two players can explore the map together.
Improved Graphics and Animations: Enhance the visual appeal of the game with more detailed sprites and smoother animations.
Mobile Optimization: Further optimize the game for mobile devices, including better touch controls and performance improvements.

Hack n Hoard is just the beginning of our journey into game development. We’re excited to continue iterating on this project and bringing even more adventures to life!