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 フォーム タグの使用方法を学ぶチュートリアル

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

推薦する

Vue でスクロールバーのスタイルを変更する方法

目次まず、スクロール バーのスタイルを変更するには、疑似要素-webkit-scrollbarを使用...

Linux で Sudo を使用して権限を委譲する

sudo 権限委譲の概要su スイッチ ID: su –l ユーザー名 –c 'コマンド&#...

Linux でパスワードの有効期限を表示および設定する方法

適切な設定を行うことで、Linux ユーザーにパスワードを定期的に変更させることができます。パスワー...

Ubuntu で nginx を使用して WebDAV ファイル サーバーを構築する詳細なプロセス

nginxをインストールするnginx-fullをインストールする必要があることに注意してください。...

Trash-Cli: Linux のコマンドラインごみ箱ツール

ゴミ箱は Linux ユーザー、Windows ユーザー、Mac ユーザーにとって非常に一般的なので...

Windows 64 ビット版の MySQL 8.0.15 インストール チュートリアル

まず公式サイトにアクセスしてダウンロードし、MySQLダウンロードをクリックします。 ダウンロードし...

Linuxにおけるumaskコマンドの使用原理と計算方法の詳しい解説

目次umask umaskの使用法原理1. umask値2. ファイルディレクトリの最大権限3. 従...

Javascriptのクロージャとアプリケーションの詳細な説明

目次序文1. クロージャとは何ですか? 1.1 クロージャは条件コードを満たす1.2 クロージャ生成...

Linux 7.6 バイナリに MySQL 8.0.27 をインストールする詳細な手順

目次1. 環境整備1.1 オペレーティング システムのバージョン1.2 ディスク容量1.3 ファイア...

CSS で中空マスク レイヤーを実装するサンプル コード

この記事の内容: ページ中空マスクレイヤー、ページ中空マスクガイドレイヤー、画像中空マスク通常のマス...

JavaScript を使用せずに HTML の a タグを無効にするには、純粋な CSS を使用します。

実際、この問題は、HTML の select タグを初めて学んだときにすでに発生していました。今日に...

Ubuntu 18.04 (コミュニティ エディション) に Docker CE をインストールする方法

古いバージョンをアンインストールする以前に古いバージョンをインストールしたことがある場合は、まずそれ...

HTMLエンコードによる文字化け問題について

今日、3年生から質問がありました。彼が書いた HTML コードを開くと、文字化けした文字が表示されま...

IDEA の Docker プラグインを介して SpringBoot プロジェクトをデプロイするプロセスの詳細な説明

1. Dockerリモート接続ポートを設定するサーバー上の docker.service ファイルを...

フロントエンド開発者は毎日HTMLタグの理解を学ばなければならない(1)

2.1 セマンティクス化により、Webページが検索エンジンに理解されやすくなりますこの章では、We...