JavaScript通過極大極小值算法實(shí)現(xiàn)AI井字棋游戲
話不多說直接上運(yùn)行截圖:
黑棋是玩家的位置,紅色方是電腦。電腦會(huì)根據(jù)當(dāng)前棋盤的情況選擇一個(gè)對(duì)自己有利卻對(duì)玩家不利的情況。
算法可以實(shí)現(xiàn)電腦勝利,或者電腦和玩家平局。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>井字棋AI</title> <style> .title { text-align: center; } .chess { display: block; /*變成塊級(jí)元素,使用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++) { //設(shè)置橫線起始點(diǎn)坐標(biāo) context.moveTo(15, 15 + i * 140) //設(shè)置橫線結(jié)束點(diǎn)坐標(biāo) context.lineTo(435, 15 + i * 140) //連接2點(diǎn) context.stroke(); //設(shè)置豎線 context.moveTo(15 + i * 140, 15) //設(shè)置橫線結(jié)束點(diǎn)坐標(biāo) context.lineTo(15 + i * 140, 435) //連接2點(diǎn) context.stroke(); } } //定義二維數(shù)組標(biāo)記棋子 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 bestPosition = { 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("游戲結(jié)束 玩家勝利") } else if (isEnd() == COMPUTER) { alert("游戲結(jié)束 電腦勝利") } else { alert("游戲結(jié)束 平局") } } } 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; } //獲取坐標(biāo) 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 } //落子時(shí)繪畫棋盤 function DrawBroad(i, j, player) { context.beginPath(); context.arc(85 + i * 140, 85 + j * 140, 40, 0, 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, 85 + j * 140, 40, 0, 2 * Math.PI); //畫圓 context.closePath();
分別是落筆和抬筆的操作。這樣可以避免canvas上畫圓時(shí)路徑相連的問題。?
到此這篇關(guān)于JavaScript通過極大極小值算法實(shí)現(xiàn)AI井字棋游戲的文章就介紹到這了,更多相關(guān)JavaScript井字棋游戲內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript?Object.defineProperty與proxy代理模式的使用詳細(xì)分析
這篇文章主要介紹了JavaScript?Object.defineProperty與proxy代理模式的使用,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10es6學(xué)習(xí)之解構(gòu)時(shí)應(yīng)該注意的點(diǎn)
解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z法將數(shù)組和對(duì)象的屬性賦給各種變量。這種賦值語法極度簡潔,同時(shí)還比傳統(tǒng)的屬性訪問方法更為清晰,下面這篇文章主要給大家介紹了關(guān)于在es6解構(gòu)時(shí)應(yīng)該注意的點(diǎn),需要的朋友可以參考下。2017-08-08JS沙箱繞過以及競(jìng)爭(zhēng)條件型漏洞復(fù)現(xiàn)
沙箱繞過"是指攻擊者利用各種方法和技術(shù)來規(guī)避或繞過應(yīng)用程序或系統(tǒng)中的沙箱,本文主要介紹了JS沙箱繞過以及競(jìng)爭(zhēng)條件型漏洞復(fù)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08js實(shí)現(xiàn)百度地圖定位于地址逆解析,顯示自己當(dāng)前的地理位置
本文分享了基于javascript實(shí)現(xiàn)的百度地圖定位于地址逆解析,顯示自己當(dāng)前的地理位置的實(shí)例代碼,有興趣的朋友可以看下2016-12-12JavaScript 對(duì)象深入學(xué)習(xí)總結(jié)(經(jīng)典)
JavaScript中,除了五種原始類型(即數(shù)字,字符串,布爾值,null,undefined)之外的都是對(duì)象了,所以,不把對(duì)象學(xué)明白怎么繼續(xù)往下學(xué)習(xí)呢?本篇文章給大家分享javascript對(duì)象深入學(xué)習(xí)總結(jié),小伙伴們跟著小編一起深入學(xué)習(xí)吧2015-09-09