では、早速スクリーンショットを実行してみましょう。 黒い駒はプレイヤーの位置、赤い駒はコンピュータの位置です。コンピュータは、盤上の現在の状況に基づいて、自分にとって有利だがプレイヤーにとって不利な状況を選択します。 このアルゴリズムにより、コンピュータの勝利、またはコンピュータとプレイヤーの引き分けを達成できます。 コードは次のとおりです。 <!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 フォーム タグの使用方法を学ぶチュートリアル
>>: モバイルブラウザが位置をサポートしない場合の解決策: 修正
序文:前の記事を読んだ後、binlog はデータベースで実行されたすべての DDL および DML ...
理由は分かりませんが、UIではハニカム効果(手を広げたような効果)のデザインが好まれます。 1. 六...
1. DOCTYPE は必須です。ブラウザは宣言した DOCTYPE に基づいてページのレンダリング...
Ubuntu 18.04 を使用する Python 開発者向けの参考資料です。 1. Ubuntu ...
JSON 文字列を JSON オブジェクトに変換するにはどうすればいいですか? JSON.parse...
ケースの説明: - ページ効果を実現するためにテーブルを使用する- ハイパーリンクを機能させたくない...
目次リスナープロパティとは何ですか?リスニングプロパティと計算プロパティの違いは何ですか?監視プロパ...
多くの場合、画像をコンテナのサイズに合わせて調整する必要があります。 1. imgタグ方式幅と高さを...
目次1. Nginx の紹介1. Nginx とは何ですか? 2. Nginx を使用する理由3. ...
この記事では、Spring boot + Maven プロジェクトのデプロイメントを例に、Code ...
目次1. はじめに2. 設定手順1. はじめに1. NAT モード (VMnet8) は、仮想マシン...
ここでは主に、WeChat アプレットでラッキーホイール ゲームを開発する方法を紹介します。主に J...
ステートフック例: 'react' から useState をインポートします。 関...
JavaScript スクリプトは HTML 内のどこにでも埋め込むことができますが、いつ呼び出され...
目次1. はじめに2. 使用1. @コンポーネント2. 計算、データ、方法3. @props 4. ...