こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら
Reactを仕事で使いこなしたい人、Reactの知識に不安がある人に向けて、具体的な勉強方法のロードマップをまとめました。
はじめに
ブラウザゲームを作る経験がしたくて、「遊び大全」の中で一番好きなゲームがコネクト4を自分で作ってみました。
リアクティブに画面の状態が変わり、ゲームが進行するので、
初学者向けのReact + TypeScriptの練習としては良い題材だったと思います。
この記事では作成の大まかな流れと学んだ知識などを書いています。
最初はチュートリアル記事にしようかと思ったのですが、いちいち説明しなくてもgithubにコメントを入れたので、それで伝わるかなーと判断しました。
また最近Reactを触り始めたこともあり、関数コンポーネントでしか今まで制作物を作っていないので、今回はあえてクラスコンポーネントで作りました。
作った物
コネクト4です。
日本語でいう四目並べですね。
縦横斜めのいずれかで4つ連続でコマを先に並べた方が勝ちとなります。
実際のゲームはこんな感じです。https://www.mathsisfun.com/games/connect4.html
※今回はオンライン機能の実装はしません。
で、今回作ったものがこんな感じ。
作り方
仕様を決める
最初の必要機能などからざっくりしたアウトラインを作りました。
- UI：6×7のセルを作る
- セル：クリックしたら、その列の一番下が選択される 相手のプレイヤーの番になる
- ゲーム：縦、横、斜めで4つ揃ったら勝利
UI：6×7のセルを作る
6×7のセル作成ですね。
セル1つ1つにplayer,indexというデータを持たせて、indexで配置が決まり、playerでどちらかに既に選択されているセルなら色が変わるようにしました。
セル：クリック時のアクション
セルクリック時のアクションでは以下の機能をつけました。
- クリックしたセルのindexから列を判定して、その列で空いている一番下のセルが選択される処理
- セル選択後にplayerTurnが変わる処理
ゲーム：縦、横、斜めで4つ揃ったら勝利
ここは理論の部分でどうすれば良いのか苦労しました。
あーだこーだ悩んだ結果、
横：連続する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をクラス→関数コンポーネントのリファクタリングをしているので、関数コンポーネントでの作り方、リファクタリングの方法などは今後まとめていく予定です。
最後まで読んでいただきありがとうございました。
もし現状の仕事に不満があるなら
転職ドラフトに登録して見てはいかがでしょうか？
実際に企業からのオファーを受ける事で、企業から見た自分の強みや市場価値などポジティブな発見がたくさんあります！！