五子棋人机对战 html js

最新推荐文章于 2024-06-18 21:33:41 发布
置顶 最新推荐文章于 2024-06-18 21:33:41 发布
阅读量710 收藏 7
点赞数
分类专栏： js js样式 jquery样式 html 文章标签： H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yingmengxuepingbao/article/details/87975048
版权
js 同时被 3 个专栏收录
29 篇文章 0 订阅
订阅专栏
js样式
20 篇文章 0 订阅
订阅专栏
html
20 篇文章 1 订阅
订阅专栏

大家好：

最近研究小游戏，实在不会写啊，只能借鉴前人的代码了。。。自己改造了一下下，备份一下！

尊重原著，参考文档：https://jingyan.baidu.com/article/a65957f4d93fdf24e77f9b4e.html

这是第一版，后期仍会优化，敬请期待。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>五子棋</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
    <!-- css -->
    <style type="text/css">
    canvas{
		 display: block;
		 margin: 50px auto;
		 box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #B9B9B9
		}
	.restart{
	    text-align: center;
	}
	.restart>span{
	    display: inline-block;
	    padding: 10px 20px;
	    color: #fff;
	    background-color: #45c01a;
	    border-radius: 5px;
	}
    </style>
    <!-- css ends -->    
    <!-- script -->
<script type="text/javascript">
	//页面加载
