Undefined

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

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

三目並べの実装方針を決める

はじめに

JavaScriptで三目並べを作った備忘録を書きたい思います。学習のためjQuery等のライブラリは使わず素のJavaScriptで今回はクラスライクな実装を試しています。でもES2015からクラス構文が導入され、ある程度各ブラウザでも実装されつつありますよね^_^;

おことわり

  • 作成する三目並べゲームはES5のIE8以下には対応しておりません。
  • JavaScript以外のHTML,CSS(SCSS)については説明しておりません。
  • この実装方法はJavaScriptらしい書きかたを逸脱しているかもしれません。

三目並べゲームの完成形はこちらです!2人プレイで、プレイヤー2(オートプレイ)との対戦プレイになっていますのでお試しください。

See the Pen 三目並べゲーム(テストラン) by Mizzz (@mizzz) on CodePen.

三目並べの要件を考える

三目並べのルール

三目並べを作るにあたってどのようなことを実装すべきでしょうか。それを確認する第一歩として、まず三目並べのルール(と前提)を書き出してみたいと思います。

三目並べのルール(と前提)

  • 3×3のマス目を持った正方形のゲーム盤を持つ。
  • プレイヤーは順番にひとつづつマス目を埋めていく。
  • プレイヤーの埋めたマス目が「たて・よこ・ななめ」のいずれかに一列に並んだら勝利。
  • 勝利者がいないまますべてのマス目が埋まったら引き分け。

う〜む。こんな感じでしょうか。

追加したらよさそうな機能

ゲームとしてはスタート画面や結果画面があったり、ゲームが終わった後もう一回はじめから遊べたりしたら良さそうです。プレイ人数(ふつう二人だけど)や何目並べか選べたり、今どのプレイヤーの順番なのか表示されていたら親切かもしれません。ひとりで遊ぶ場合のための自動対戦機能もつけてみましょう。

追加の機能案

  • スタート画面を表示する。
  • スタート画面からゲームをスタートできる。
  • ゲーム結果画面を表示する。
  • ゲーム結果画面からゲームをリスタートできる。
  • はじめから遊びなおすことができる。
  • 今がどのプレイヤーの順番か表示する。
  • 自動対戦機能(オートプレイ)

三目並べの要件

以上、ルールと追加機能案をまとめた三目並べゲームの要件がこちらになります!

三目並べの要件

  • 3×3のマス目を持った正方形のゲーム盤を持つ。
  • プレイヤーは順番に一つづつマス目を埋めていく。
  • プレイヤーの埋めたマスが「たて・よこ・ななめ」のいずれかに並んだら勝利。
  • 勝利者がいないまますべてのマス目が埋まったら引き分け。
  • スタート画面を表示する。
  • スタート画面からゲームをスタートできる。
  • ゲーム結果画面を表示する。
  • ゲーム結果画面からゲームをリスタートできる。
  • はじめから遊びなおすことができる。
  • 何人で遊ぶか選べる。
  • 何目並べか選べる。
  • 今がどのプレイヤーの順番か表示する。
  • 自動対戦機能(オートプレイ)

よーし、これをプログラムで実現することにします!

三目並べゲームの構成要素を考える

三目並べの構成要素

では、この三目並べの要件に必要な構成要素はどんなものでしょうか。自分はこう考えました。

  1. 画面に現れる構成要素
    • マス目を持ったゲームボード
    • スタート画面
    • 結果(リスタート)画面
    • 今がどのプレイヤーの順番か表示するエリア
  2. 画面に現れない構成要素
    • 三目並べのルール
    • (ゲームで遊ぶということを俯瞰したときに)このゲームで遊ぶプレイヤー
    • ゲーム全体の進行管理をするチームリーダー

このなかの『スタート画面』と『結果画面』は同じ要素を共通で使って、表示する内容だけを状況に応じて切り替えるようにしましょう。今回はモーダルウィンドウをプレイ画面にオーバーラップさせることでこれを実現させることにしました。
そして今回はゲーム全体の進行管理をするチームリーダーに、進行に直接関わる三目並べのルールも受け持ってもらいましょう。

それらを整理してまとめるとこんな感じでしょうか。

整理した三目並べの構成要素

  • マス目を持ったゲームボード
  • モーダルウィンドウ(スタート画面・結果(リスタート)画面)
  • 情報表示エリア(今がどのプレイヤーの順番か表示するエリア)
  • プレイヤー
  • ゲーム全体の進行管理をするチームリーダー(三目並べのルールを含む)

整理した三目並べの構成要素を画面に現れない構成要素と画面に現れる構成要素に分けて図式化しています

プログラムの構成を考える

クラスオブジェクトについて

前項の三目並べの各構成要素はそのまま実装時のクラスオブジェクト分けに利用します。ここでの『クラスオブジェクト』という言葉は以下の意味で使っています。

『オブジェクト』
役割をこなすための情報データと仕事道具の集まりを指します。
『クラス』
オブジェクトを作成するための設計図を指します。

