Focus Room

Focus Room is a fun pixel-style game where you can track your focus sessions, earn points, and decorate your virtual room. It combines productivity with creativity in a retro, pixel art style.

Comment

Inspiration

We were inspired by retro pixel games and the idea of turning mundane tasks into rewarding experiences. Most productivity apps feel dry and uninspiring, so we wanted to gamify study sessions and give users a creative way to stay motivated by decorating a virtual room.

What it does

Focus Room is a pixel-style productivity game where users can:

  • Track study sessions with a timer
  • Earn points as they focus
  • Spend points to buy furniture in a shop
  • Drag and place furniture anywhere in the room
  • Automatically save points and furniture layout across sessions

How we built it

  • Languages & Platforms: HTML, CSS and JavaScript
  • Assets: Pixel art furniture and background created in Piskel
  • Font: Press Start 2P

Challenges we ran into

  • Making drag-and-drop furniture intuitive while ensuring it aligns to a grid
  • Preventing negative points and keeping the point system accurate
  • Designing a pixel-art room that looks good on different screen sizes
  • Coordinating as a team while integrating art assets and JavaScript functionality

Accomplishments that we're proud of

  • Original pixel art furniture and background created by the team
  • Smooth drag-and-drop mechanics with grid snapping
  • Persistent points and room layout using browser storage

What we learned

  • Web development fundamentals with HTML, CSS and JavaScript
  • Designing and implementing interactive drag-and-drop features
  • Creating pixel art assets and integrating them into a web app
  • Working effectively as a small team under a time constraint

What's next for Focus Room

  • Adding furniture rotation and deletion
  • Adding hover previews or animations for furniture in the shop
  • Implementing sound effects for actions like buying and placing furniture
  • Expanding the shop with more items and customisation options
  • Adding an interactive and customisable character that the user can personalise and move around the room

Built With

Share this project:

Updates