Draw | Guess

A real-time multiplayer drawing and guessing game built with Vue 3, TypeScript, and Socket.IO. Players take turns drawing while others try to guess the word, earning points for correct guesses. Watch a showcase of the project here: YouTube Demo

Features

• Real-time multiplayer gameplay
• Drawing canvas with multiple tools
• Word guessing system with scoring
• Room-based gameplay
• Timer controls for rounds
• Custom word input option
• Role switching between players
• Responsive Material-UI design

Tech Stack

• Frontend:

  • Vue 3
  • TypeScript
  • Material-UI (MUI)
  • Socket.IO Client
  • Vite

• Backend:

  • Fastify
  • Socket.IO
  • Node.js

How to Play

1. Enter your username and create/join a room
2. Players take turns being the drawer
3. The drawer receives a word to draw
4. Other players try to guess the word
5. Points are awarded for correct guesses
6. The game continues with new rounds and rotating drawers

Game Controls

• Drawer Controls:

  • Draw on the canvas
  • Clear canvas
  • Pause/Resume timer
  • Set custom round time
  • Input custom words
  • Switch roles with other players

• Guesser Controls:

  • Submit guesses
  • View chat messages
  • See current scores