话不多说直接上运行截图：
黑棋是玩家的位置，红色方是电脑。电脑会根据当前棋盘的情况选择一个对自己有利却对玩家不利的情况。
算法可以实现电脑胜利，或者电脑和玩家平局。
代码如下：
<!doctype html><html><head><meta chart="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 chessb男生干净网名oard = []for(var i = 0; i < 4; i++) {chessboard[i] = [];for(var j = 0; j < 4; j++) {chessboard[i][j] = 0;}} const number = 3const step = 9const man = 1const computer = -1const archdepth = 9const int_max = 999999const int_min = -1000000 var player = 0var isgameover = falvar currentdepth = 0var bestpos夏黑葡萄种植技术ition = {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 = manisgameover = falcurrentdepth = 0} function ind() {let i = 0let j = 0var count = 0for(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 maxminarch(depth) {var value = 0;if(player == man) value = int_min;if(player == computer) value = int_max;if(ind() != 0) {return evaluate();}if(depth == archdepth) {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 = maxminarch(depth + 1);player = man;if(value < nextvalue) {value = nextvalue;if(depth == currentdepth) {bestposition.x = i;bestposition.y = j;} } } el if(player == computer) {chessboard[i][j] = computer;player = man;var nextvalue = maxminarch(depth + 1);player = computer;if(value > nextvalue) {value = nextvalue;i0是奇数吗f(depth == cu陕西中考作文rrentdepth) {bestposition.x = i;bestposition.y = j;} }}chessboard[i][j] = 0;} }} return value;}function logic(){if (isgameover) {if (ind() == man) {alert("游戏结束 玩家胜利")} el if (ind() == computer) {alert("游戏结束 电脑胜利")} el {alert("游戏结束 平局")}}} function evaluate() {var value = ind();if(value == man) return int_max;if(value == computer) return int_min;} chess.onclick = function(event) {if(player != man) {return;}//获取坐标var x = event.offtx;var y = event.offty; x = math.trunc((x - 15) / 140)y = math.t大学生用的笔记本runc((y - 15) / 140) manplay(x, y)if(ind() == 0 && currentdepth < 8) {computerplay()if(ind() != 0) {isgameover = true}} el {isgameover = true}logic()} function manplay(x, y) {chessboard[x][y] = mandrawbroad(x,y,man)currentdepth++player = computer} function computerplay() {maxminarch(currentdepth)chessboard[bestposition.x][bestposition.y] = computerdrawbroad(bestposition.x,bestposition.y,computer)currentdepth++player = man} //落子时绘画棋盘function drawbroad(i, j, player) {context.beginpath();context.arc(85 + i * 140, 85 + j * 140, 40, 0, 2 * math.pi); //画圆context.clopath(); var color;if(player == man) {color = "#000";} el {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.clopath();
分别是落笔和抬笔的操作。这样可以避免canvas上画圆时路径相连的问题。
到此这篇关于javascript通过极大极小值算法实现ai井字棋游戏的文章就介绍到这了,更多相关javascript井字棋游戏内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！
本文发布于:2023-04-04 03:39:01，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/da3d621086ed3c535966fffd99a93ce2.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：JavaScript通过极大极小值算法实现AI井字棋游戏.doc
本文 PDF 下载地址：JavaScript通过极大极小值算法实现AI井字棋游戏.pdf
| 留言与评论（共有 0 条评论） |
