Light

zachstrives / draw-guess-game Goto Github PK

View Code? Open in Web Editor NEW

14.0 14.0 4.0 6.73 MB

A full stack web application for a multiplayer drawing and guessing game. It is a fun party game that you can play with your friends or random people.

Home Page: http://drawguess.online

License: MIT License

HTML 1.38% CSS 18.32% JavaScript 80.30%

draw-guess-game's Introduction


const Zach = {
    languages: ["Javascript", "Python", "Java", "Typescript", "C#"],
    technologies: {
        backEnd: ["Node.js", "ASP.NET", "Express", "SpringBoot", "Django", "Flask"],
        frontEnd: ["React.js", "Redux", "WeChatApp", "Bootstrap", "React Native"],
        devOps: ["Azuer", "Docker🐳", "Nginx"],
        databases: ["MongoDB", "MySql", "SQLite", "PostgreSQL"],
        misc: ["Firebase", "Socket.IO", "BS4", "open-cv", "GraphQL", "SendGrid"]
    },
    certificates: ["Graph Developer - Associate", "Microsoft Certified: Azure AI Fundamentals"],
    architecture: ["Serverless Architecture", "Progressive web applications", "Single page applications"],
    currentFocus: "Web Development"
};

💻 Weekly Summary

C#           48 mins         ███████████▓░░░░░░░░░░░░░   47.22 %
JavaScript   21 mins         █████▒░░░░░░░░░░░░░░░░░░░   21.22 %
Binary       15 mins         ███▓░░░░░░░░░░░░░░░░░░░░░   14.87 %
XML          12 mins         ███░░░░░░░░░░░░░░░░░░░░░░   12.61 %
JSON         3 mins          █░░░░░░░░░░░░░░░░░░░░░░░░   03.72 %

draw-guess-game's People

Contributors

Stargazers

Watchers

Forkers

thongteav lunhan sarah-hao knightli

draw-guess-game's Issues

Drawer should be able to save the drawing

Countdown function for word selection

Put the countdown to the player's word selection in the upper right corner of the canvas

Start a new round of games

When the round of the game is over, the homeowner can start a new game

Specific word category

The user can select the category of the word he wants to draw, and provide several options.

Frontend randomly selects words

Users should see the canvas updating the drawing.

When the drawer suddenly leaves the game, the drawer needs to be passed to the next player.

Change display of players in round

A user can see a timer showing the remaining time for that turn.

User can create a public room with no room name

Need a notification when user created a room with no room name

For guessers, word will reveal some characters as time progresses.

The user can chat in the game, and the chat box can display some game information (such as the player entered the room, the player guessed the correct answer, the player left the room, etc.)

A drawer can pick a word from two options when it's their turn to draw.

Create room public room

Players can create rooms and wait for other players to join

Frontend
Backend
Full Stack communication

Different game modes

versus mode, bingo mode and limited strokes mode.

login&register frontend

New login and register interface with error alerts

Modify front-end fonts

Modify front-end fonts to make the interface more beautiful

lobby

All created rooms can be displayed

A user can use drawing tools(stroke, color, eraser, undo, clear) in the canvas.

change stroke thickness
change stroke color
undo
clear

If a pen draws the boundary of a canvas while the painter is drawing, that stroke will not be transferred to another player's canvas in real-time.

Solution: might want to extend mouseUp's listeners to a larger area.

Fix chatroom

User keyboard return to submit, change a new style for userlist

Registration and login page

Realize user registration function, connect to database to store user information

The user cannot exit the room properly when returning to the previous page.

Random wave path for the background

https://speckyboy.com/css-glassmorphism/

Select the timer function of the word page

Set a time limit for the user to select words (about 10 seconds)

Add a log out button in the lobby

Increase the user log out function, add the log out button to the lobby page.

The list of rooms in the lobby allows users to see the creation of new rooms in real time.

User can join room via URL link

Chat box function

Create a chat box where users can type messages. They can also guess the answer, the correct answer will give credit to the users.

Display icons in player list for current drawer and room host

Same user logging in another browser will be seen as a different person in the room

Random three words will be provided for players to choose.

Duplicated as #61

A drawer can see the word that they need to draw on the canvas.

The chat should have a word matching detection to hide words with more than 3 matching characters to avoid giving away the answer.

Change lobby page layout and UI

When the whole round is over, the state of the game should return to the waiting stage and the game can be restarted.

A guesser shouldn't see the word until they have correctly guessed it.

For public room, a game should start when there are at least 2 players.

When there's only one player, they should see a "waiting for players to join" message in the window.

Room lists sometimes fail to refresh in real time

Maybe because of the Join Room function.

Sometimes after changing drawers, some players' Canvas will not be emptied.

Add sound effects

For example, when time runs out, a person enters the room, chat notification, new people join, guess the correct answer and display the final scoreboard. The user can mute the sound.

Guest login

Users do not need to register for the game, just enter the name to become a guest.

Players can go to different rooms (server implementation)

The room will automatically disband if there are no players in it.

User can create a private room from the lobby containing a 4-digit passcode.

User can create a private room without password

The canvas needs to have a real-time scoreboard to display the user's score and ranking.

Create room private room

Players can create rooms and invite friends to participate

Frontend
Backend
Full Stack communication

change all background

Change to an unified background

User should be able draw on a canvas in a room

display canvas
draw on canvas
resize to fit

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.