Shock and Draw

Shock and Draw is a team drawing-and-guessing game with a subversive twist. Both teams play simultaneously, and are able to sabotage the other with various attacks (losing the ability to use colors, guesses come in backwards, etc)

ReactExpressSocket.IO

See screenshots ↓

Core Idea

Team drawing-and-guessing game with a subversive twist

Great for

small parties, remote hangouts

Outcome

Web game (mobile friendly), native mobile app in development.

Waiting Room

The game room screen before the game starts. Users select their usernames and teams

Highlights

Designed to be clean on desktop + mobile

6 Unique team Attacks

Result is determined probabilistically, with weights determined by Yelp ranking, user preferences and order history.

Real-time player abandonment detection

Gracefully handles players quitting mid-game regardless of team role (drawer or guesser)

Multiple private game rooms/sessions

Creating a game starts a session with a unique URL and room code, which players access directly or through the home page.

Inactive session cleanup

Automaticaly deletes game rooms and sessions when all players leave, releasing server resources.

Real-time multiplayer powered by Socket.IO

Low-latency, synchronized game state updates to optimize gameplay experience

Smooth animated transitions

Synchronized, clean transitions between game states for improved UX

Screenshots

A few UI moments from the app—node creation, tagging, and graph navigation.

Fifty Shades attack (drawer view)
An example of an attack. The drawer is unable to use colors until the attack ends

Mobile view — Mobile layout
A view of the mobile layout from a drawer's perspective. All canvas events touch-supported.

Peeping Tom attack (guesser view)
Another example of an attack. The guessers must click (or press) the canvas to see a little cross-section of the drawing. Dragging moves the viewing window.

Want the code / implementation details?

Check out the repo for setup, structure, and ongoing improvements.

View on GitHub