$(document).ready(function(){
	/* 定义全局变量 me 代表黑白棋 */
	var me = true; //默认黑棋先行
	/* 定义全局变量 over 代表棋局是否结束 */
	var over = false;
	/* 定义全局二维数组并初始化 存储每个落子点的落子情况 */
	var chessBoard = [];
	for (var i = 0; i < 15; i++) {
		 chessBoard[i] = [];
		 for (var j = 0; j < 15; j++) {
		  chessBoard[i][j] = 0; // 0 未落子；1 黑子；2 白子
		 }
	}
	/* 定义全局变量 count 存储赢法ID */
	var count = 0;
	
	/* 定义全局三维数组 存储所有的赢法 并初始化 */
	var wins = [];
	for (var i = 0; i < 15; i++) {
	 wins[i] = [];
	 for (var j = 0; j < 15; j++) {
	  wins[i][j] = [];
	 }
	}
	
	/* 遍历所有赢法 填充赢法数组 */
	/* 横向五子连线的情况 */
	for (var i = 0; i < 15; i++) {
	 for (var j = 0; j < 11; j++) {
	  for (var k = 0; k < 5; k++) {
	   wins[i][j + k][count] = true;
	  }
	  count++;
	 }
	}
	
	/* 纵向五子连线的情况 */
	for (var i = 0; i < 15; i++) {
	 for (var j = 0; j < 11; j++) {
	  for (var k = 0; k < 5; k++) {
	   wins[j + k][i][count] = true;
	  }
	  count++;
	 }
	}
	/* 正斜向五子连线的情况 */
	for (var i = 0; i < 11; i++) {
	 for (var j = 0; j < 11; j++) {
	  for (var k = 0; k < 5; k++) {
	   wins[i + k][j + k][count] = true;
	  }
	  count++;
	 }
	}
	/* 反斜向五子连线的情况 */
	for (var i = 0; i < 11; i++) {
	 for (var j = 14; j > 3; j--) {
	  for (var k = 0; k < 5; k++) {
	   wins[i + k][j - k][count] = true;
	  }
	  count++;
	 }
	}
	//console.log(count); //572 可知 15 * 15 的棋盘上 五子棋共有 572 种赢法
	
	/* 定义全局一维数组 统计某种赢法下黑白棋子的状态 并初始化 */
	var BlackWin = [];
	var WhiteWin = [];
	for (var i = 0; i < count; i++) {
	 BlackWin[i] = 0; // 0：未落子  1：落下1子 …… 5：胜利  6:异常 - 对方已经落子（此赢法为不可能）
	 WhiteWin[i] = 0; // 换句话说，当BlackWin和WhiteWin数组的所有值都为 6 时， 为和棋
	}
	
	
	
	
	
	/***** UI设计 -- 棋盘绘制 & 棋子绘制 & 落子动作 *****/
	/* 获取Canvas面板 */
	var chess = document.getElementById('chess');
	/* 2D面板 */
	var context = chess.getContext('2d');
	
	/* 加载棋盘背景图 */
	var logo = new Image();
	logo.src = "../img/game_gobang/qipan.jpg";
	context.drawImage(logo, 0, 0,450,450);
	
	/* 绘制棋盘 */
	var drawChessBoard = function() {
	 /* 线条颜色 */
	 context.strokeStyle = "#BFBFBF";
	 for (var i = 0; i < 15; i++) {
	  /* 横线 */
	  context.moveTo(15 + i * 30, 15);
	  context.lineTo(15 + i * 30, 435);
	  context.stroke();
	  /* 纵线 */
	  context.moveTo(15, 15 + i * 30);
	  context.lineTo(435, 15 + i * 30);
	  context.stroke();
	 }
	}
	
	
	/* 走棋 */
		/* param - i : 棋子落点第几行 */
		/* param - j : 棋子落点第几列 */
		/* param - me : 是否黑棋 */
		var oneStep = function(i, j, me) {
		 /* 画圆（棋子） */
		 context.beginPath();
		 context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI); //圆心x  圆心y  半径  弧度(起)  弧度(止)
		 context.closePath();
		 //context.stroke();//描边
		 //context.fill();//填充
		 
		/* 棋子颜色渐变 */
		 var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0); //外圆圆心坐标 半径， 内圆圆心坐标半径
		 if (me) {
		  //黑棋颜色
		  gradient.addColorStop(0, "#0A0A0A"); //外圆颜色 0代表百分比
		  gradient.addColorStop(1, "#636766"); //内圆颜色 1代表百分比
		  } else {
		  //白棋颜色
		  gradient.addColorStop(0, "#D1D1D1");
		  gradient.addColorStop(1, "#F9F9F9");
		 }
		 context.fillStyle = gradient;
		 context.fill();
		}
		
		/* canvas绑定点击事件 实现点击落子 */
		chess.onclick = function(e) {
		 /* 如果棋局结束 点击不再产生效果 */
		  if(over){return;}
		 /* 如果没有轮到黑方行棋 点击不触发事件 (如需双人对战，则取消该判断与下方AI行棋方法) */
		 if (!me) {return;}
		 
		 var x = e.offsetX; //点击位置横坐标
		 var y = e.offsetY; //点击位置纵坐标
		 var i = Math.floor(x / 30); //对应x坐标到棋盘所在交叉点
		 var j = Math.floor(y / 30); //对应y坐标到棋盘所在交叉点
		
		 /* 位置为空 可以落子 */
		 if (chessBoard[i][j] == 0) {
		  /* 落子 */
		  oneStep(i, j, me);
		
		  if (me) {
		   chessBoard[i][j] = 1; //黑方落子
		  } else {
		   chessBoard[i][j] = 2; //白方落子 -- 人机对战时 该行不会执行
		  }
		  /* 轮流落子 */
		  me = !me;
		
		  /* 落子完成之后 遍历所有赢法 */
		  for (var k = 0; k < count; k++) {
		   /* 包含落子点的赢法的统计数组 + 1 */
		   if(wins[i][j][k]){
		    BlackWin[k]++; //黑棋在第k种赢法中统计数字 + 1
		    WhiteWin[k] = 6; //同时白棋不可能以第k种赢法胜利
		    /* 胜利判断 */
		    if (BlackWin[k] == 5) {
		     window.alert("you win");
		     over = true; //棋局结束
		    }
		   }
		  }
		
		  /* 如果棋局未结束 计算机AI自动执白行棋 */
		  if (!over) {
		   computerAI();
		  }
		 }
		}
		
		/***** AI算法基本思路与实现 *****/
		/* 1、计算机执白后行 */
		/* 2、计算目标：阻止黑棋五子连线 && 试图白棋五子连线 */
		/* 3、记录棋盘中可能出现的所有赢法。 三维数组(棋子x, 棋子y, 赢法ID) */
		/* 4、赢法统计数组。 对每一种赢法的当前落子情况统计 */
		/* 5、胜负判定 */
		/* 6、计算机落子优先系数 */
		/* 7、计算机执白后行，同情况下白棋优先级需要高于黑棋。 即黑白棋同时4子连线时，需优先连接白棋第5子而非拦截黑棋 */
		/* 8、得分累加来判定某一点落子的价值大小*/
		/* 9、获取落子价值得分最高的点 */
		/* 10、落子的价值分相同时， 优先级顺序的选择：高 --> 低   行白+拦黑  >  行白  >  拦黑+行白  >  拦黑 */
		
		/* AI算法实现 */
		var computerAI = function(){
		
		 /* 定义变量 保存落子价值得分最高的分数和点坐标 */
		 var max = 0;
		 var u = 0;
		 var v = 0;
		
		 /* 定义两个一维数组 存储当前黑棋和白棋的落子评分 并初始化*/
		 var BlackScore = [];
		 var WhiteScore = [];
		 for (var i = 0; i < 15; i++) {
		  BlackScore[i] = [];
		  WhiteScore[i] = [];
		  for (var j = 0; j < 15; j++) {
		   BlackScore[i][j] = 0;
		   WhiteScore[i][j] = 0;
		  }
		 }
		
		 /* 评分方法 */
		 for (var i = 0; i < 15; i++) {
		  for (var j = 0; j < 15; j++) {
		   /* 该点无落子 */
		   if (chessBoard[i][j] == 0) {
		    /* 遍历所有赢法 */
		    for (var k = 0; k < count; k++) {
		     /* 对包含该点的赢法 所对应的赢法统计数组进行加分 -- 说明在该点落子是有价值的 */
		     if (wins[i][j][k]) {
		      /* 如果黑棋在这种赢法中已有1个落子 */
		      if (BlackWin[k] == 1) {
		       BlackScore[i][j] += 200;
		      /* 如果黑棋在这种赢法中已有2个落子 */
		      }else if (BlackWin[k] == 2) {
		       BlackScore[i][j] += 400;
		      /* 如果黑棋在这种赢法中已有3个落子 */
		      }else if (BlackWin[k] == 3) {
		       BlackScore[i][j] += 2000;
		      /* 如果黑棋在这种赢法中已有4个落子 */
		      }else if (BlackWin[k] == 4) {
		       BlackScore[i][j] += 10000;
		      }
		
		      /* 如果白棋在这种赢法中已有1个落子 */
		      if (WhiteWin[k] == 1) {
		       WhiteScore[i][j] += 220;
		      /* 如果白棋在这种赢法中已有2个落子 */
		      }else if (WhiteWin[k] == 2) {
		       WhiteScore[i][j] += 420;
		      /* 如果白棋在这种赢法中已有3个落子 */
		      }else if (WhiteWin[k] == 3) {
		       WhiteScore[i][j] += 2100;
		      /* 如果白棋在这种赢法中已有4个落子 */
		      }else if (WhiteWin[k] == 4) {
		       WhiteScore[i][j] += 20000;
		      }
		     }
		    }
		
		    /* 记录价值最高分和最高价值落子点坐标 */
		    /* 优先级问题  越靠后，优先级越高*/
		
		    /* 1、拦截黑棋 */
		    if (BlackScore[i][j] > max) {
		     max = BlackScore[i][j];
		     u = i;
		     v = j;
		    /* 2、当对黑棋的拦截价值分数相同时 优先选择在拦截基础上对白棋价值分更高的点位 */
		    }else if(BlackScore[i][j] == max){
		     if (WhiteScore[i][j] > WhiteScore[u][v]) {
		      u = i;
		      v = j;
		     }
		    }
		    /* 3、当行白棋和拦截黑棋价值分相同时，优先行走白棋*/
		    if (WhiteScore[i][j] > max) {
		     max = WhiteScore[i][j];
		     u = i;
		     v = j;
		    /* 4、当多个行走白棋的方案价值分相同时，优先选择在行走白棋基础上对黑棋拦截价值分更高的点位 */
		    }else if(WhiteScore[i][j] == max){
		     if (BlackScore[i][j] > BlackScore[u][v]) {
		      u = i;
		      v = j;
		     }
		    }
		   }
		  }
		 }
		
		 /* 计算机AI计算完毕 落子 */
		 oneStep(u, v, false);
		 /* 改变落子点状态 */
		 chessBoard[u][v] = 2; //白棋落子
		 /* 胜负判定*/
		 for (var k = 0; k < count; k++) {
		  if (wins[u][v][k]) {
		   /* 白棋在该赢法下胜利系数 + 1 */
		   WhiteWin[k]++;
		   /* 黑棋不可能在该赢法下胜利 */
		   BlackScore[k] = 6;
		   if (WhiteWin[k] == 5) {
		    window.alert("Computer Win");
		    over = true;
		   }
		  }
		 }
		 /* 如果未结束 改变落子方 */
		 if (!over) {
		  me = !me;
		 }
	
	}
	//重新开始
	$("#restart").onclick = function(){
	    window.location.reload();
	}
	
	
});


