ChiNoir

• 

  Main Menu

• 

  How To Play

• 

  Intro

• 

  Crime Scene #1

• 

  Crime Scene #2

• 

  Suspects

• 

  Suspect Detail

• 

  Arresting

Inspiration

We got Inspired by LA Noire a popular action-adventure video game that follows detective Cole. When We thought about a narrative storytelling, detective theme is the best theme that fits this topic.

What it does

Our storytelling game puts the user in the shoes of a detective, which the detective investigates two murder scenes including 3 clues each, where they are only allowed to check 2 clues, they have to pay attention to details and figure out the murderer based on the given 4 suspects in the end.

How we built it

We used NextJS framework for faster and easier page transitions. To keep track of users actions we used react's useState hooks. We made our own app wrapper for background music, using useContext hook of react. Designs and drawings are made via AI prompts. For making animations between pages we used CSS animations.

Challenges we ran into

Getting the audio parts to work consistently across all pages, working with too many absolute positioned components was difficult to manage and lastly getting the images we wanted with enough detail for the user to figure out clues.

Accomplishments that we're proud of

Accomplishing a bug free game, getting the music be consistent across the pages as well as finding good quality appropriate sounds/music for actions. As well as getting compliments from out Mentors!

What we learned

We learned the difficulty of audio implementation in an app, working with games in nextjs and working with in a group while we are pressured by time. On top of that we learned how to add a background music to a web app, build UI elements which is good in UI and UX wise. This project helped us practice frontend development while thinking about how design choices affect user experience and storytelling.

What's next for ChiNoir

Our team wants to add more branching crime scenes, we also plan to let players collect and connect evidence themselves, instead of having the detective explain everything to make the investigation feel more hands-on, and maybe a tool box, where all the evidence is stored.

Built With

• chatgptimagegenerator
• nextjs
• tailwind