Undefined

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

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

モーダルウィンドウクラスオブジェクトを実装する

この記事について

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

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

クラスオブジェクト

クラスの概要

概要
モーダルウィンドウの管理を受け持つクラスオブジェクトです。
その時々の画面に応じたコンテンツを表示します。また、(リ)スタートボタンクリックしたときには進行管理インスタンスオブジェクトにゲームスタートを通知します。

対象画面 コンテンツ
スタート画面
  • 「ゲームをスタート!」テキスト
  • スタートボタン
 結果(リスタート)画面
  • 対戦結果テキスト
  • 「ゲームをリスタート!」テキスト
  • リスタートボタン
どんな情報を受け持つ? (プロパティ) どんな仕事を受け持つ? (メソッド)
  • 表示コンテンツを作成する
  • 表示を更新する
  • 表示・非表示を切り替える
  • ゲームスタートを通知する

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

// モーダルウィンドウの状態別表示テキスト 
var MODAL_STR = {
  start: {
    info: 'ゲームをスタート!',
    btn : 'スタート'
  },
  restart: {
    result: ['引き分け!<br>', 'の勝ち!<br>'],
    info  : 'ゲームをリスタート!',
    btn   : 'リスタート'
  }
};

ひとつ静的変数を持っています。
モーダルウィンドウに表示するスタート画面とリスタート(結果)画面の各状態のときに表示するテキストをオブジェクトリテラルで管理しています。

コンストラクタ

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

ゲーム進行管理クラスのコンストラクタ内で一度だけインスタンス化されます。

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

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

/* DOMアクセス */
// スタート画面(モーダルウィンドウ全体)
this.modalEl = document.querySelector('#js-modal');
// コンテンツエリア(モーダルウィンドウに表示するテキストコンテンツ)
this.infoEl  = document.querySelector('#js-modal-info');
// スタートボタン(モーダルウィンドウに表示するボタン)
this.btnEl   = document.querySelector('#js-modal-btn');

モーダルウィンドウクラスオブジェクトが持つ情報プロパティはDOMアクセスに関わるもののみです。固有の状態は持たないことになります。各プロパティが保持する情報はコメントの通りです。

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

/* カスタムイベント設定 */
// モーダルウィンドウ内表示を更新するとき
this.ev.update = document.createEvent('Event');
this.ev.update.initEvent('modal.update', false, true);

/* イベント */
// モーダルウィンドウ内表示を更新するとき
this.modalEl.addEventListener('modal.update', this.update.bind(this), false);
// ボタンがクリックされたとき(通知)
this.btnEl.addEventListener('click', this.notification, false);
// ボタンがクリックされたとき(非表示)
this.btnEl.addEventListener('click', this.toggleDisplay.bind(this), false);

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

  1. イベントタイプmodal.updateは、ゲーム進行管理インスタンスオブジェクト生成直後とゲームが終了したときに発生します。
  2. ふたつのクリックイベントは、ゲームが開始された通知とモーダルウィンドウの非表示を実行します。

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

updateメソッド

/**
 * update
 * モーダルウィンドウ内の表示を更新する
 */
update: function() {
  // 表示コンテンツを作成する
  this.createContent(GAME.gameControl.state, GAME.gameControl.actionState);
  this.toggleDisplay();
},

モーダルウィンドウ内の表示を更新するメソッドです。ゲーム進行管理インスタンスオブジェクト生成直後とゲームが終了したときに実行されます。

createContentメソッド

/**
 * createContent
 * 表示コンテンツを作成する
 * 
 * @param string state ゲーム画面の状態
 * @param number actionState ゲーム結果状況
 */
createContent: function(state, actionState) {
  var stateObj   = MODAL_STR[state],
      winnerName = '',
      result     = '';

  if ('restart' === state) {
    winnerName = GAME.gameControl.winner ? GAME.gameControl.winner.name : '';
    result = winnerName + stateObj['result'][actionState];
  }

  this.infoEl.innerHTML = result + '<br>' + stateObj['info'];
  this.btnEl.innerHTML  = stateObj['btn'];
},

モーダルウィンドウに表示するコンテンツを作成するメソッドです。

9行目:ゲーム画面の状態をもとに、静的変数MODAL_STRからゲーム画面状態のコンテンツを取得します。

13〜16行目:リスタート(結果)画面時のみ、ゲーム結果のコンテンツを作ります。

18行目:テキストコンテンツを表示します。

19行目:ボタンを表示します。

notificationメソッド

/**
 * notification
 * ゲームスタートを通知する
 */
notification: function() {
  // 進行管理に通知
  GAME.gameControl.gameEl.dispatchEvent(GAME.gameControl.ev.started);
},

(リ)スタートボタンがクリックされたときに、ゲーム進行管理インスタンスオブジェクトに通知しているメソッドです。

toggleDisplayメソッド

/**
 * toggleDisplay
 * モーダルウィンドウ表示・非表示切り替え
 */
toggleDisplay: function() {
  if ('' === this.modalEl.style.display || 'none' === this.modalEl.style.display) {
    this.modalEl.style.display = 'block';
  } else {
    this.modalEl.style.display = 'none';
  }
}

モーダルウィンドウの表示・非表示を司るメソッドです。

6〜10行目:モーダルウィンドウ要素のdisplayスタイルを切り替える。

  • displayスタイルが設定されていないか、値がnoneの場合はblock(表示)にする。
  • それ以外(block)の場合はnone(非表示)にする。

お読みいただきありがとうございました!次回は情報エリアクラスオブジェクトを実装していきたいと思います。

to top