原生JS+Canvas实现五子棋 AI简单算法

最新推荐文章于 2024-08-04 16:33:59 发布
最新推荐文章于 2024-08-04 16:33:59 发布
阅读量77 收藏
点赞数 3
文章标签： javascript 人工智能 算法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18745063/article/details/140774786
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生JS+Canvas实现五子棋 AI简单算法</title>
    <style>
        canvas { border: 1px solid black; }
    </style>
</head>
<body>
<canvas id="board" width="450" height="450"></canvas>
<script>
    const boardSize = 15;
    const cellSize = 30;
	状态：0无子，1黑子，2蓝子 + 8个方向计算：顺时针 上下，右上左下，右左，右下左上 
	let board = Array(boardSize).fill().map(() => Array(boardSize).fill(0));
    let board1 = Array(boardSize).fill().map(() => Array(boardSize).fill([0,0,0,0,0,0,0]));//记录空子8各方向的黑子状态
	let board2 = Array(boardSize).fill().map(() => Array(boardSize).fill([0,0,0,0,0,0,0]));//记录空子8各方向的蓝子状态
	let board3 = Array(boardSize).fill().map(() => Array(boardSize).fill(0));//记录空子8各方向的黑子数
	let board4 = Array(boardSize).fill().map(() => Array(boardSize).fill(0));//记录空子8各方向的蓝子数
    const ctx = document.getElementById('board').getContext('2d');
    const player = 1;
    const ai = 2;
	let status = 0;
	//console.info(board);
    // 辅助函数
    //function isGameOver(board) { /* ... */ }
	//检查棋盘状态
    function isGameOver(board,i,j) {
		if (isWinner(board, i, j, board[i][j])) {
			
			return true;
		}
		return false;
	}

	function isWinner(board, x, y, s) {
	     console.info('isWinner');
		//8个方向计算 顺时针 上下，右上左下，右左，右下左上
		const directions = [[0, 1], [0, -1],[1, 1], [-1, -1],[1, 0], [-1, 0],[1, -1],[-1, 1]];
		for (const [dx, dy] of directions) {
			let count = 0;
			//let count1 = 0;
			let nx = x, ny = y;
			let nx1 = x, ny1 = y;
			let num = 0;
			let tnx = x, tny= y;
			while (true) {
				nx += dx;
				ny += dy;
				//console.info('tplayer->board:['+tnx+','+tny+']');
				//console.info('player->board:['+nx+','+ny+']:'+board[nx][ny]);
				
				
				if (nx >= 0 && nx < boardSize && ny >= 0 && ny < boardSize && board[nx][ny] === s) {
					//只统计连续5个棋子
					if ((nx-tnx)>1 || (nx-tnx) <-1 ) {
						break;
					}
					if ((ny-tny)>1 || (ny-tny) <-1 ) {
						break;
					}
					count++;
					//console.info('s->board:['+nx+','+ny+']:'+board[nx][ny]);
					tnx = nx; 
					tny= ny;
					if (count === 4) {
						console.info('play'+s+': game over');
						if (s==1) {
							status = 1;
						}else {
							status = 2;
						}
						return true;
					}
				}
				
				
				num++;
				if (num > 5) break; 
			}
		}
		return false;
	}
	
	//生成移动列表 可落子的坐标
    function getAvailableMoves(board) {
		//console.info('getAvailableMoves');
		const moves = [];
		for (let i = 0; i < boardSize; i++) {
			for (let j = 0; j < boardSize; j++) {
				if (board[i][j] == 0) {
					moves.push([i, j]);
				}
			}
		}
		return moves;
	}
	//执行移动
    function makeMove(board, move, s) {
		//console.info('makeMove');
		const [x, y] = move;
		board[x][y] = s;
	}
	//Minimax 算法
    function minimax(x,y,s) {
		//8个方向计算 顺时针 上下，右上左下，右左，右下左上
		const directions = [[0, 1], [0, -1],[1, 1], [-1, -1],[1, 0], [-1, 0],[1, -1],[-1, 1]];
		let j =0;
		let getds = [];
		for (const [dx, dy] of directions) {
			let count = 0;
			//let count1 = 0;
			let nx = x, ny = y;
			let num = 0;
			let tnx = x, tny= y;
			while (true) {
				nx += dx;
				ny += dy;
				//console.info('tplayer->board:['+tnx+','+tny+']');
				//console.info('player->board:['+nx+','+ny+']:'+board[nx][ny]);
				
				
				if (nx >= 0 && nx < boardSize && ny >= 0 && ny < boardSize && board[nx][ny] === s) {
					//只统计连续5个棋子
					if ((nx-tnx)>1 || (nx-tnx) <-1 ) {
						break;
					}
					if ((ny-tny)>1 || (ny-tny) <-1 ) {
						break;
					}
					count++;
					//console.info('s->board:['+nx+','+ny+']:'+board[nx][ny]);
					tnx = nx; 
					tny= ny;
					if (count === 5) {
						console.info(s+', s game over');
						return true;
					}
				}
				
				
				num++;
				if (num > 5) break; 
			}
			getds[j]=count;
			j++;
		}
		if (s==1) {//记录白子状态
			board1[x][y] = [getds[0],getds[1],getds[2],getds[3],getds[4],getds[5],getds[6],getds[7]];
		} 
		if (s==2) {//记录黑子状态
			board2[x][y] = [getds[0],getds[1],getds[2],getds[3],getds[4],getds[5],getds[6],getds[7]];
		} 
		return false;
	}

    // AI 走法
    function aiMove(board) {
		console.info('aiMove');
        const moves = getAvailableMoves(board);//获取空子坐标
		//计算8个方向的棋子
        for (const move of moves) {
			const [x, y] = move;
            minimax(x,y,player);//计算自己8个方向的棋子数
			minimax(x,y,ai);//计算AI8个方向的棋子数
        }
		let i=0,i1=0,j=0,j1=0;

		let minmax1 = 0;
		let minmax2 = 0;
		for (const move of moves) {//获取这个空子8个方向计算自己的最大棋子数
			const [x, y] = move;
			//i = x;
			//j = y;
			//console.info([x, y]);
			const [x1, y1,x2, y2,x3, y3,x4, y4] = board1[x][y];
			//console.info([x1, y1,x2, y2,x3, y3,x4, y4]);
			if ( (x1+y1==4) || (x2+y2==4) || (x3+y3==4) || (x4+y4==4) ){
				 
				board3[x][y] = 4;
				continue;
			}
			if ( (x1+y1==3) || (x2+y2==3) || (x3+y3==3) || (x4+y4==3) ){
				
				board3[x][y] = 3;
				continue;
			}
			if ( (x1+y1==2) || (x2+y2==2) || (x3+y3==2) || (x4+y4==2) ){
				
				board3[x][y] = 2;
				continue;
			}
			if ( (x1+y1==1) || (x2+y2==1) || (x3+y3==1) || (x4+y4==1) ){
				
				board3[x][y] = 1;
				continue;
			}
		}
		console.info('-------------------');
		for (const move of moves) { //获取这个空子8个方向计算AI的最大棋子数
			const [x, y] = move;
	
			//console.info([x, y]);
			const [x1, y1,x2, y2,x3, y3,x4, y4] = board2[x][y];
			//console.info([x1, y1,x2, y2,x3, y3,x4, y4]);
			if ( (x1+y1==4) || (x2+y2==4) || (x3+y3==4) || (x4+y4==4) ){
				
				board4[x][y] = 4;
				continue;
			}
			if ( (x1+y1==3) || (x2+y2==3) || (x3+y3==3) || (x4+y4==3) ){
				
				board4[x][y] = 3;
				continue;
			}
			if ( (x1+y1==2) || (x2+y2==2) || (x3+y3==2) || (x4+y4==2) ){

				board4[x][y] = 2;
				continue;
			}
			if ( (x1+y1==1) || (x2+y2==1) || (x3+y3==1) || (x4+y4==1) ){
			
				board4[x][y] = 1;
				continue;
			}
		}
		let tmpmax = 0;
		for (var n=0;n< boardSize;n++) {//获取这个空子8个方向自己最大棋子数的坐标
			for (var m=0;m< boardSize;m++) {
				
				if (board[n][m] == 0 && board3[n][m] > minmax1) {
					//console.info('minmax1:'+minmax1);
					minmax1 = board3[n][m];//;
					i = n;
					j = m;
				} 
			}
		}
		//tmpmax = 0;
		for (var n=0;n< boardSize;n++) {//获取这个空子8个方向AI最大棋子数的坐标
			for (var m=0;m< boardSize;m++) {
				
				if (board[n][m] == 0 && board4[n][m] > minmax2) {
					//console.info('minmax1:'+minmax1);
					minmax2 = board4[n][m];//;
					i1 = n;
					j1 = m;
				} 
			}
		}
		//console.info(board3);
		//console.info(board4);
		console.info('minmax1:'+minmax1);
		console.info('minmax2:'+minmax2);
		if (minmax1 > minmax2) {//做出判断，如果对方出现的棋子数大于自己就先封杀对方，否则自己赢优先
			board[i][j] = ai;
			console.info('minmax1:',i,j);
			isGameOver(board,i,j);
		} else {
			board[i1][j1] = ai;
			console.info('minmax2:',i1,j1);
			isGameOver(board,i1,j1);
		}
       // console.info(board1);
		//console.info(board2);
    }

    // 绘制棋盘
    function drawBoard() {
		//console.info('drawBoard');
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        for (let i = 0; i < boardSize; i++) {
            for (let j = 0; j < boardSize; j++) {
                ctx.strokeRect(j * cellSize, i * cellSize, cellSize, cellSize);
                if (board[i][j] === player) {
                    ctx.beginPath();
                    ctx.arc((j * cellSize + cellSize / 2), (i * cellSize + cellSize / 2), cellSize / 3, 0, 2 * Math.PI);
                    ctx.fillStyle = 'black';
                    ctx.fill();
                } else if (board[i][j] === ai) {
                    //ctx.fillRect((j * cellSize + 2), (i * cellSize + 2), cellSize - 4, cellSize - 4);
					ctx.beginPath();
                    ctx.arc((j * cellSize + cellSize / 2), (i * cellSize + cellSize / 2), cellSize / 3, 0, 2 * Math.PI);
                    ctx.fillStyle = 'blue';
                    ctx.fill();
                }
            }
        }
		//console.info(4);
    }
	//延时下棋
	function timedMsg(board)
	{
	　var t=setTimeout("aiMove("+board+")",300)
	}
    // 玩家下棋
    document.getElementById('board').addEventListener('click', function (e) {
        const rect = e.target.getBoundingClientRect();
        const x = Math.floor((e.clientX - rect.left) / cellSize);
        const y = Math.floor((e.clientY - rect.top) / cellSize);
		if (status >0 ) {
			console.info('game over');
			return ;
		}
		
        if ( board[y][x] == 0) {
            board[y][x] = player;
			console.info([y,x]);
            if (!isGameOver(board,y,x)) {
                aiMove(board);
            }
			drawBoard();
        }else {
			console.info("已有棋子不允许下");
		}
    });
	
    drawBoard();
