vue canvas websocket

vue+canvas+websocket+less

Um Canvas, WebSocket und Node zu üben, habe ich ein kleines Spiel erstellt. Sie können hier klicken, um es online anzusehen.

Projekt-Screenshots

Build-Setup

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

Fertigstellungsfortschritt

• Anmelden. Nach der Anmeldung wird der Benutzername im sessionStorage gespeichert.
• Nachdem Sie sich angemeldet haben, können Sie Ihren Sitzplatz auswählen und über ws allen Ihren Sitzplatz mitteilen.
• Inhalte senden Nach dem Anmelden können Sie die eingegebenen Inhalte über ws für alle veröffentlichen.
• Der Chat-Verlauf kann die Chat-Eingabeinhalte aller Personen empfangen und den Bildschirm löschen.
• Um das Spiel zu starten, können Sie im ersten Stock auf die Schaltfläche „Spiel starten“ klicken. Nach dem Start des Spiels können Sie Ihren Sitzplatz nicht mehr anpassen.
• Zeichnen Sie abwechselnd Bilder und erraten Sie Wörter, indem Sie sich die Bilder entsprechend der Sitzreihenfolge ansehen. Spieler, die Bilder zeichnen, dürfen keine Inhalte eingeben oder senden.
• Wählen Sie zufällig Wörter aus der Vokabelliste aus. Zum Üben wurden nur 12 Wörter geschrieben.
• Sonderanzeige, wenn der gesendete Inhalt das richtige Wort ist (gültig nach Spielstart).
• Punkte behalten
• Multiroom-Spiele
• Mobiles Endgerät