見出し画像

ReactでAI四目並べ作ってみた

Issei

完成プロジェクトとGitリポへのリンク

インストール

まずはNode.jsをインストールする

でもって以下のコマンドでReactプロジェクトを作成し、Webブラウザーでページを開く

npx create-react-app my-app --typescript
cd my-app
npm start

実装

四目並べの実装自体はほぼほぼ後述のYoutubeチュートリアルと一緒です（1次元配列の代わりに2次元配列にしたくらい）

AIの実装は「Alpha Beta Pruning」を呼ばれる手法を使っており、要は相手も最適解を使ってくることを前提とした総当たりサーチ手法です

リアルタイムでのレスポンスが必要とされるため、サーチの深さは3までとしたため運が良ければ勝ててしまいますがサーチの深さを5にすればほぼほぼ勝てないと思います（その代わりレスポンスが遅くなる）

実装自体は簡単なのでソースコードを見てもらえば分かると思います

Github.ioで公開

ReactアプリはGitHubにプッシュするだけでGitHub Pagesで公開できちゃいます

package.json にデプロイ設定を追加

{
...
    "homepage" : "https://isseimori.github.io/ReactAiConnectFour",
        "scripts": {
           ...
           "deploy": "npm run build && gh-pages -d build",
           ...
         },
...
}

GitHub Pages の公開設定

画像1


参考記事


この記事が気に入ったらサポートをしてみませんか？