2023年度前期 ソフトウェア開発演習II (Programming 3)
GitLab repo: https://gitlab.ie.u-ryukyu.ac.jp/e215714/prog3
Deploy to: http://wordle-vs.st.ie.u-ryukyu.ac.jp/
Wordleはブラウザでできる英単語当てゲームです。 2021年10月に公開されて以来、世界中でその人気を博しています。
Wordle VSはそのWordleを対戦型にしたものです。
5文字の英単語を6回のトライで当てるとクリアです。 各トライでは、その単語にその文字が含まれているか、位置が合っているかを色で表示してくれます。それを頼りにプレイヤーは単語を推測します。 (一度遊んでみるとわかりやすいです。)
基本的なルールは同じです。
ゲームは1vs1で進行します。
プレイヤーはWordleの基本的なルールにしたがって単語を推測します。このとき、相手の進行状況(各トライの色)がわかるようになっています。
6回のトライ以内で先に単語を当てたプレーヤーが勝利です。
6回のトライを使い切った場合はバーストとなり相手の勝利となります。
ターン制ではありません。
Viteを用いて高速なビルドを実現しています。
TailwindCSSで作成したボタンやモーダルのコンポーネントは様々な場所で再利用しています。
基本的にTawilwindCSSを使用していますが、アニメーションをつけているところはただの(vanilla)CSSで書いています。
単語のリストはjsonで保存されています。
プレイヤーから送られてきた単語を単語リスト上から検索し存在すれば、正誤判定をしてその結果をroom内にブロードキャストします。
ゲームの進行状況のデータはメモリ上(構造体)で完結していて、ファイルやその他DBには保存していません。
Socket.ioを使用して、ブラウザと通信します。
プレイヤーの入室時、room内のプレイヤーの単語送信時にクライアント-サーバー間で通信が発生します。
サーバーから送信されるデータは基本的にroom内にブロードキャストされるものです。
このスライドはMarp、Draw.ioでつくりました。