イントロダクション

Wordleとは

Wordleはブラウザでできる英単語当てゲームです。
2021年10月に公開されて以来、世界中でその人気を博しています。

WordleVSとは

Wordle VSはそのWordleを対戦型にしたものです。

ゲームのルール

Wordleの基本ルール

5文字の英単語を6回のトライで当てるとクリアです。
各トライでは、その単語にその文字が含まれているか、位置が合っているかを色で表示してくれます。それを頼りにプレイヤーは単語を推測します。
(一度遊んでみるとわかりやすいです。)

WordleVSのルール

基本的なルールは同じです。

対戦の概要

• ゲームは1vs1で進行します。

• プレイヤーはWordleの基本的なルールにしたがって単語を推測します。このとき、相手の進行状況(各トライの色)がわかるようになっています。

• 6回のトライ以内で先に単語を当てたプレーヤーが勝利です。

• 6回のトライを使い切った場合はバーストとなり相手の勝利となります。

• ターン制ではありません。

使用した技術スタック

フロントエンド

• Viteを用いて高速なビルドを実現しています。

• TailwindCSSで作成したボタンやモーダルのコンポーネントは様々な場所で再利用しています。

• 基本的にTawilwindCSSを使用していますが、アニメーションをつけているところはただの(vanilla)CSSで書いています。

バックエンド

• 単語のリストはjsonで保存されています。

• プレイヤーから送られてきた単語を単語リスト上から検索し存在すれば、正誤判定をしてその結果をroom内にブロードキャストします。

• ゲームの進行状況のデータはメモリ上(構造体)で完結していて、ファイルやその他DBには保存していません。

ネットワーキング

• Socket.ioを使用して、ブラウザと通信します。

  • Socket.ioはWebsocketの実装ではありません。
  • なのでWebsocketのクライアントとSocket.ioのサーバーは通信できません

• プレイヤーの入室時、room内のプレイヤーの単語送信時にクライアント-サーバー間で通信が発生します。

• サーバーから送信されるデータは基本的にroom内にブロードキャストされるものです。

その他技術

• Docker
  • Docker, Docker Composeを用いることで、環境構築の手間が削減できました。
  • Dockerがあれば、どこでも開発環境を再現できます。
  • Makefileを使って、コマンドを実行しやすくしました。
• Nginx
  • webサーバーにはNginxを使いました。
  • ViteでビルドしたディレクトリをNginxのコンテナにマウントしています。

やりたかった、やりのこしたこと

• CI/CD
  • gitlabにpushしたら自動で、ビルドやデプロイをしてくれるようにするのが理想。
• ゲーム関連
  • ユーザー、フレンド機能
  • 連戦機能
  • ルーム検索機能
  • SEの実装

反省点など

• 最後に追い込むみたいなことはなかったので、そこは良かった。
• カタチにはなっているが、もう少し色々な実装ができたのではないか。
• 稼働率の差が大きい。
• リアルタイムの通信の実装を理解できた。

おわり

WordleVS

2023年度前期 ソフトウェア開発演習II (Programming 3)

• 215703K 前竹泰成
• 215714E 小川大賀
• 215739A 山里拓夢

GitLab repo: https://gitlab.ie.u-ryukyu.ac.jp/e215714/prog3

Deploy to: http://wordle-vs.st.ie.u-ryukyu.ac.jp/

このスライドはMarp、Draw.ioでつくりました。