Next.jsでオセロAI対戦できるWebアプリを作成しました

概要

オセロで二人対戦とAI対戦ができるwebアプリケーションです。
こちらから実際にやってみてください。
https://hagisawa-yuki-github-io.vercel.app
GitHubはこちら
https://github.com/HagisawaYuki/HagisawaYuki.github.io.git

参考にした記事

https://qiita.com/Ryukuu0919/items/329aac4d738d328a6929
初めてNext.jsで開発したため、ひっくり返すとか、AIとか以外はほぼ参考にさせていただきました。

公開方法

GitHubを利用し、Vercelで公開しました。

ひっくり返すアルゴリズム

まず、置いたマスから8方向に近い順で配列に二次元配列として格納します。

gameSetting.tsx

const checkBoardLines: BoardState = new Array(8).fill(null).map(() => Array(0));
            
/** checkBoardLines = [右, 左, 上, 下, 右上, 左上, 右下, 左下]*/
//左右
board[row].forEach((cell, colIndex) => {
    (colIndex > col) ? checkBoardLines[0].push(cell) : (colIndex < col) ? checkBoardLines[1].unshift(cell) : {}
});
//上下
board.map((rows) => rows[col]).map((cell, rowIndex) => {
    (rowIndex < row) ? checkBoardLines[2].unshift(cell) : (rowIndex > row) ? checkBoardLines[3].push(cell) : {}
});
        //斜め四方向
board.forEach((rows, rowIndex) => rows.forEach((cell, colIndex) => {
    (colIndex > col && rowIndex + colIndex === row + col) ? checkBoardLines[4].unshift(cell) : 
    (colIndex < col && rowIndex - colIndex === row - col) ? checkBoardLines[5].unshift(cell) : 
    (colIndex > col && rowIndex - colIndex === row - col) ? checkBoardLines[6].push(cell) : 
    (colIndex < col && rowIndex + colIndex === row + col) ? checkBoardLines[7].push(cell) : {}
}));

そして、どの方向も挟めていればひっくり返すというように処理させています。

AIのロジック

AIは今回とてもシンプルな設定にしてますが、一応ちょっとした先読みをするようにしてます。
①最初から44手まで
(1) 角取れたら取る。
(2) 角に置かれない。（無理なら諦める）
(3) 角の斜め内側に置かない。（これも無理なら諦める）
(4) (2)(3)をできるだけ満たしつつ、相手の打つところが最も少なくなる一手を打つ。
②45手から60手まで
(1)終盤のため最も多く取ることができるところに打つ。

最後に

これからは、Next.jsでwebアプリケーション開発する手順を環境構築から公開までを説明する記事を書いていこうと思います。