A real-time, multiplayer drawing and guessing game built using Node.js, Socket.IO, React, and TypeScript. Players join rooms, take turns drawing prompts, and compete to guess the drawings in a fun and interactive environment. With real-time canvas synchronization, timeouts for word selection, and smooth drawing experiences, this project captures the excitement of collaborative gameplay.
The backend is developed using Node.js and Socket.IO. It handles real-time communication between clients and the server.
-
Client Events:
connect- Client connects to the server.disconnecting- Client disconnects from the server.joinRoom- Client joins a room.leaveRoom- Client leaves a room.startGame- Client starts the game.draw- Client sends drawing data.guess- Client sends a guess.changeSettings- Client changes game settings.wordSelect- Client selects a word.
-
Server Events:
joinedRoom- Server confirms client has joined the room.playerJoined- Server notifies when a player joins.playerLeft- Server notifies when a player leaves.gameStarted- Server notifies when the game starts.gameEnded- Server notifies when the game ends.drawData- Server sends drawing data to clients.guessed- Server notifies when a word is guessed.turnEnded- Server notifies when a turn ends.chooseWord- Server requests the drawer to choose a word.wordChosen- Server sends the chosen word to clients.settingsChanged- Server notifies when settings are changed.guessFail- Server notifies when a guess fails.
Players join a room using a unique room ID. If the drawer takes too long to choose a word, one is automatically assigned. Each turn has a time limit for guessing.
The frontend is developed using React with TypeScript and Vite for a fast development experience.
git clone https://github.com/DivyanshuLohani/SyncDrawGuess.git
cd SyncDrawGuessdocker run -d -p 6379:6379 rediscd server
npm install && npm run devcd client
npm install && npm run devhttp://localhost:5173