LoginSignup
7
1

More than 3 years have passed since last update.

ピカチューバトルを作った

Last updated at Posted at 2020-02-01

はじめに

ブラウザ上でコードを書いてRPGの戦闘みたいなことができるやつを作った。

スクリーンショット 2020-02-01 22.50.49.png

これに触発されて作ってみた。(コードもすごい参考にさせていただきました)
https://github.com/benishouga/sourcer

アーキテクチャ

react、redux、redux saga、typescriptを使った静的なページ。
エディタにはreact-monaco-editor、アニメーションにreact-springを利用。

設計

クラス図はこんなイメージ。

ピカチューバトルUML.png

ブラウザ上に書いたコードはScriptLoaderで読み込まれる。
書いたコードはControllerにコマンドとして蓄積される。
実際の行動の実行はControllerManagerから行う。各行動の優先順位とかはControllerManagerでハンドリングしている。
ターン終了時にはControllerに蓄積されたコマンドはリセットされる。
行動を行うとHPやAPの増減が行われる。それと同時にDumpに行動履歴が蓄積される。Dumpに溜め込んだ行動履歴はUI上に表示するメッセージに利用する。
プレイヤーのターン、敵のターンが終わるたびにFieldのcheckFinishが実行されバトルの勝利、敗北判定がされる。

7
1
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
7
1