Welcome to skribbl.io 🎨
, a digital rendition of the classic game of pictionary, where players utilize a chatroom to guess answers and control gameplay. This project was heavily inspired by the popular online game, skribbl.io.
skribbl.io
was made by @00eemsy (Emily) and @ycheuk (Yik Yin) as part of our 2024 Reed Hackathon. We both worked on all aspects of the project, but broadly speaking Emily focused more on implementing client-server interactions and Yik Yin focused more on stylization/frontend functionality. This hackathon acted as an introduction to HTML, CSS, JavaScript, web development, client-server interactions, etc., and skribbl.io
was the capstone of our week-long learning experience!
This game was created with HTML/CSS/JavaScript, with the help of runtime environments/frameworks/etc. such as Node.js, Express.js, and Socket.IO for our backend
⬇️ Opening still of skribbl.io
- Type commands directly into the chatbox
- After starting a round (with the
start
command)- The chat will choose a random player as that round's drawer and will give them a keyword to draw out
- Using the canvas's different pen colors and widths, the drawer will be given 1 minute to draw out their keyword
- Using the chat, other players will type their guesses into the chat
- The first one to guess the word gets a point added to their score!
- If no one guesses it, the round is null and no one gains a point
- When someone's selected as the drawer, no one else can draw on the canvas. When
start
hasn't been activated, anyone can draw on the canvas - When you first join the server, you're prompted to make your own username
- The chat announces when a user connects/disconnects
- From ycheuk/skribblio, download the following files:
app.js
(the server-facing js code)index.html
- the
public
folder, which includes:style.css
script.js
(the client-facing js code)
- Also make sure to have Node.js and Express.js installed on your device (link to installing Node.js, link to installing Express.js)
- Using your preferred console, type the following:
node app.js
- Open the following link on your preferred browser: https://localhost:3000