JavaScript通過極大極小值演算法實現AI井字棋遊戲

阿新 • • 發佈：2021-12-20

話不多說直接上執行截圖：

黑棋是玩家的位置，紅色方是電腦。電腦會根據當前棋盤的情況選擇一個對自己有利卻對玩家不利的情況。

演算法可以實現電腦勝利，或者電腦和玩家平局。

程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>井字棋AI</title>
<style>
	.title {
		text-align: center;
	}
	
	.chess {
		display: block;
		/*變成塊級元素，使用margin居中*/
		margin: 50px auto;
		box-shadow: 5px 5px 5px #B9B9B9,-2px -2px 2px #EFEFEF;
		cursor: pointer;
	}
	
	div {
		text-align: center;
	}
	
	.restart {
		padding: 10px 20px;
		background-color: #EE82EE;
		border-radius: 5px;
		color: white;
		cursor: pointer;
	}
</style>
</head>
 
<body>
	<h3 class="title">--井字棋--</h3>
	<canvas class="chess" width="450px" height="450px"></canvas>
	<div>
		<a class="restart" onclick="rst()">重新開始</a>
	</div>
</body>
 
<script>
	var chess = document.getElementsByClassName("chess")[0];
	var title = document.getElementsByClassName("title")[0];
	var context = chess.getContext("2d");
	context.strokeStyle = "#B9B9B9"
 
	window.onload = function() {
		drawChessBoard();
		Init()
	}
 
	function drawChessBoard() {
		for(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();
		}
	}
 
	//定義二維陣列標記棋子
	var chessboard = []
	for(var i = 0; i < 4; i++) {
		chessboard[i] = [];
		for(var j = 0; j < 4; j++) {
			chessboard[i][j] = 0;
		}
	}
 
	const NUMBER = 3
	const STEP = 9
	const MAN = 1
	const COMPUTER = -1
	const SEARCHDEPTH = 9
	const INT_MAX = 999999
	const INT_MIN = -1000000
 
	var player = 0
	var isGameOver = false
	var currentDepth = 0
	var bestP 
