vue canvas websocket

vue+canvas+websocket+less

In order to practice canvas, websocket, and node, I made a small game. You can click here to view it online.

Project screenshots

Build Setup

//clone
npm install
//start server
node app.js
//start vue in another terminal
npm run dev

Completion progress

• Log in. After logging in, the username is stored in sessionStorage.
• After logging in, you can choose your seat and tell everyone your seat through ws.
• Send content. After logging in, you can publish the input content to everyone through ws.
• Chat history can receive everyone’s chat typing content and clear the screen.
• To start the game, you can click the Start Game button on the first floor. After starting the game, you cannot adjust your seat.
• Take turns to draw pictures and guess words by looking at pictures according to the order of seats. Players who draw pictures are not allowed to input or send content.
• Randomly select words from the vocabulary list. Only 12 words were written for practice.
• Special display when the sent content is the correct word (valid after the game starts).
• Keep score
• multi-room games
• Mobile terminal