Pic it Up

Pic(k) it up

Comment

Inspiration

We wanted to create an interactive and fun multiplayer game that encourages players to engage with their surroundings in a creative way. The idea of using a camera to find real-world objects adds an exciting scavenger hunt element, making it both challenging and engaging. This makes the players run around the house or even get out of the house to find the given objects.

What it does

"Pic it Up" is a multiplayer game where players compete to find a given object and show it to the camera to claim points. The first player to find and display the correct object wins the round. The game is mobile-first, ensuring a smooth experience for users playing on their phones.

How we built it

We built the game using web technologies, ensuring it runs efficiently on mobile devices. The tech stack includes:

  • Frontend: React, CSS, JavaScript with a mobile-friendly UI
  • Backend: Socket-based communication for real-time updates between players using Socket.io
  • Camera Access: Web APIs to enable object scanning and recognition

Challenges we ran into

One of the biggest challenges was accessing and flipping the camera from the web. Since different devices handle camera access differently, we had to implement solutions that work across various browsers and operating systems. Additionally, making the game real-time and responsive for multiple players was another challange that was fun facing.

Deploying the server was complicated since vercel doesn't handle websocket hosting

Accomplishments that we're proud of

  • Successfully integrating a real-time multiplayer experience
  • Overcoming mobile camera access limitations
  • Creating an intuitive and engaging UI that keeps players invested
  • Ensuring smooth performance for mobile-first users
  • Using an object detecation model to detect the show object

What we learned

  • How to work with web-based camera APIs and real-time multiplayer interactions
  • Optimizing mobile experiences for web applications
  • Socket.io websockets
  • Deployment of node js servers

What's next for Pic it Up

  • New Game Modes: Adding variations like timed challenges or team-based gameplay
  • Improved UI/UX: Refining animations and transitions for a smoother experience
  • Leaderboards & Social Features: Adding rankings and the ability to invite friends for more competitive play
Share this project:

Updates