osition = {
		x: 0,y: 0
	}
 
	function Init() {
		for(let i = 0; i < NUMBER; i++) {
			for(let j = 0; j < NUMBER; j++) {
				chessboard[i][j] = 0
			}
		}
		player = MAN
		isGameOver = false
		currentDepth = 0
	}
 
	function isEnd() {
		let i = 0
		let j = 0
		var count = 0
		for(i = 0; i < NUMBER; i++) { //行
			count = 0;
			for(j = 0; j < NUMBER; j++)
				count += chessboard[i][j];
			if(count == 3 || count == -3)
				return count / 3;
		}
		for(j = 0; j < NUMBER; j++) { //列
			count = 0;
			for(i = 0; i < NUMBER; i++)
				count += chessboard[i][j];
			if(count == 3 || count == -3)
				return count / 3;
		}
		count = 0;
		count = chessboard[0][0] + chessboard[1][1] + chessboard[2][2];
		if(count == 3 || count == -3)
			return count / 3;
		count = chessboard[0][2] + chessboard[1][1] + chessboard[2][0];
		if(count == 3 || count == -3)
			return count / 3;
		return 0;
	}
 
	function MaxMinSearch(depth) {
		var value = 0;
		if(player == MAN) value = INT_MIN;
		if(player == COMPUTER) value = INT_MAX;
		if(isEnd() != 0) {
			return Evaluate();
		}
		if(depth == SEARCHDEPTH) {
			value = Evaluate();
			return value;
		}
 
		for(let i = 0; i < NUMBER; i++) {
			for(let j = 0; j < NUMBER; j++) {
				if(chessboard[i][j] == 0) {
					if(player == MAN) {
						chessboard[i][j] = MAN;
						player = COMPUTER;
						var nextvalue = MaxMinSearch(depth + 1);
						player = MAN;
						if(value < nextvalue) {
							value = nextvalue;
							if(depth == currentDepth) {
								bestPosition.x = i;
								bestPosition.y = j;
							}
 
						}
 
					} else if(player == COMPUTER) {
						chessboard[i][j] = COMPUTER;
						player = MAN;
						var nextvalue = MaxMinSearch(depth + 1);
						player = COMPUTER;
						if(value > nextvalue) {
							value = nextvalue;
							if(depth == currentDepth) {
								bestPosition.x = i;
								bestPosition.y = j;
							}
 
						}
					}
	 
				chessboard[i][j] = 0;
				}
 
			}
		}
 
		return value;
	}
	function Logic(){
		if (isGameOver) {
			if (isEnd() == MAN) {
				alert("遊戲結束 玩家勝利")
			} else if (isEnd() == COMPUTER) {
				alert("遊戲結束 電腦勝利")
			} else {
				alert("遊戲結束 平局")
			}
		}
	}
 
	function Evaluate() {
		var value = isEnd();
		if(value == MAN) return INT_MAX;
		if(value == COMPUTER) return INT_MIN;
	}
 
	chess.onclick = function(event) {
		if(player != MAN) {
			return;
		}
		//獲取座標
		var x = event.offsetX;
		var y = event.offsetY;
 
		x = Math.trunc((x - 15) / 140)
		y = Math.trunc((y - 15) / 140)
 
		ManPlay(x,y)
		if(isEnd() == 0 && currentDepth < 8) {
			ComputerPlay()
			if(isEnd() != 0) {
				isGameOver = true
			}
		} else {
			isGameOver = true
		}
		Logic()
	}
 
	function ManPlay(x,y) {
		chessboard[x][y] = MAN
		DrawBroad(x,y,MAN)
		currentDepth++
		player = COMPUTER
	}
 
	function ComputerPlay() {
		MaxMinSearch(currentDepth)
		chessboard[bestPosition.x][bestPosition.y] = COMPUTER
		DrawBroad(bestPosition.x,bestPosition.y,COMPUTER)
		currentDepth++
		player = MAN
	}
 
	//落子時繪畫棋盤
	function DrawBroad(i,j,player) {
		context.beginPath();
		context.arc(85 + i * 140,85 + j * 140,40,2 * Math.PI); //畫圓
		context.closePath();
 
		var color;
		if(player == MAN) {
			color = "#000";
		} else {
			color = "red"
		}
		context.fillStyle = color;
		context.fill();
	}
 
	function rst() {
		window.location.reload();
	}
</script>
 
</html>

其中，程式碼的242行和244行中的

context.beginPath();
context.arc(85 + i * 140,2 * Math.PI); //畫圓
context.closePath();

分別是落筆和抬筆的操作。這樣可以避免canvas上畫圓時路徑相連的問題。

到JqaLAn此這篇關於通過極大極小值演算法實現AI井字棋遊戲的文章就介紹到這了,更多相關Script井字棋遊戲內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

JavaScript通過極大極小值演算法實現AI井字棋遊戲

話不多說直接上執行截圖：黑棋是玩家的位置，紅色方是電腦。電腦會根據當前棋盤的情況選擇一個對自己有利卻對玩家不利的情況。

python實現簡單井字棋遊戲

井字棋，英文名叫Tic-Tac-Toe，是一種在3*3格子上進行的連珠遊戲，和五子棋類似，由於棋盤一般不畫邊框，格線排成井字故得名。遊戲需要的工具僅為紙和筆，然後由分別代表O和X的兩個遊戲者輪流在格子裡留下標記（一般

python實現簡單井字棋小遊戲

用python實現的一個井字棋遊戲，供大家參考，具體內容如下 #Tic-Tac-Toe 井字棋遊戲

Java實現簡單井字棋小遊戲程式碼例項

Java第一次實驗，老師讓做一個井字棋，電腦隨機下棋。然後就想能不能聰明一點，可以判斷出走哪一步棋；然後只能做到不會輸，還是不夠聰明，只能呆板地堵住使用者，smartRobot的第三個判斷邏輯找不到最佳位置，贏得

最大最小演算法，人機井字棋遊戲

