Phantom: The Last Ritual

A haunted-house horror game where your smartphone becomes your controller and your survival depends on what you uncover.

Comment

Play PHANTOM: The Last Ritual! (DEPLOYED)

CLICK HERE TO PLAY! https://marinahacks-6-0.vercel.app/

How to Play -Open the game on your laptop. -Scan the QR code with your phone. -Turn your phone sideways (turn off rotation lock if needed). -Turn GYRO ON to look around by moving your phone. -Click Enter the Haunted House to start! Phone Controls -Joystick: Move around. -GYRO / Swipe: Look around. -Hold INTERACT: Pick up objects and perform rituals. -Hold BANISH: Banish the ghost (after unlocking the power). How to Win 🔴 Find the Crimson Shard (red crystal). -Avoid the ghost! You have 3 lives. -Find the ritual room and hold INTERACT to complete the ritual. -Unlock BANISH power. -Find the ghost and hold BANISH until it's defeated!

Turn on Volume for better experience!

Scan again to retry.

-Good luck surviving!

Pillar

Best Entertainment

Inspiration

The idea for PHANTOM started with wanting to create a game where players could use a real Nerf gun to shoot enemies. I thought it would be really cool to bring something physical into a video game and make the experience more interactive than just using a keyboard and mouse. With Halloween coming up, I started exploring how I could combine that idea with a horror theme. That led me to the concept of a haunted house where players would explore, encounter a ghost, and eventually find a way to fight back. As I developed the idea, I started experimenting with using a smartphone as the controller. I liked how players could physically move and point their phones to look around and aim, making it feel like they were actually part of the game. From there, the idea gradually came together into PHANTOM: The Last Ritual.

What it does

PHANTOM: The Last Ritual is a first-person 3D horror game where you're trapped inside a haunted mansion with a ghost. Your goal is to explore the house, find clues, collect a mysterious artifact called the Crimson Shard, and complete a ritual that allows you to banish the ghost. There are several rooms to explore, including a parlor, cellar, hallways, a ritual chamber, and a forgotten bedroom with a journal that helps reveal more about what's happening. But you're not exploring peacefully. The ghost wanders around the house, starts stalking you, and can eventually attack. You only have three lives, so you have to be careful while trying to finish the ritual. What makes the game different is that you can use your smartphone as a controller. You simply scan a QR code on the laptop screen to connect your phone. From there, you can move with a joystick, look around by dragging your finger or using the gyroscope, interact with objects, and hold a button to banish the ghost.

How we built it

I built PHANTOM using React, TypeScript, Three.js, and React Three Fiber. I used these to create the 3D mansion, its different rooms, furniture, lighting, and environmental details. I also worked on player movement, collisions, interactive objects, and the different stages of the ritual. For the ghost, I implemented behavior that allows it to wander, stalk, and chase the player. I also added jumpscares, sound effects, flickering candles, and fog to make the house feel more like a horror game. The phone controller was another big part of the project. I used Socket.IO with a Node.js relay server to send inputs from the phone to the laptop in real time. The phone connects through a QR code, so players don't have to deal with a complicated setup. I deployed the game on Vercel and hosted the relay server on Render.

Challenges we ran into

The phone controller was definitely one of the biggest challenges. Getting a phone and laptop to communicate wasn't too difficult at first, but making the controls actually feel smooth was another story. The camera would sometimes feel jittery or delayed, especially when looking around by dragging on the phone. I spent quite a bit of time experimenting with camera smoothing, sensitivity, and gyroscope controls. Getting the phone's orientation to match the way I wanted the camera to move was especially tricky. There were moments when moving the phone horizontally would affect the wrong camera direction, so I had to keep testing and adjusting it. Another challenge was getting the haunted house to look the way I imagined. I wanted it to feel dark and creepy, but I also realized that making everything too dark would make it difficult to play. I had to adjust the lighting, fog, and environment while keeping the horror atmosphere. Deployment also took some troubleshooting. I initially tested the phone connection using temporary URLs, but I eventually moved everything to Vercel and Render so the game could be accessed online.

Accomplishments that we're proud of

The thing I'm most proud of is getting the smartphone controller to work with the actual game. Seeing my phone connect to the laptop through a QR code and then being able to move around the haunted house with it was really exciting, especially because that was what inspired the project in the first place. I'm also happy that I managed to turn the idea into an actual playable horror game instead of just a 3D environment. There are rooms to explore, clues to find, a ghost to survive, and a final objective to complete. I worked on this project solo, so getting the frontend, 3D environment, game mechanics, phone controls, networking, and deployment working together was a big accomplishment for me.

What we learned

This was my first time working this much with React Three Fiber and building a 3D game in the browser. I learned a lot about how to work with 3D objects, camera movement, collisions, lighting, and making different parts of a game interact with each other. I also learned more about Socket.IO and real-time communication between devices. Before this project, I hadn't really worked with using a phone's gyroscope to control something running on a different device, so figuring that out was a new experience. One of my biggest takeaways was that getting something to work and getting it to feel good to use are two different things. The phone controller technically worked pretty early on, but making it comfortable and responsive took a lot more effort than I expected.

What's next for Phantom: The Last Ritual

There are still a lot of things I'd love to add to PHANTOM. I want to expand the mansion with more rooms, hidden clues, and puzzles that make players think a little more while exploring. I'd also like to give the ghost more unpredictable behavior so that every playthrough feels a little different. I also want to keep improving the smartphone controller, especially the gyroscope calibration and aiming mechanics. Eventually, I'd love to make PHANTOM into a longer horror game with more challenges, a bigger story, and maybe even multiple endings.

Built With

Share this project:

Updates

Submission history