では、早速スクリーンショットを実行してみましょう。 黒い駒はプレイヤーの位置、赤い駒はコンピュータの位置です。コンピュータは、盤上の現在の状況に基づいて、自分にとって有利だがプレイヤーにとって不利な状況を選択します。 このアルゴリズムにより、コンピュータの勝利、またはコンピュータとプレイヤーの引き分けを達成できます。 コードは次のとおりです。 <!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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: HTML フォーム タグの使用方法を学ぶチュートリアル
>>: モバイルブラウザが位置をサポートしない場合の解決策: 修正
目次まず、スクロール バーのスタイルを変更するには、疑似要素-webkit-scrollbarを使用...
sudo 権限委譲の概要su スイッチ ID: su –l ユーザー名 –c 'コマンド...
適切な設定を行うことで、Linux ユーザーにパスワードを定期的に変更させることができます。パスワー...
nginxをインストールするnginx-fullをインストールする必要があることに注意してください。...
ゴミ箱は Linux ユーザー、Windows ユーザー、Mac ユーザーにとって非常に一般的なので...
まず公式サイトにアクセスしてダウンロードし、MySQLダウンロードをクリックします。 ダウンロードし...
目次umask umaskの使用法原理1. umask値2. ファイルディレクトリの最大権限3. 従...
目次序文1. クロージャとは何ですか? 1.1 クロージャは条件コードを満たす1.2 クロージャ生成...
目次1. 環境整備1.1 オペレーティング システムのバージョン1.2 ディスク容量1.3 ファイア...
この記事の内容: ページ中空マスクレイヤー、ページ中空マスクガイドレイヤー、画像中空マスク通常のマス...
実際、この問題は、HTML の select タグを初めて学んだときにすでに発生していました。今日に...
古いバージョンをアンインストールする以前に古いバージョンをインストールしたことがある場合は、まずそれ...
今日、3年生から質問がありました。彼が書いた HTML コードを開くと、文字化けした文字が表示されま...
1. Dockerリモート接続ポートを設定するサーバー上の docker.service ファイルを...
2.1 セマンティクス化により、Webページが検索エンジンに理解されやすくなりますこの章では、We...