こんにちは、フロントエンドエンジニアのてりーです。
はじめに
ブラウザゲームを作る経験がしたくて、「遊び大全」の中で一番好きなゲームがコネクト4を自分で作ってみました。
リアクティブに画面の状態が変わり、ゲームも進行するのでReact + TypeScriptの練習としては良い題材だったと思います。
この記事では作成の大まかな流れと学んだ知識などを書いています。
最初はチュートリアル記事にしようかと思ったのですが、いちいち説明しなくてもgithubにコメントを入れたので、それで伝わるかなーと判断しました。
また、最近Reactを触り始めたこともあり、関数コンポーネントでしか今まで制作物を作っていないので、今回はあえてクラスコンポーネントで作りました。
作った物
コネクト4です。
日本語でいう四目並べですね。縦横斜めのいずれかで4つ連続でコマを先に並べた方が勝ちとなります。
実際のゲームはこんな感じです。
URL:https://hopeful-fermi-90a3f3.netlify.app/
で、今回作ったものがこんな感じ。
Githubのリポジトリ： https://github.com/gunners6518/connect4
作成の流れ
アウトラインを作る
最初の必要機能などからざっくりしたアウトラインを作りました。
・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型で返す関数を作り判定しました。
完成まで諸々
デザインを修正したり、文言を入れたり、コメントで簡単な説明を入れたりして完成です。
作成自体は半日ほどかかりました。
感想
ブラウザゲームを作る経験ができたのが嬉しかったです。
いつか遊び大全にあるげーむを全て作りたいな！！(ピアノはなしで)
クラスコンポーネントについては調べながら書いていく形だったので、不安はありましたがいろいろ学べました。