JavaScript通过极大极小值算法实现AI井字棋游戏
更新时间：2021年12月17日 16:44:10 作者：时听葵因
极小极大值搜索算法是一种零和算法，是用来最小化对手的利益，最大化自己的利益的算法。极小极大之搜索算法常用于棋类游戏等双方较量的游戏和程序，算是一种电脑AI算法。本文将介绍通过这个算法实现的一个井字棋游戏，需要的可以参考一下
话不多说直接上运行截图：
黑棋是玩家的位置，红色方是电脑。电脑会根据当前棋盘的情况选择一个对自己有利却对玩家不利的情况。
算法可以实现电脑胜利，或者电脑和玩家平局。
代码如下：
<!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 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("游戏结束 玩家胜利")
} 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, 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上画圆时路径相连的问题。
到此这篇关于JavaScript通过极大极小值算法实现AI井字棋游戏的文章就介绍到这了,更多相关JavaScript井字棋游戏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
JavaScript Object.defineProperty与proxy代理模式的使用详细分析
这篇文章主要介绍了JavaScript Object.defineProperty与proxy代理模式的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁，同时还比传统的属性访问方法更为清晰，下面这篇文章主要给大家介绍了关于在es6解构时应该注意的点，需要的朋友可以参考下。2017-08-08
沙箱绕过"是指攻击者利用各种方法和技术来规避或绕过应用程序或系统中的沙箱,本文主要介绍了JS沙箱绕过以及竞争条件型漏洞复现,具有一定的参考价值,感兴趣的可以了解一下2023-08-08
本文分享了基于javascript实现的百度地图定位于地址逆解析，显示自己当前的地理位置的实例代码，有兴趣的朋友可以看下2016-12-12
本文这里给大家总结了一些常用的javascript方法，都是些短小精悍的小代码，提高执行效率，这里推荐给大家。2015-02-02
一直让我困扰的是，我不知道如何去让这个效果 自动播放，或者费了很多周折。这可能叫初始化。2010-05-05
最近，同事在做一个项目的时候，有个需求，需要一款动画库来支持2012-02-02
swiper组件是滑块视图容器，主要用来做图片轮播。这篇文章主要给大家介绍了关于微信小程序轮播图swiper代码的相关资料,需要的朋友可以参考下2020-12-12
切换不同图片的方法有很多，在本文为大家介绍下使用jquery是如何做到的2013-12-12
JavaScript中，除了五种原始类型（即数字，字符串，布尔值，null，undefined）之外的都是对象了，所以，不把对象学明白怎么继续往下学习呢？本篇文章给大家分享javascript对象深入学习总结，小伙伴们跟着小编一起深入学习吧2015-09-09
最新评论