JavaScriptでシェフィを実装する(設計編)


2014年 07月 23日

問題

前回、新人研修の一環として「オセロの実装」を課題として設定したものの、
設定した当人が実装できないようでは話にならないので頑張って実装しました
(一人二役で指す寂しいゲーム編/ 遅延評価編/ 仮AI作成編/ 本格AI作成編/ AI高速化編/ AI vs AI編)。

これはこれで楽しかったものの、良くも悪くもオセロですから、
寝るのも忘れて遊びたくなるものかと言われるとそういうものではありませんでした。

どうせならもっとエキサイティングでキュートなゲームを実装してみたいものです。
何か良い題材はないものでしょうか。

回答

シェフィのパッケージ画像

そこでシェフィです。
シェフィとは、

数多の障害

このような数多の障害を乗り越え、

増えたひつじ

このようにかわいらしいひつじを増やすだけの簡単なカードゲームです
(リプレイ例)。

一人用かつカードの種類も少ないとはいえ、
オセロよりもルールは複雑なので色々と考えるところはありそうです。
どうせならもっと本格的なカードゲームを実装してみたいところですが、
いきなりそういうものに手を出しても挫折しそうなので、
まずはとっかかりとしてちょうど良さそうな規模であるシェフィを実装することにしましょう。

設計

実装方針

シェフィはカードゲームとしては簡単な部類ですが、
行き当たりばったりで実装できるようなレベルではないので、
予めどういう方針で実装していくかを決めておきましょう。
今回は以下の順序で進めることにします:

  1. ゲームの基礎部分の作成
  2. 基本ルールの実装
  3. 仮UIの作成
  4. 個々のカードの実装
  5. UIの本格化

ゲームの基礎部分をどう作るか

オセロを実装した時と同じ手法を取りましょう。
つまり、盤面を接点とし、その盤面で取り得る選択肢を枝としたツリーを作ります。

シェフィのゲームツリーのイメージ

オセロの場合は
「敵の石を取れる場所に石を置く」か「どこにも石を置けないならパス」
しか選択肢はありませんでした。
しかしシェフィのようなカードゲームの場合、プレイヤー毎にターンが周り、
各ターンは複数のフェイズ(とかステップとか)で構成されており、
それぞれのフェイズで自動で何かが起こったりプレイヤーが何か行動を起こせたりします。

ルール上、
プレイヤーの意志とは関係なく自動で処理される事柄
(「手札を補充する」や「山札を補充して次のラウンドを始める」等)
は多々あるのですが、
これも「選択肢」の一種として扱うことにします。

この方がルール上定義されている事柄を一つ一つ実装していけるので分かり易いですし、
ある事柄の後に発生する事柄については再帰的に記述できるので実装が簡略化できます。

それに、プレイヤーが取れる行動のみを「選択肢」にしてしまうと、
ツリーには自動処理される事柄を全て終えた結果しか盤面しか残らず、
盤面の変化を把握し辛くなります。
後々UIを豪華にする時にも不便でしょう。

また、オセロの時は素朴な実装から始めて、
途中からパフォーマンス改善の為に遅延評価を導入しましたが、
シェフィのようなカードゲームは分岐が膨大なので最初から遅延評価ありで実装を始めます。

それと、開発と動作確認をさくさく進める為に、
最初は個々のカードをプレイしても何の効果も発揮されないものとします。

仮UIをどうするか

最初はテキストで盤面を表示することにします。
また、選択肢は全てボタンの形で提示することにします。

本当は
「手札のカードをクリックするとそのカードをプレイできる」とか
「山札はちゃんとカードが積み重なって束になってるように表示する」とか
便利にしたり凝った見せ方をしたいところは色々とあるのですが、
ルールを実装するだけで一苦労だと思うので、今の段階では我慢しましょう。

次回予告

これで大体の方針は決まりました。
次回は基礎作成編です。