ですので、クラスオブジェクトは役割をこなすための情報データと仕事道具の集まりを作成するための設計図ということになります。

それぞれの役割を持ったクラスオブジェクトはその設計図を元に『インスタンスオブジェクト』という実作業者を作り、実作業者はクラスオブジェクトから渡された設計図にある情報と道具を使って仕事をするでしょう。

整理した三目並べの構成要素とクラスオブジェクトの対応

整理した三目並べの構成要素 クラスオブジェクト
ゲーム全体の進行管理をするチームリーダー
三目並べのルール
進行管理クラスオブジェクト
プレイヤー プレイヤークラスオブジェクト
マス目を持ったゲームボード ゲームボードクラスオブジェクト
情報表示エリア
(今がどのプレイヤーの順番か表示するエリア)
情報エリアクラスオブジェクト
(プレイヤーターンの表示)
モーダルウィンドウ
(スタート画面・結果画面)
モーダルウィンドウクラスオブジェクト
(スタート画面・結果(リスタート)画面)

ではそれぞれの役割の中身をご紹介いたします。

各クラスオブジェクトの役割について

1. 進行管理クラスオブジェクト

概要
ゲームの進行全般を受け持つチームリーダー的なクラスオブジェクトです。
マス目が選択されるなどゲーム中にアクションがあったときこのクラスオブジェクトに通知され、このクラスオブジェクトから必要に応じて各クラスオブジェクトに仕事依頼が通知されることになります。

どんな情報を受け持つ? (プロパティ) どんな仕事を受け持つ? (メソッド)
  • 参加プレイヤー数
  • 現在のゲーム状態
  • 終了状態(勝利者あり・引き分け)
  • 現在何手目か
  • 現在のプレイヤー
  • 勝利したプレイヤー
  • ゲームを(リ)スタートする準備をする
  • ターンを更新して次のプレイヤーを決定する
  • ゲーム状態に応じて表示更新を通知する
  • 勝利者を決定する
  • ゲーム終了を監視する(勝利、引き分け)

2. プレイヤークラスオブジェクト

概要
プレイヤーの状態を受け持つクラスオブジェクトです。
プレイヤーの設定情報や選択したマス目の状態を管理します。ゲームスタート時にはプレイヤーの準備をします。

どんな情報を受け持つ? (プロパティ) どんな仕事を受け持つ? (メソッド)
  • プレイヤーの名前
  • プレイヤーが選択したときのマス目の色
  • オートプレイヤーかどうか
  • プレイヤーが選択したマス目
  • (リ)スタート時プレイデータを(リ)セットする
  • プレイヤーが選択したマス目を保持する
  • オートプレイかどうか確認する
  • オートプレイ時、マス目を自動選択する

3. ゲームボードクラスオブジェクト

概要
ゲームボードの情報を受け持つクラスオブジェクトです。
ゲームボードの設定情報やマス目の状態・更新を管理します。ゲームスタート時にはゲームボードの準備をします。

どんな情報を受け持つ? (プロパティ) どんな仕事を受け持つ? (メソッド)
  •  何目並べか(各辺のマス目数)
  • 全マス目数
  • 全マス目の配列
  • 選択済みのマス目
  • 現在選択されたマス目
  • (リ)スタート時、プレイデータを(リ)セットする
  • ゲームボードの作成をする
  • 選択されたマス目を記録する
  • マス目の表示を更新する

5. モーダルウィンドウクラスオブジェクト(スタート画面・結果(リスタート)画面)

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

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

4. 情報エリアクラスオブジェクト(プレイヤーターンの表示)

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

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

インスタンスオブジェクト間の連携について

上記のクラスオブジェクトから作られたインスタンスオブジェクトたちが受け持ちの仕事をこなしていくなかで、他のインスタンスオブジェクトに連絡したほうがいいようなことが起こったときは相手に通知を送ります。通知を送られた相手はそれにより自分の出番を知って受け持ちの仕事を始めます。この通知が閉じた別世界どうしのインスタンスオブジェクト間に連携をもたせて、ゲームをひとつのチームに繋ぎあわせます。

インスタンスオブジェクト間の連携を進行管理インスタンスオブジェクトを中心とした図式で現わしています

ゲーム進行のフローについて

今までの構成要素・オブジェクトに軸を置いた捉え方から、ゲームの始まりから終わりまでの処理実行の流れをおおまかなフロー図で作成してみました。

ゲームスタートから再スタートにつながる循環的なフロー図です

あと、記事一番上でご紹介した三目並べゲームの完成形ではデベロッパーツールのコンソールに、インスタンスオブジェクトが生成されたり、さまざまな仕事が行われたり、通知されたりしたときのタイミングでデバッグ出力していますのでよかったらご覧くださいませ。インスタンスオブジェクト別にカラーを変えているので妙にカラフル。

デベロッパーツールのコンソールでのデバッグの様子です

お読みいただきありがとうございました!次回からは今回の実装方針を元に三目並べを実装していきたいと思います。

to top