React + TypeScriptでコネクト4を作った報告(クラスコンポーネント)

はじめに

ブラウザゲームを作る経験がしたくて、「遊び大全」の中で一番好きなゲームがコネクト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型で返す関数を作り判定しました。

完成まで諸々

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

感想

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

クラスコンポーネントについては調べながら書いていく形だったので、不安はありましたがいろいろ学べました。

告知

本記事の他にもReactに関して初学者向けのチュートリアル記事をいくつか作っています。
是非学習の参考にして下さい。


【 React Hooks入門】useStateを使って買い物リストを作るチュートリアル

ReactでCOVID-19トラッカー作成で学べる3つの事

【React+TypeScript】Netflixのクローンを作るチュートリアル

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Compare
Wishlist 0
Open wishlist page Continue shopping