</script>
</body>
</html>

中庸之圣
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS+Canvas实现五子棋游戏实例
10-19
以上是原生JS+Canvas实现五子棋游戏的基本思路和关键代码。在实际开发中，还需要考虑用户交互、错误处理、游戏规则的完善等其他细节。通过不断优化和迭代，我们可以创建一个功能完整、用户体验良好的五子棋游戏。
原生JS+Canvas实现五子棋游戏
10-19
主要为大家详细介绍了原生JS+Canvas实现五子棋游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js+canvas实现五子棋小游戏
11-19
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码，供大家参考，具体内容如下 效果展示： 源码展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
牛客JS题（二十一）数组扁平化
最新发布
不起眼小菜菜的博客
08-04 588
注释很详细，直接上代码……
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 922
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 248
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 311
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
Springboot+Websocket+Security+Vue 实现弹幕推送功能
Gemini1995的博客
08-01 506
【代码】Springboot+Websocket+Security+Vue 实现弹幕推送功能。
django+vue项目-制作一个简单的购物网站
码农在写代码
07-30 356
用django框架制作的一个简易的网站后端学习笔记
【Vue3】自定义组件
又言又语
07-30 461
本文介绍 Vue3 中如何自定义组件。页面组件：用于构建独立页面，通常存放在src/pages或src/views目录下。功能组件：将页面中一些独立的功能封装成独立组件，譬如：分页组件、日期时间组件等。功能组件通常存放在目录下。本文主要说明如何自定义功能组件。
vite静态资源处理，处理vite项目中src和url路径问题
WanweI897的博客
08-02 385
处理vite项目中src和url路径问题
RN高级interview
流星雨的博客
07-31 494
RN高级interview
互联网医院系统源码与医保购药APP开发的完整技术指南
meihusdk的博客
07-30 381
开发过程中需注重数据安全、系统性能、用户体验等多个方面，确保系统的高效稳定运行和良好用户体验。希望这篇技术指南能为开发者提供有益的参考，助力互联网医疗健康行业的发展。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2520
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
linux命令行下使用的浏览器
没刮胡子的程序员专栏
08-01 75
从命令行浏览网页的原因有很多。 命令行工具通常具有丰富的选项和参数，可以根据用户的需求进行调整和配置。这种灵活性使得命令行在自动化和脚本编写方面非常有用。 对于系统管理员来说，命令行是管理和配置服务器的首选方式。通过命令行，管理员可以快速执行各种任务，例如安装软件包、配置网络、管理用户和权限等。与图形界面相比，命令行通常更高效，特别是在处理大量的重复性任务时。 使用Linux命令行浏览器可以提高工作效率，降低系统资源消耗，提高系统的稳定性。
JavaScript 字符串方法2
爱敲代码的卡拉米的博客
07-30 389
方法不会改变调用它的字符串。它返回的是新字符串。正则表达式不带引号,如需替换所有匹配，请使用正则表达式的。所有字符串方法都会返回新字符串。它们不会修改原始字符串。正式地说：字符串是不可变的：字符串不能更改，只能替换。因此不对匹配 MICROSOFT。如需执行大小写不敏感的替换，请使用正则表达式。可搭配正则表达式使用。
vue3学习day01-vue3的优势、新的脚手架工具create-vue、创建vue3项目、vue3的项目文件内容、插件变化
2301_76648183的博客
07-31 468
（4）index.html 单页入口，提供id为app的挂载点。
探索 Electron：打造深度书籍挖掘机的搜索体验
ztK63LrD的博客
08-03 267
Electron是一个开源的桌面应用程序开发框架，它允许开发者使用Web技术（如 HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序，它的出现极大地简化了桌面应用程序的开发流程，让更多的开发者能够利用已有的 Web 开发技能来构建功能强大且跨平台的应用程序，这对于提升开发效率和应用程序的快速交付具有重要意义。
elementUI，vue，前端判断时间是否有交集(重合)方法
peepeeman的博客
08-01 355
前端根据24小时制，判断所选时间是否存在重复情况
three.js+原生js+jquery实现3d
06-06
Three.js 是一款基于 WebGL 的开源 JavaScript 库，可以方便地实现 3D 开发。利用 Three.js，我们可以在浏览器中快速建立基于 3D 的交互式应用程序。而原生 JS 和 JQuery 也可以实现 3D 效果，但是相比 Three.js，实现起来更为困难且功能更加有限。 原生 JS 编程难度较大，需要对 WebGL 和 3D 编程有一定的了解。而使用 Three.js 只需要有一些基础的 JavaScript、HTML 和 CSS 知识，就可以快速构建 3D 图形应用程序。Three.js 提供了丰富的类和方法，可以让开发者快速地创建和控制复杂的 3D 场景和对象，同时支持动画和光照等高级功能。 JQuery 也可以实现 3D 效果，但是需要借助于其他库或插件。例如，使用 CSS3 和 CSS Transform 实现 3D 效果的时候，可以使用 JQuery Transit 插件来实现动画；使用 Canvas 实现 3D 效果的时候可以使用某些 JQuery 插件如 Three.js 风格的库等。 总之，Three.js 是一款非常好用、功能丰富的 3D 库，可以快速实现相关开发，而原生 JS 和 JQuery 实现 3D 的难度较大。具体使用哪一种方式实现 3D 效果，需要根据具体场景和项目要求来决定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值