2019.09.17

マルバツゲームを作ってみよう~その1:要件定義・画面設計編


皆さん、マルバツゲームはご存知でしょうか。
3×3のマス目を用意し、○と×を交互に書いていって、先に一列そろえた方が勝ち、というあのゲームです。
おそらく、子どものときに一度は遊んだことがあるのではないでしょうか。

tic-tac-toe-pic

この連載では、HTML、CSS、JavaScript といったフロントエンドの技術を使って、マルバツゲームを作っていきます。

第一回目のこの記事では、マルバツゲームの画面を作成します!
具体的には、ゲームの要件から画面を設計し、これから作るゲームの全体像を共有するところまでやります。

あまり実務で役立つ内容ではないかもしれませんが、自分で一からアプリを設計して実装に落とし込む、いい練習になるのではないかと思います。
読者の皆さんも、よかったら腕試し感覚で挑戦してみてください!😆

それでは早速まいりましょう。

マルバツゲームのルール

皆さんご存知かと思いますが、一般的なマルバツゲームのルールをおさらいしておきます。

プレー人数

  • 2人でプレーする。

ゲームの流れ

  1. 3×3のマス目を用意する。
  2. 自分のマーク(○(マル)or ×(バツ))と先攻後攻を決める。
  3. マス目の中に自分のマークを1つずつ交互に記入していく。
    ※一度記入したマークを消したり上書きしたりすることはできない。
  4. 勝敗(以下参照)がついた時点でゲーム終了。

勝敗

  • タテ3マス・ヨコ3マス・ナナメ3マスのいずれかの列を、先に自分のマークで埋めた方が勝ちとなる。
  • 9マス全て埋まった時点で、どちらも1列揃えられなかった場合、引き分けとなる。

今回作成するマルバツゲームの仕様

以上のルールを今回作るゲームの仕様に落とし込んで行きます。

前提

今回はフロントエンドの技術のみでマルバツゲームを作成します。したがってオンライン対戦機能等は実装しません。
一つのPC画面を見ながら、隣に座っている人と交互に(もしくは一人二役で)画面をクリックして遊べるものを作ります!

画面

画面はこんな感じで作ろうと思います。

画面遷移図

画面は、メッセージ欄、マス目、リセットボタンから構成されています。

画面構成図

メッセージ欄

ゲームの進行に合わせてメッセージが表示されます。

メッセージ 表示されるタイミング
×のばん バツの番のときに表示される。
○のばん マルの番のときに表示される。
×の勝ち! バツが勝ったときに表示される。
○の勝ち! マルが勝ったときに表示される。
引き分け 引き分けになったときに表示される。

マス目

ゲーム開始時に3×3のマス目が表示されます。
マス目をクリックすると、マルまたはバツが記入されます。

ハイライト

どちらかが勝ったとき、そろった列がハイライトされるようにしたいと思います。

リセットボタン

ゲームが終了すると、リセットボタン(「もう一回遊ぶ」ボタン)が表示されます。
リセットボタンをクリックすると、ゲーム開始時の状態に戻ります。

その他仕様

その他、以下のような仕様にしたいと思います。

  • 先攻後攻を決める機能は含まない。リアル世界でじゃんけん等をして決めるようにする。
  • バツが先攻。
  • ブラウザは、Chrome、IE11、Edge、Firefox に対応する。

以上が今回作るマルバツゲームの仕様になります。
大体こんな感じのものを作るというイメージは持てましたでしょうか?

次回からいよいよ実装に入ります!
ゲーム作成にあたって、特別な環境やツール等は必要ありません。テキストエディタ(メモ帳でもOK!)さえあれば作れてしまうので、よかったら一緒に作ってみてください!

連載記事


<!-- Font Awesome Free 5.0.13 by @fontawesome - https://fontawesome.com --><!-- License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->