大概是5月份人工智慧導論的作業。玩家可以選擇先手和後手與電腦方進行井字棋遊戲。程式可以保證電腦方一定不會輸（即最終只有平局或電腦方獲勝兩種情況）。

JavaScript Canvas實現井字棋遊戲

本文例項為大家分享了 Canvas實現井字棋遊戲的具體程式碼，供大家參考，具體內容如下

基於python純函式實現井字棋遊戲

1、定義全域性變 \'\'\'全域性變數： X 和 O 表示兩方的棋子; EMPTY 表示棋位為空；

C++實現井字棋遊戲

本文例項為大家分享了C++實現井字棋遊戲的具體程式碼，供大家參考，具體內容如下

vue實現井字棋遊戲

本文例項為大家分享了vue實現井字棋遊戲的具體程式碼，供大家參考，具體內容如下

Minimax極大極小演算法、Alpha-Beta Pruning剪枝演算法

這篇部落格分為兩部分。首先我會先講極大極小演算法，然後在此基礎上進行改進給出進階版的Alpha-Beta剪枝演算法以及程式碼實現。文中配備b站講解的視訊，感興趣的可以看一下視訊講解，然後複習的時候拿著文章當作參考

【短道速滑八】圓形半徑的影象最大值和最小值演算法的實現及其實時優化（非二值圖）

在影象處理中，我們可以看到很多函式都是帶有半徑這個引數的，不過99%的情況下這個半徑其實都是矩形的意思，實際的需求中，還有很多場合下需要圓形的最值演算法，我們目前知道的有幾個演算法，比如在Photoshop中，

面試演算法題尋找矩陣的極小值

AcWing 1452. 尋找矩陣的極小值給定一個 n×n 的矩陣，矩陣中包含 n×n 個互不相同的整數。

2020-11-13：手寫程式碼：區域性最小值問題。陣列無序，相鄰元素不等。如何求極小值？

福哥答案2020-11-13：二分法。有時候陣列無序，同樣可以採用二分法。這道題考察的是全域性觀，左邊下降趨勢，右邊上升趨勢，函式影象呈凹形，必有極小值。中左值和中值呈上升趨勢，中值右邊可以直接捨棄；中值和中右

【容斥原理+狀壓DP】[CQOI2012]-區域性極小值

嚶嚶嚶好難題目連結（https://www.luogu.com.cn/problem/P3160）題目描述有一個\\(n\\)行\\(m\\)列的整數矩陣，其中\\(1\\)到\\(nm\\)之間的每個整數恰好出現一次。如果一個格子比所有相鄰格子（相鄰是指有公共邊

【洛谷P3160】[CQOI2012]區域性極小值

超級難的容斥QAQ 前言【題目傳送門】好難的題...... 心路歷程：幹想沒思路。瘋狂翻題解。

Echarts Pie RoseType #南丁格爾玫瑰圖 #玫瑰圖極小值問題

有這樣一組資料： pie: { dataSource: [ { name: \'一組\', value: 742867 }, { name: \'二組\', value: 655551 },

矩陣的極小值

ACwing class Solution { public: vector<int> getMinimumValue(int n) { const int INF = ~(1 << 31);//自然是有符號數的最大值

python實現井字棋小遊戲

本文為大家分享了python實現井字棋小遊戲，供大家參考，具體內容如下週五晚上上了python的選修課，本來以為老師是從python的基礎語法開始的，沒想到是從turtle畫圖開始，正好補上了我以前一些不懂的地方，有人講一下

C/C++程式設計筆記：C語言實現“井字棋”小遊戲，零基礎專案（含原始碼）

在這裡我們要寫出一個井子棋的小遊戲，能夠實現所需要的三字連珠的功能，並且可以使得遊戲讓玩家進行選擇是否繼續的功能。

C語言實現簡易版三子棋遊戲

本文例項為大家分享了C語言實現三子棋遊戲的具體程式碼，供大家參考，具體內容如下

JavaScript通過極大極小值演算法實現AI井字棋遊戲

相關推薦