BOO! — Halloween in Your Browser

• 

  This is the finishing and winning shot

• 

  this is the landing page

• 

  the rewards page continued showing different features

• 

  this has 4 steps , solve each step successfully, to unveal the next room

• 

  this is the setting page ,where you can change the setting

• 

  This is the rewards and the point earned showing page

• 

  This had these many steps , solve each of them successfully

• 

  we can make a choice

• 

  this is the first room Forgotten Foyer

• 

  This is the second room ,Witch's Library

• 

  This is the one more feature, create your own spooky room

• 

  This is the 3rd and final room ,Pumpkin Vault

Inspiration

We wanted to turn the excitement of Halloween into an interactive browser experience where players could explore a haunted mansion, solve mysterious puzzles, and uncover hidden secrets. This inspired us to create BOO!, a spooky escape room that combines storytelling, exploration, and problem-solving.

What it does

BOO! takes players through three mysterious rooms: the Forgotten Foyer, Witch’s Library, and Pumpkin Vault. Players solve riddles, discover hidden objects, collect magical items, and unlock the final vault. The game also features an interactive pumpkin mascot, spooky sound effects, achievements, an inventory, a clue journal, and a room decorator with customizable themes, lighting, fog, and decorations. Progress and preferences are saved in the browser.

How we built it

We built BOO! using React, JavaScript, Vite, HTML, and CSS. SVG graphics and CSS animations bring the haunted environment to life, while the Web Audio API generates spooky sounds. Canvas Confetti adds celebratory effects when players complete the adventure. LocalStorage saves player progress and customization preferences directly in the browser.

Challenges we ran into

One of our main challenges was designing puzzles that felt mysterious but remained understandable and enjoyable. We also worked on connecting room interactions, inventory items, clues, and puzzle solutions into a consistent game flow. Creating immersive visuals and sounds while keeping the experience responsive and accessible across screen sizes required careful testing and refinement.

Accomplishments that we're proud of

We are proud to have transformed our idea into a playable, browser-based escape room with three connected stages, interactive objects, multiple puzzles, collectible items, and a rewarding final victory sequence. We also built a room customization system that lets players personalize their spooky environment, making the experience more engaging than a traditional puzzle game.

What we learned

We strengthened our understanding of React component design, state management, event handling, browser storage, CSS animations, SVG graphics, and audio generation. We also learned how to combine different web technologies into a cohesive interactive experience, test gameplay flows, use GitHub for version control, and deploy a project using Vercel.

What's next for BOO! — Halloween in Your Browser

We plan to expand BOO! with more haunted rooms, additional puzzles, hidden Easter eggs, new decoration packs, and seasonal themes. Future improvements could include difficulty levels, player scoreboards, additional achievements, richer soundscapes, and multiplayer challenges so friends can solve mysteries together.

Built With

• accessibility
• browser-game
• canvas-confetti
• creative-technology
• css-animations
• css3
• escape-room
• frontend-development
• game-development
• github
• halloween
• html5
• indie
• interactive-storytelling
• javascript
• localstorage
• puzzle-game
• react
• responsive-design
• svg
• ui/ux
• vercel
• vite
• web-audio-api
• web-development