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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript Canvas で三目並べゲームを実装
  • JavaScript で AI を搭載した三目並べゲームのソース コードを実装
  • Python 入門ゲーム tic-tac-toe のサンプルコード
  • C言語に基づく三目並べゲームの実装
  • Pythonはインターフェースを使って三目並べゲームを実装する
  • C でシンプルな三目並べゲームを実装する
  • Vue が三目並べゲームを実装

<<:  HTML フォーム タグの使用方法を学ぶチュートリアル

>>:  モバイルブラウザが位置をサポートしない場合の解決策: 修正

推薦する

MySQL binlog_ignore_dbパラメータの具体的な使用法

序文:前の記事を読んだ後、binlog はデータベースで実行されたすべての DDL および DML ...

CSS でハニカム/六角形アトラスを実装するためのサンプルコード

理由は分かりませんが、UIではハニカム効果(手を広げたような効果)のデザインが好まれます。 1. 六...

HTML ページ出力で従うべきいくつかの原則の要約

1. DOCTYPE は必須です。ブラウザは宣言した DOCTYPE に基づいてページのレンダリング...

Ubuntu 18.04にPython仮想環境をインストールする

Ubuntu 18.04 を使用する Python 開発者向けの参考資料です。 1. Ubuntu ...

Nodejs は JSON 文字列を JSON オブジェクトに変換するエラー解決法

JSON 文字列を JSON オブジェクトに変換するにはどうすればいいですか? JSON.parse...

HTMLはフォームタグを使用して登録ページのサンプルコードを実装します。

ケースの説明: - ページ効果を実現するためにテーブルを使用する- ハイパーリンクを機能させたくない...

Vue 監視属性のグラフィック例の詳細な説明

目次リスナープロパティとは何ですか?リスニングプロパティと計算プロパティの違いは何ですか?監視プロパ...

CSS で画像アダプティブ コンテナを実装するためのサンプル コード

多くの場合、画像をコンテナのサイズに合わせて調整する必要があります。 1. imgタグ方式幅と高さを...

Nginx サービス クイック スタート チュートリアル

目次1. Nginx の紹介1. Nginx とは何ですか? 2. Nginx を使用する理由3. ...

CentOS7 で Jenkins+Maven+Git 継続的インテグレーション環境を構築する方法

この記事では、Spring boot + Maven プロジェクトのデプロイメントを例に、Code ...

VMware 構成 VMnet8 ネットワーク方法の手順

目次1. はじめに2. 設定手順1. はじめに1. NAT モード (VMnet8) は、仮想マシン...

WeChatアプレットでラッキーホイールゲームを実装する方法

ここでは主に、WeChat アプレットでラッキーホイール ゲームを開発する方法を紹介します。主に J...

Reactフック入門チュートリアル

ステートフック例: 'react' から useState をインポートします。 関...

JavaScript スクリプトが実行されるタイミングの詳細な説明

JavaScript スクリプトは HTML 内のどこにでも埋め込むことができますが、いつ呼び出され...

Vue プロジェクトで TypeScript クラスを適用する方法

目次1. はじめに2. 使用1. @コンポーネント2. 計算、データ、方法3. @props 4. ...