Undefined

この記事は1年以上前に書かれたものです。現在の状況にそぐわない場合がございますのでご注意ください。

JavaScriptで三目並べゲームをつくる 第7回

情報エリアクラスオブジェクトを実装する

この記事について

今回は過去回の記事でご紹介したクラスモジュールを使用して、進行管理クラスオブジェクトの実装をご紹介したいと思います。

三目並べゲームの完成形はこちらです。

クラスオブジェクト

クラスの概要

概要
情報エリアの管理を受け持つクラスオブジェクトです。
その時々の状態に応じたコンテンツを表示します。

どんな情報を受け持つ? (プロパティ) どんな仕事を受け持つ? (メソッド)
  • 表示コンテンツを作成する
  • 情報エリア内の表示を更新する

プライベートな静的変数(定数)

// 表示するプレイヤー名のあとにつける文字
var TURN_STR = 'さんのターン';

ひとつ静的変数を持っています。情報エリアに表示するテキストの共通箇所を管理しています。

コンストラクタ

/* コンストラクタ */
var that = function Info() {
  :
}

この情報エリアインスタンスオブジェクトはゲームの初回プレイ開始時のみ生成されます。

どんな情報を持っているか (プロパティ)

/* プロパティー */
// カスタムイベント
this.ev = {};

/* DOMアクセス */
// 情報エリア
this.infoAreaEl = document.querySelector('#js-infoarea');

情報エリアクラスオブジェクトが持つ情報プロパティはDOMアクセスに関わるもののみです。固有の状態は持たないことになります。
DOMアクセスのためのプロパティthis.infoAreaElは画面上部のどのプレイヤーのターンか表示するエリアへのアクセス用です。

どんな通知を受け取るか(イベント)

/* カスタムイベント設定 */
// ゲームのターンが進んだとき
this.ev.update  = document.createEvent('Event');
this.ev.update.initEvent('info.update', false, true);

/* イベント */
// ゲームのターンが進んだとき
this.infoAreaEl.addEventListener('info.update', this.update.bind(this), false); 

ひとつのカスタムイベントを使用しています。

イベントタイプinfo.updateは、ゲームが開始されたときとターンが進んだときに発生します。

どんな仕事道具を持っているか

updateメソッド

/*
 * update
 * 情報エリア内の表示を更新する
 */
update: function() {
  // 表示更新
  var name = GAME.gameControl.players[GAME.gameControl.curPlayer].name;
  this.infoAreaEl.innerHTML = name + TURN_STR;
}

情報エリアの表示を更新するメソッドです。ゲームが開始されたときとターンが進んだときに実行されます。

7〜8行目:ゲーム進行管理インスタンスオブジェクトのプロパティからプレイヤーの名前を取得し、情報エリアインスタンスオブジェクトの静的変数TURN_STRを付け足して表示します。

おわりに

今回の情報エリアの実装をもってようやく、三目並べゲームのすべての実装をご紹介させていただきました!

今回のゲームの実装では、三目並べというひとつの作品(というほどのものじゃないですが)をつくるにあたって、必要な機能要件とゲームを形づくる要素を洗い出し、役割別に割り振って個々に管理しました。それを通知というかたちで相互にやり取りさせ全体で三目並べというゲームにしています。
役割別に管理を分けることで、新たに機能を追加したり、リファクタリングすることが容易なるのではないかと思います。

お読みいただきありがとうございました!

to top