y-yana / udn

技育CAMP ハッカソン vol.2 （2021/04/24~25）同時編集機能を搭載したお絵かきチャットアプリ「黒板であそぼ」努力賞🏆

黒板であそぼ 🏫 🎨

複数人で同時にお絵かきをして遊ぶことができるWebアプリケーションです。

🥳 遊び方

1. 「放課後の学校に行く」ボタンを押して、廊下に移動する
2. 入室したい教室を選択し、自分のHNを入力したあとに入室ボタンを押す
   • 廊下では、各教室に何人いるかをリアルタイムで確認することができます！（※PC版のみ）
3. 教室内で自由に遊ぶ
   • お題生成機能を利用すると、しりとりやお題当てゲームができます
   • 黒板は同じ教室内にいる人同士でリアルタイムで共有されているので、同時編集できます
   • 黒板に描いた絵を保存することができるので、一緒に遊んだ思い出を残すことができます
   • チャット機能を利用して、同じ教室にいる人同士でコミュニケーションを取ることができます
   • etc.　色々なことができるので、自由に遊び方を見つけてください！

👍 できること

• 複数人で同時に黒板にお絵かきする
• お題を生成して、絵しりとりやお題当てゲームをする
• ペンの太さを変える
• 黒板消しで描いた絵を消す
• 黒板に描いた絵を一気に全て消す
• 描いた絵を簡単にダウンロードする
• 同じ部屋にいる人同士でチャットをする

✨ アプリのURL

https://after-school-black-board.herokuapp.com/
※ PC推奨です

💻 使用技術

• HTML
• CSS ( Sass / csspin )
• JavaScript ( jQuery / node.js )
• WebSockets
• webpack
• Docker
• Heroku

💯 こだわった点

• とにかく「放課後の学校」という世界観にこだわった．(タイトル，ロゴ，背景)
• 共同編集機能だけでなく，ルーム機能を実装し，より多くの人に遊んでもらえるようにした．
• レスポンシブ対応

😎 制作メンバー

• Leon Kunishi
• Ryunosuke Ikeda
• Yuuna Yanagida

🙇 使用した素材

• 背景画像：きまぐれアフター背景素材置場