JavaScript は最大値と最小値のアルゴリズムを通じて AI 三目並べゲームを実装します

では、早速スクリーンショットを実行してみましょう。

黒い駒はプレイヤーの位置、赤い駒はコンピュータの位置です。コンピュータは、盤上の現在の状況に基づいて、自分にとって有利だがプレイヤーにとって不利な状況を選択します。

このアルゴリズムにより、コンピュータの勝利、またはコンピュータとプレイヤーの引き分けを達成できます。

コードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<title>三目並べ AI</title>
<スタイル>
	。タイトル {
		テキスト配置: 中央;
	}
	
	.チェス {
		表示: ブロック;
		/*ブロックレベル要素になり、マージンを使用して中央に配置します*/
		マージン: 50px 自動;
		ボックスの影: 5px 5px 5px #B9B9B9、-2px -2px 2px #EFEFEF;
		カーソル: ポインタ;
	}
	
	div {
		テキスト配置: 中央;
	}
	
	。再起動 {
		パディング: 10px 20px;
		背景色: #EE82EE;
		境界線の半径: 5px;
		色: 白;
		カーソル: ポインタ;
	}
</スタイル>
</head>
 
<本文>
	<h3 class="title">--三目並べ--</h3>
	<canvas class="chess" width="450px" height="450px"></canvas>
	<div>
		<a class="restart" onclick="rst()">再起動</a>
	</div>
</本文>
 
