HTMLとCSSとJavaScriptを使って三目並べ(〇×ゲーム)を作ってみる

スポンサーリンク

このページではソースコードの一部分を簡単な解説をしています。

完成品で遊ぶにはコチラから
完成品のソースコードはgithubにあります

スポンサーリンク

三目並べゲーム概要

先手・後手をプレイヤーが選びコンピューターと対戦できます。相手より先に三つ同じ色を縦・横・斜めのいずれかに並べれば勝ちのゲームです。このゲームをウィキペディアで調べたところ、先手・後手ともに最善を尽くすと、必ず引き分けとなるのですが今回作ったプログラムではコンピューター側は結構負けます。

勝敗表機能を実装しました。ブログ記事は↓にあります。

ミニマックス法を実装した三目並べのブログ記事は↓にあります。

JavaScriptを使ってマスがクリックされた時の処理をする

プレイヤーがマスをクリックするとplayer関数が実行され、押されたマスの場所はfield変数によって判断をし、変数boardの配列に押された場所をプレイヤーは1、コンピューターは2の数値を追加していき、勝敗の判定やコンピューターの指し手の判定に使います。続いてturn_action関数へ処理は移ります。

turn_action関数は手番の管理を行っています。count変数を使い偶数ならコンピューター、奇数ならプレイヤーの手番と判定をして表示させています。続いてJudgment関数へ処理は移ります。

勝敗の判定処理

Judgment関数はマスに3つ揃っているか判定する関数です。

win_patterns配列を使い縦・横・斜めにプレイヤーなら1、コンピューターなら2の数値が3つ並んでいるか調べ、並んでいた場合はjudgtextcreate関数でどちらが勝ったかを表示します。

コンピューターの指し手の処理

com関数はコンピューターの指し手を決める関数です。

ウィキペディアで三目並べのことを調べたところ、先手・後手ともに最善を尽くすと、必ず引き分けとなります。しかし後手番の場合下記の図のように先手番が〇に置いた場合、後手番が×以外に置くと後手番の負けが確定してしまいます。

そのためコンピューターが後手番の場合は×を外さないように先手が置いた場所によってどこに置くかをあらかじめ決めておき、com関数の5行目から11行目のようにプログラムしてみました。それ以降の指し手は判定でも使っていたwin_patterns配列を使い、まずコンピューター側に三つ置ける場所があったらそこに置き、無ければ相手が三つ置ける場所を探し阻止するプログラムにしました。

このプログラムのコンピューターが弱い理由

コンピューターが先手番の初手や三つ置ける場所や阻止する場所がない場合はランダムにマスに置くようにプログラムしてあります。その結果、下記の図のような局面をコンピューターが後手番で迎えた場合Aのマスに置くと負けが確定してしまうのですが、指し手をランダムにプログラムしているため、Aのマスにも置いてしまい弱いプログラムになってしまいました。

最後までお読みいただきありがとうございました。

タイトルとURLをコピーしました