Halloween Escape Room

Inspiration

With Halloween approaching, we wanted to create a project that merges coding and entertainment. Learning to code can sometimes be a bit boring, so we thought: Why not make it fun and festive? The idea of an escape room with coding challenges, led by a Halloween ghost, felt like the perfect way to keep users engaged while learning. Our goal was to let users enjoy Halloween while developing their problem-solving and coding skills.

What it does

The Halloween Escape Room is an interactive game where users must: Use developer tools (Ctrl + i) to manipulate HTML and CSS elements. Solve puzzles by changing properties and inspecting the source code. Enter correct values in hidden fields to unlock doors and progress through the mansion. Engage in a final battle with a ghost, using JavaScript functions in the console to attack him. Find a key hidden in the source code to escape the haunted mansion. The game collects username, password, and final unlock codes as part of the escape sequence.

How we built it

Frontend: Built using React.js and styled with CSS animations to give the interface a spooky, interactive feel. Authentication: Implemented Auth0 to personalize the user experience and manage sessions. Game Logic: The puzzles were designed to make players interact with the website's source code through developer tools and solve challenges to progress. Animations: Added subtle animations to elements like the game title and buttons to enhance the visual appeal.

Challenges we ran into

The biggest challenge was balancing engagement and learning. We wanted the game to be fun but also educational. Adding the ghost as a pressure element was tricky — we needed players to feel motivated to escape without becoming frustrated. Another challenge was keeping the interface visually appealing while ensuring that the puzzles were intuitive and not overly complex. Managing state and authentication through Auth0 was also a learning curve for us.

Accomplishments that we're proud of

Creating a unique gamified learning experience that merges coding challenges with the spirit of Halloween. Successfully integrating Auth0 for authentication. Building an intuitive and fun interface using React and CSS animations. Keeping the users engaged by making them actively solve puzzles through developer tools.

What we learned

Auth0: We learned how to implement authentication and manage sessions effectively. React components: We became more comfortable using React components to build interactive interfaces. Gamification: We learned how to gamify the learning experience by adding elements of fun and pressure without frustrating the user. CSS animations: Creating smooth, fun animations made the interface more engaging and improved the user experience.

What's next for Halloween Escape Room

New Levels: We plan to add more levels and puzzles to make the game even more challenging. Multiplayer Mode: Introducing a multiplayer mode where friends can collaborate or compete to escape. Enhanced Animations: Adding more dynamic animations and effects to make the gameplay feel even more immersive. Leaderboard System: A global leaderboard to encourage users to compete for the fastest escape time. Mobile Compatibility: Adapting the game for mobile devices so users can enjoy the experience on the go.

Built With

• auth0
• css
• javascript
• next.js
• react
• typescript