</script>
    <!-- script ends -->
</head>
<body>
	<div>
	   <canvas id="chess" width="450px" height="450px"></canvas>
	   <img id="img" src="../img/game_gobang/qipan.jpg" hidden="hidden"/>
	   <div id='restart' class="restart">
            <span>重新开始</span>
        </div>
	</div>
</body>
</html>

棋盘图片：

效果图片：

樱梦雪苹宝
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
五子棋ai人工智能（网页版）
06-08
五子棋AI算法原理，博弈树、极大极小值搜索算法、α-β剪枝算法
html实现五子棋游戏
路在前方
10-31 5494
实现代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <style type='text/css'> canvas { display: block; margin: 50px
html游戏原生实现（五子棋）
最新发布
WUXIANJINBU的博客
06-18 199
点击一个格子就可以下棋了，你下完一步AI会自动下，加油！
前端实现五子棋小游戏2（AI实现人机对战）
weixin_44584059的博客
08-23 9615
通过一个简单的算法，来实现AI智能对弈的五子棋小游戏AI难点解析赢法数组赢法的统计数组判断胜负计算机的落子规则代码实现赢法数组赢法种类的索引横线赢法竖线赢法横线赢法斜线赢法反斜线赢法赢法的统计数组定义函数computerAI（）实现电脑对弈遍历棋盘与所有赢法，对黑棋/白棋落子行为进行加分记录并选出最高分数，即为获胜整体代码htmlCSSscript.js AI难点解析 赢法数组 三维数组，前两维是棋盘，第三维是赢法数组；每一种赢法对应一个二维棋盘，上面或许只有5个点是true，这5个点一定连成一条线 赢法的
网页五子棋的实现--界面和AI实现
xihuaxi的专栏
08-22 6121
分为两个部分：一个是页面的搭建，一个是AI的实现 1. 棋盘的设计，本例使用15*15的棋盘设计。 利用canvas进行棋盘设计， 标签是 HTML 5 中的新标签。
C++项目：在线五子棋对战（网页版）
wjmhlh的博客
08-10 2989
本项⽬主要实现⼀个⽹⻚版的五⼦棋对战游戏，其主要⽀持以下核⼼功能：• 用户管理:实现用户注册，用户登录、获取用户信息、用户天梯分数记录、用户比赛场次记录等。• 匹配对战:实现两个玩家在网页端根据天梯分数匹配游戏对⼿，并进行五子棋游戏对战的功能。• 聊天功能:实现两个玩家在下棋的同时可以进⾏实时聊天的功能。
JS+canvas五子棋人机对战实现步骤详解
10-15
总结起来，实现一个JS+canvas五子棋人机对战系统涉及以下步骤： 1. 定义游戏对象并设置初始状态。 2. 创建和配置canvas棋盘。 3. 绘制棋盘网格。 4. 实现画棋子的功能。 5. 添加鼠标交互，允许预览落子。 6. 设计并...
javascript五子棋人机对战
06-01
【javascript五子棋人机对战】项目是一个利用JavaScript实现的在线五子棋游戏，它包含人工智能（AI）模块，让玩家可以与计算机进行对战。这个项目可能是一个半成品，开发者试图通过不同的计算策略来优化游戏性能，...
网页版人机对战五子棋
05-02
【网页版人机对战五子棋】是一种在网页上实现的互动游戏，它允许玩家与计算机进行对弈。这个游戏的开发涉及到了多种技术，包括前端界面设计、后端逻辑处理以及人工智能算法的运用。 首先，前端部分是用户与游戏交互...
网页版五子棋人机对战 源码.zip
05-28
网页版五子棋人机对战源码是一个基于HTML的小游戏项目，主要涉及的技术栈包括HTML、CSS和JavaScript。此项目旨在实现一个用户友好的在线五子棋游戏平台，允许玩家与计算机进行对战，体验五子棋的乐趣。在这款游戏中...
AI五子棋_人机对战_js源码
12-31
《JavaScript实现的AI五子棋人机对战详解》 在信息技术日新月异的今天，人工智能（AI）已经深入到各个领域，其中包括娱乐游戏。本文将深入探讨一个基于JavaScript实现的五子棋人机对战系统，让我们一起揭秘这款单机...
人机对战五子棋网页版
03-04
人机对战资源希望和大家共享，我写这个东东，已经纠结了好久，对大家会很有帮助的
HTML5网页版黑白子五子棋游戏代码
11-03
HTML5网页版黑白子五子棋游戏代码 HTML5网页版黑白子五子棋游戏代码
js实现带简单Ai的网页五子棋制作（UI篇）
斌哥的博客
01-14 3376
前言: 最近学了html，css，js，想找个项目来练习一下，就做了一个简单的网页五子棋，主要用到了canvas画图，逻辑部分都是js来写的，很简单，在这里简单的记录一下开发流程。 创建棋盘： 用canvas创建一个棋盘画板，棋盘的大小设置为450px 450px，并且用css设置canvas样式，设置好了之后就有一个棋盘了，让后利用js实现棋盘上面的画线操作。 canvas注意事项：: ...
【Unity】五子棋AI博弈算法实讲
Leibnezz的博客
02-21 2109
系统的，分层次的讲解了五子棋AI博弈算法。
可能是github上最受欢迎的五子棋AI
热门推荐
wbsu2004的博客
12-03 1万+
gobang 是一款基于 JavaScript 开发的在线五子棋游戏。
对战五子棋——网页版
m0_62404808的博客
07-16 4308
实现一个网页版的五子棋对战程序，用户可以进行注册，注册完成后登录进入游戏大厅，会显示用户的天梯分数记录以及比赛场次的记录，会根据用户的天梯分数实现匹配机制，实现两个玩家在网页端进行五子棋的对战。@Data@Data@Data// 胜利玩家的 userId。
AI五子棋——超强改进版本
小天狼星_布莱克 的博客
08-07 5295
【代码】AI五子棋。
html css制作五子棋,js实现带简单Ai的网页五子棋制作（UI篇）
weixin_39759441的博客
06-22 2102
前言:最近学了html，css，js，想找个项目来练习一下，就做了一个简单的网页五子棋，主要用到了canvas画图，逻辑部分都是js来写的，很简单，在这里简单的记录一下开发流程。创建棋盘：用canvas创建一个棋盘画板，棋盘的大小设置为450px 450px，并且用css设置canvas样式，设置好了之后就有一个棋盘了，让后利用js实现棋盘上面的画线操作。canvas注意事项：:默认情况下 元素...
pygame五子棋人机对战
09-12
在pygame中实现五子棋人机对战的过程可以分为以下几个步骤: 1. 首先要搭建游戏的界面，包括绘制棋盘和棋子。通过使用pygame库的功能，可以很容易地画出一个19×19或15×15的棋盘。为了画出棋子，可以使用pygame.draw.circle函数来绘制圆形的棋子。 2. 接下来需要实现玩家和电脑的交互。可以通过鼠标点击来实现玩家下棋的操作。当玩家下完一步棋后，电脑需要根据当前棋盘状态来做出反应。这可以通过编写算法来判断最优的下棋位置。 3. 在编写算法时，可以考虑使用“极大极小值算法”或“博弈树搜索算法”来优化电脑的下棋策略。这些算法可以帮助电脑预测未来几步的走法，从而做出最佳选择。 4. 当玩家或电脑满足胜利条件时，需要进行游戏结束的处理。可以通过判断是否有五子连珠来确定胜负，如果有，则宣布胜利的一方。 综上所述，通过以上步骤，可以实现pygame五子棋人机对战。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值