vue canvas websocket

vue+キャンバス+Webソケット+レス

Canvas、WebSocket、Node を練習するために、ここをクリックしてオンラインで見ることができる小さなゲームを作成しました。

プロジェクトのスクリーンショット

ビルドセットアップ

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

完成進捗状況

• ログインします。ログイン後、ユーザー名は sessionStorage に保存されます。
• ログイン後、自分の席を選択し、WSを通じて全員に自分の席を伝えることができます。
• 内容を送信する ログイン後、入力した内容をWSを通じて全員に公開することができます。
• チャット履歴では、全員のチャット入力内容を受信して​​画面を消去できます。
• ゲームを開始するには、1 階の「ゲーム開始」ボタンをクリックします。ゲーム開始後は座席を調整することはできません。
• 席の順番に従って順番に絵を描いたり、絵を見て単語を推測したりします。絵を描くプレイヤーはコンテンツを入力したり送信したりすることはできません。
• 語彙リストから単語をランダムに選択します。練習用に12単語だけ書きました。
• 送信内容が正しい単語だった場合の特殊表示（ゲーム開始後有効）。
• スコアを記録する
• マルチルームゲーム
• 携帯端末