A PLAYABLE BIRTHDAY CARD, BUILT WITH PHASER
Birthday Shrine
A shrine-garden browser game built as a birthday gift: walk the courtyard, talk to friend NPCs, shoot a few arrows, and pull a charm from the shrine.
- Phaser 3
- JavaScript
- Vite
- GitHub Pages
WHY I BUILT IT
I built Birthday Shrine as a playable birthday card instead of a static message. The goal was to turn birthday wishes, friend messages, voice clips, and inside jokes into a tiny explorable world, where each interaction felt like opening part of the gift.
THE OVERVIEW
Players walk around a shrine-garden overworld, talk to friend NPCs, hear their voice messages, complete an archery challenge, and pull from the gacha shrine. Once the main activities are done, an ending portal opens.
THE GARDEN PATH
- Garden Gate
- Sakura Court
- Archery Range
- Charm Shrine
- Ending Portal
move with WASD / arrow keys; each stop along the path is its own Phaser scene
FRIENDS UNDER THE SAKURA
Each friend appears as an NPC with a custom avatar, dialogue box, voice message, and typewriter subtitles in English and Japanese.
use WASD or arrow keys to move
it's your day. I hope you know a bright future is coming.
ไปๆฅใฏใๅใฎๆฅใ ใใใใฃใจๆใใๆชๆฅใๅพ ใฃใฆใใใ
GAME MOMENTS
Archery Range
A timed aim-and-shoot minigame: hit targets among the garden lanterns before the clock runs out.
Charm Shrine
A gacha-style pull sequence for a keepsake charm, with 4โ and 5โ prize reveals.
Ending Portal
Once every activity is complete, a portal opens with a short closing sequence.
QUEST PROGRESSION
- meet friends
- archery
- charm pull
- enter the portal
UNDER THE HOOD
Built with Phaser 3 and JavaScript ES Modules, bundled with Vite, and deployed as a static browser game through GitHub Pages.
Scene Structure
Separate Phaser scenes handle the overworld, dialogue moments, archery minigame, gacha shrine, and ending flow.
Interaction System
Player movement, NPC triggers, special map zones, choices, and quest progress connect through shared game state.
Dialogue System
Custom dialogue boxes, avatars, voice messages, typewriter subtitles, and bilingual English/Japanese text.
Minigames & Rewards
The archery range and charm shrine add small game loops, progression checks, pull animations, and prize reveals.
Static Web Deployment
No servers, no backend: the whole game ships as static files through GitHub Pages, so the birthday link just works in a browser.
SCREENS
WHAT I LEARNED
This project taught me how much polish matters in small interactive experiences. Even though it was a personal birthday gift, it involved real game systems: scene structure, player input, dialogue state, audio timing, minigame logic, progression tracking, and web deployment.
- Phaser scenes helped separate the overworld, minigames, dialogue, and ending flow.
- Personalized audio and subtitles made the dialogue system more complex than a normal text box.
- Small games need clear feedback, tiny animations, and satisfying transitions.
- Personal projects can still show real engineering when the interactions are custom and complete.
Enter the shrine one more time.
Jenny Zhao ยท Birthday Shrine ยท Phaser 3