LoginSignup
0
2

More than 3 years have passed since last update.

オンライン対戦ぷよぷよをTypeScript + WebSocket + Goで作る - 1.全体設計と見積もり

Last updated at Posted at 2019-11-09

動機

ずっとLaravelをやっているが、PHP以外の言語、具体的にはGoを勉強したいため。
自分で何か作りたいもの作るのが一番勉強になると思っているため。

作るもの

スクリーンショット 2019-11-09 13.52.52.png
ブラウザ上で遊べるぷよぷよのオンライン対戦ゲーム
ロビーと対戦ルームがある

全体仕様

  • ユーザーログインや、対戦結果の保存は無し。
  • 対戦ルーム一覧が表示され、入室→2人揃うと対戦開始
  • 対戦終了すると、続けて対戦するか退室するかを選ぶ
  • クライアント側デザインは適当に丸と四角とテキストを並べるだけ
  • 回線環境やPCスペックにより生じる速度差をサーバーサイドで調整する、、などの込みいったところは難しそうなので考慮しない

全体アーキテクチャを決める

サーバーサイドはGoを勉強したいのでGo。
クライアントサイドは僕の技術スタック制約でJavaScript。TypeScriptもついでに勉強したいので、TypeScript + Canvasがいいのかな。
そうなると通信プロトコルはWebSocket一択だと思う。

工数見積もり

直感で100時間で作れるかなと思った。経験上それよりは膨らむので、心の中で160時間と見積もり。仕事だったら250時間(なので1ヶ月半〜2ヶ月ください)と言ってる。品質をちゃんとするなら加えてテスト/修正期間も。

対戦中の詳細仕様を考え始める

サーバー/クライアントにそれぞれどの処理を担当させるのか、通信タイミングをどうするかを決める/考えるのが一番重要なところだと思う。
WebSocketの通信速度や遅延という懸念点もノウハウがなく実際どの程度なのかわからない。
わからないことが多いながらも考えてみて、処理担当はいったん以下にして進めることにする。

クライアント側:
 - ぷよの操作
 - ぷよが置かれたらサーバー側にフィールドのデータ送信
 - サーバーからおじゃま落下アニメーションや連鎖アニメーション再生の命令が来たらアニメーション再生実行

サーバー側:
 - ツモ生成
 - フィールド情報保持
 - クライアントからフィールドのデータ更新される度に連鎖ロジック実行と、連鎖があれば連鎖アニメーション再生命令

クライアント/サーバーそれぞれの役割を雑に決めたので、次はさらに詳細設計を進める。

次記事 2.詳細設計

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2