Category: アプリ

【React】オセロゲーム 今回はReactでオセロゲームを作ってみて、ついでにAI（minimax）も入れてみました。 もともとは「簡単なゲーム開発の練習」として始めています。 ■ デモ ■ 実装内容（ざっくり） Reactでオセロゲームの盤面を実装 石の配置と反転処理 AI（minimaxアルゴリズム）の追加 ターン管理と勝敗判定 いわゆる「シンプルなオセロゲーム＋AI」といった構成です。 ■ 詰まったところ（パス処理・引き分け） 今回少しハマったのはこのあたりです。 パスの処理 引き分け判定のバグ オセロは「置ける場所がない場合はパス」というルールがあるので、 単純にターンを切り替えるだけではうまくいきませんでした。 また、ゲーム終了の条件も 「どちらも置けない状態かどうか」 を見る必要があり、勝敗判定まわりで少し調整が必要でした。 このあたりは、オセロの実装でよく詰まりやすいポイントだと思います。 ■ デバッグで時間がかかった話 地味に大変だったのがデバッグです。 1回の挙動を確認するために、 毎回ある程度ゲームを進める必要がありました。 途中状態を再現できる仕組みを作るか迷いつつ、 今回はログを出しながら確認する形で進めています。 このあたりは、効率のいいデバッグ方法を考えたいところです。 ■ AI（minimax）について AIはminimaxアルゴリズムを使っています。 ざっくりいうと、 「少し先の手を読んで良さそうな手を選ぶ」仕組みです。 最初はあまり理解せずに組み込んでいましたが、 実際に動かしてみると少しずつ挙動が分かってきました。 評価の仕方を変えるとAIの動きが変わる 探索の深さで強さが変わる そこまで高度な調整はしていませんが、 それっぽく考えている動きにはなっているかなと思います。 ■ Reactでの実装で気をつけたこと AI思考中はクリックできないようにする 石の反転を少しずつ表示する こういう部分を入れるだけで、 ゲームとしての分かりやすさが変わるなと感じました。 ■ 全体の感想 大きく難しいことをしたわけではないですが、 見た目よりも裏側の処理の方に時間がかかっています。 今回はシンプルな構成ですが、 まだ改善できそうな部分もあるので、 時間があれば少しずつ調整していきたいです。…