React公式チュートリアル 三目並べ 応用課題
Reactの公式チュートリアルにある三目並べゲーム (tic-tac-toe)を作ってみました。 ゲーム自体は記事の通りに進めれば完成できるので、最後の応用にあった6つの課題を追加実装しています。
応用課題
- 履歴内のそれぞれの着手の位置を (col, row) というフォーマットで表示する。
- 着手履歴のリスト中で現在選択されているアイテムを太字にする。
- Board でマス目を並べる部分を、ハードコーディングではなく 2 つのループを使用するように書き換える。
- 着手履歴のリストを昇順・降順いずれでも並べかえられるよう、トグルボタンを追加する。
- どちらかが勝利した際に、勝利につながった 3 つのマス目をハイライトする。
- どちらも勝利しなかった場合、結果が引き分けになったというメッセージを表示する。
出来たもの
全ての応用課題を実装したものになります。
