はじめに

ブラウザゲームを作る経験がしたくて、「遊び大全」の中で一番好きなゲームがコネクト4を自分で作ってみました。
リアクティブに画面の状態が変わり、ゲームが進行するので、
初学者向けのReact + TypeScriptの練習としては良い題材だったと思います。

この記事では作成の大まかな流れと学んだ知識などを書いています。
最初はチュートリアル記事にしようかと思ったのですが、いちいち説明しなくてもgithubにコメントを入れたので、それで伝わるかなーと判断しました。

また最近Reactを触り始めたこともあり、関数コンポーネントでしか今まで制作物を作っていないので、今回はあえてクラスコンポーネントで作りました。

作った物

コネクト4です。
日本語でいう四目並べですね。
縦横斜めのいずれかで4つ連続でコマを先に並べた方が勝ちとなります。

実際のゲームはこんな感じです。https://www.mathsisfun.com/games/connect4.html
※今回はオンライン機能の実装はしません。

で、今回作ったものがこんな感じ。

最初の必要機能などからざっくりしたアウトラインを作りました。

6×7のセル作成ですね。
セル1つ1つにplayer,indexというデータを持たせて、indexで配置が決まり、playerでどちらかに既に選択されているセルなら色が変わるようにしました。

セルクリック時のアクションでは以下の機能をつけました。

ここは理論の部分でどうすれば良いのか苦労しました。

あーだこーだ悩んだ結果、

横：連続する4つのindexを持つセルが並んでいる
縦：index、index + 7、index + 7 * 2、index + 7 * 3が並んでいる
斜め：index、index + 7 – 1、index +7 * 2 – 2、index + 7 * 3 – 3が並んでいる

で配列を切り出し、それらPlayerが全て一致しているかどうかをboolean型で返す関数を作り判定しました。

デザインを修正したり、文言を入れたり、コメントで簡単な説明を入れたりして完成です。
作成自体は3~4時間ほどかかりました。

ブラウザゲームを作る経験ができたのが嬉しかったです。
いつか遊び大全にあるゲームを全て作りたいな！！(ピアノはなしで)

クラスコンポーネント縛りをしたのですが、好みは関数コンポーネントだなと改めて感じました。
現在はこのコネクト4をクラス→関数コンポーネントのリファクタリングをしているので、関数コンポーネントでの作り方、リファクタリングの方法などは今後まとめていく予定です。

最後まで読んでいただきありがとうございました。

転職ドラフトに登録して見てはいかがでしょうか？

実際に企業からのオファーを受ける事で、企業から見た自分の強みや市場価値などポジティブな発見がたくさんあります！！