<スクリプト>
	var chess = document.getElementsByClassName("chess")[0];
	var title = document.getElementsByClassName("title")[0];
	var コンテキスト = chess.getContext("2d");
	context.strokeStyle = "#B9B9B9"
 
	window.onload = 関数() {
		チェスボードを描画します。
		初期化()
	}
 
	関数drawChessBoard() {
		(var i = 0; i < 4; i++) {
			//水平線の開始点の座標を設定します context.moveTo(15, 15 + i * 140)
			//水平線の終点の座標を設定する context.lineTo(435, 15 + i * 140)
			//2 つのポイントを接続します context.stroke();
			//垂直線を設定する context.moveTo(15 + i * 140, 15)
			//水平線の終点の座標を設定します context.lineTo(15 + i * 140, 435)
			//2 つのポイントを接続します context.stroke();
		}
	}
 
	//チェスの駒をマークするための2次元配列を定義します var chessboard = []
	(var i = 0; i < 4; i++) {
		チェス盤[i] = [];
		(var j = 0; j < 4; j++) {
			チェス盤[i][j] = 0;
		}
	}
 
	定数NUMBER = 3
	定数ステップ = 9
	定数MAN = 1
	定数コンピュータ = -1
	定数SEARCHDEPTH = 9
	定数INT_MAX = 999999
	定数INT_MIN = -1000000
 
	var プレイヤー = 0
	var isGameOver = false
	var 現在の深さ = 0
	var ベストポジション = {
		x: 0,
		年: 0
	}
 
	関数Init() {
		for(i = 0; i < NUMBER; i++) {
			for(j = 0; j < NUMBER; j++) {
				チェス盤[i][j] = 0
			}
		}
		プレイヤー = MAN
		isGameOver = false
		現在の深度 = 0
	}
 
	関数isEnd() {
		i = 0とする
		j = 0とする
		変数カウント = 0
		for(i = 0; i < NUMBER; i++) { //行数 = 0;
			(j = 0; j < NUMBER; j++)の場合
				カウント += チェスボード[i][j];
			カウント == 3 || カウント == -3 の場合
				count / 3 を返します。
		}
		for(j = 0; j < NUMBER; j++) { //列数 = 0;
			(i = 0; i < 数値; i++) の場合
				カウント += チェスボード[i][j];
			カウント == 3 || カウント == -3 の場合
				count / 3 を返します。
		}
		カウント = 0;
		カウント = チェス盤[0][0] + チェス盤[1][1] + チェス盤[2][2];
		カウント == 3 || カウント == -3 の場合
			count / 3 を返します。
		カウント = チェス盤[0][2] + チェス盤[1][1] + チェス盤[2][0];
		カウント == 3 || カウント == -3 の場合
			count / 3 を返します。
		0を返します。
	}
 
	関数MaxMinSearch(深さ) {
		var 値 = 0;
		if(プレイヤー == MAN) 値 = INT_MIN;
		if(player == COMPUTER) 値 = INT_MAX;
		if(isEnd() != 0) {
			評価() を返します。
		}
		if(深さ == 検索深さ) {
			値 = 評価();
			戻り値;
		}
 
		for(i = 0; i < NUMBER; i++) {
			for(j = 0; j < NUMBER; j++) {
				if(チェス盤[i][j] == 0) {
					if(プレイヤー == MAN) {
						チェス盤[i][j] = MAN;
						プレーヤー = コンピュータ;
						var nextvalue = MaxMinSearch(深さ + 1);
						プレイヤー = MAN;
						if(値 < 次の値) {
							値 = 次の値;
							if(深さ == 現在の深さ) {
								ベストポジション.x = i;
								ベストポジション.y = j;
							}
 
						}
 
					} そうでない場合(プレイヤー == コンピュータ) {
						チェス盤[i][j] = コンピュータ;
						プレイヤー = MAN;
						var nextvalue = MaxMinSearch(深さ + 1);
						プレーヤー = コンピュータ;
						if (値 > 次の値) {
							値 = 次の値;
							if(深さ == 現在の深さ) {
								ベストポジション.x = i;
								ベストポジション.y = j;
							}
 
						}
					}
					チェス盤[i][j] = 0;
				}
 
			}
		}
 
		戻り値;
	}
	関数ロジック(){
		ゲームオーバーの場合
			if (isEnd() == MAN) {
				alert("ゲームが終了し、プレイヤーが勝利")
			} そうでない場合 (isEnd() == COMPUTER) {
				alert("ゲームオーバー、コンピュータが勝ちました")
			} それ以外 {
				alert("ゲームは引き分けに終わりました")
			}
		}
	}
 
	関数評価() {
		var 値 = isEnd();
		if(値 == MAN) は INT_MAX を返します。
		if(値 == COMPUTER) は INT_MIN を返します。
	}
 
	chess.onclick = 関数(イベント) {
		if(プレイヤー != MAN) {
			戻る;
		}
		//座標を取得します var x = event.offsetX;
		var y = イベント.offsetY;
 
		x = Math.trunc((x - 15) / 140)
		y = Math.trunc((y - 15) / 140)
 
		マンプレイ(x, y)
		if(isEnd() == 0 && 現在の深度 < 8) {
			コンピュータプレイ()
			if(isEnd() != 0) {
				isGameOver = true
			}
		} それ以外 {
			isGameOver = true
		}
		論理（）
	}
 
	関数ManPlay(x, y) {
		チェス盤[x][y] = MAN
		ドローブロード(x,y,MAN)
		現在の深さ++
		プレーヤー = コンピュータ
	}
 
	関数ComputerPlay() {
		最大最小検索(現在の深さ)
		チェスボード[bestPosition.x][bestPosition.y] = コンピュータ
		DrawBroad(ベストポジション.x,ベストポジション.y,COMPUTER)
		現在の深さ++
		プレイヤー = MAN
	}
 
	//移動を配置するときにボードを描画する function DrawBroad(i, j, player) {
		コンテキスト.beginPath();
		context.arc(85 + i * 140, 85 + j * 140, 40, 0, 2 * Math.PI); //円を描画します context.closePath();
 
		var 色;
		if(プレイヤー == MAN) {
			色 = "#000";
		} それ以外 {
			色 = "赤"
		}
		コンテキストの塗りつぶしスタイル = 色;
		コンテキストを埋め込む();
	}
 
	関数 rst() {
		ウィンドウの位置を再読み込みします。
	}
</スクリプト>
 
</html>

そのうち、コード行242と244

コンテキスト.beginPath();
context.arc(85 + i * 140, 85 + j * 140, 40, 0, 2 * Math.PI); //円を描画します context.closePath();

ペンを置く、そしてペンを持ち上げるという動作です。これにより、キャンバス上に円を描くときにパスが接続される問題を回避できます。

これで、ミニマックスアルゴリズムを使用して JavaScript で AI 三目並べゲームを実装する記事は終了です。JavaScript 三目並べゲームのコンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: