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/

Icon

イントロダクション

Wordleとは

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

WordleVSとは

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

Icon

ゲームのルール

Wordleの基本ルール

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

WordleVSのルール

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

Icon

対戦の概要

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

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

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

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

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

Icon

使用した技術スタック

Icon

フロントエンド

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

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

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

Icon

バックエンド

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

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

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

Icon

ネットワーキング

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

    • Socket.ioはWebsocketの実装ではありません。
    • なのでWebsocketのクライアントとSocket.ioのサーバーは通信できません
  • プレイヤーの入室時、room内のプレイヤーの単語送信時にクライアント-サーバー間で通信が発生します。

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

Icon

その他技術

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

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

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

反省点など

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

おわり

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でつくりました。

Icon