Inspiration

Our inspiration for this web app is Draw My Thing.

What it does

There are two games available on Scribbles It! 1) Painting Room allows user to connect with other users who join the drawing room at the same time and draw on a shared canvas. Users can also chat with one another using the chat box on the side. The tool bar at the bottom allows user to change brush size, brush color, and erase. 2) Guess the drawing is a game and its algorithm is similar to Draw My Thing. The users join a drawing room and one of the connected user will be the drawer and get a word. Users will be notified whether they are the drawer or the guesser. If the user is not a drawer, they cannot draw on the canvas. Same functionalities for chatbox and toolbar. However, the chat box is only used to input guesses. If one of the user inputs a guess that is a match with the given word, that user gets 5 points and win the round. The canvas will the be clear and reset.

How we built it

Our main technologies used were HTML, CSS, JavaScript, and Node.js We started by creating the Guess the drawing game. We designed the outline for the web page and started implementing it using just HTML and CSS. After that, we worked on the shared canvas using mainly p5.js and Socket.io. Once the canvas is done, we worked on the chat box and the game algorithm for "correct guess" and "scores". Afterwards, we built the tool bar using html, css, and javascript. We also worked on the home page and allowed multiples users to join the drawing rooms at the same time, instead of only 2 people like when we started.

Challenges we ran into

We got several bugs that were minor but were easy to miss. (E.g: call wrong variables names or commenting out the necessary functions while testing) We wanted to implement dynamic routing so there can be multiple drawing rooms running at the same time but did not get to finish this part due to time limit. Overall, we did not run into major challenges because I was mainly working on the front end side and Jackie was mainly working with back end. However, we do sync our work really often and switch roles several times.

Accomplishments that we're proud of

At the beginning, we set out 3 goals: implement the shared canvas, implement the chat, and implement random word. We are proud to say that we were able to accomplish all of these goals and even did more than expected. We were able to create 2 games, added a tool bar, and implemented a scores system. We also improved our drawing rooms by allowing multiple users, not just 2 users. And we also managed to create a home page for the game!

What we learned

Each of us has strengths in different area: I was better at front end and Jackie was better and back end. However, we were learning from each other as we did this project. Personally for me, I learnt a lot about socket.io, node.js, and heroku just in 12 hours. I was able to work on server side programming and get myself more familiar with the back end technologies. It was a lot of fun! Jackie also joined in on designing the webpage, testing the client-side functions, and working on the home page. She was able to participate in creating a lot of front end stuff while focusing on back-end, which was a great thing!

What's next for Scribbles It!

For the future of Scribbles It!, as I mentioned before, we wanted to work on dynamic routing. If possible, I want to create more drawing games within this app. Another goal that we want to achieve is the make this web app responsive since we have yet to make that due to the short time limit. I would also like to further improve the scores system and create a "hint" functionality.

Share this project:
×

Updates