js实现双人对战五子棋

最新推荐文章于 2023-08-22 17:18:44 发布
最新推荐文章于 2023-08-22 17:18:44 发布
阅读量1k 收藏 9
点赞数
分类专栏： 前端 文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44456354/article/details/115202783
版权

js实现双人对战五子棋


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>双人对战五子棋 - temptation</title>
		<style type="text/css">
			#center{
				text-align:center;
			}
			table {
				border: 1px solid black;
				border-collapse: collapse;
				background-color: burlywood;
				margin:0 auto
			}
			
			td {
				border: 1px solid black;
				width: 40px;
				height: 40px;
			}

		</style>
		<script type="text/javascript">
			// 需求：综合运用HTML、CSS、JavaScript，在页面中实现《两人对战五子棋》游戏
			//		五子棋的规则：
			//		1、页面上有棋盘（15 * 15），分为黑棋和白棋，黑棋先行
			//		2、横向、纵向、斜向，只要有5个连成直线的同色棋子，就算赢

			// 思路：获取当前落子棋子的坐标和颜色，寻找其周围横向、纵向、斜向是否能形成5个连续的同色子
			
			// 设置棋子初始颜色
			var currentColor = 'black';
			
			// 页面加载
			window.onload = function () {
				// 获取页面元素提示信息并赋值
				document.getElementById('spanColor').innerText = currentColor;
				
				// 获取页面元素棋盘表格
				var chessboard = document.getElementById('chessboard');
				
				// 绑定事件
				chessboard.onclick = function () {
//					console.log(this);				// this指向的是table#chessboard
//					console.log(event.target);		// event.target指向的是发生点击事件的单元格td

					// 1、获取发生点击事件的单元格对象
					var obj = event.target;
					
					// 2、判断发生点击事件的单元格对象是否已经落子
					if (obj.style.backgroundColor == 'black' || obj.style.backgroundColor == 'white') {
						alert('该位置已经有棋子，不能再落子！');
					} else{
						// 3、修改其背景颜色
						obj.style.backgroundColor = currentColor;
						obj.style.borderRadius = '50%';

						// 4、创建当前棋子对象，提供给后续判断输赢使用
						// 考虑坐标(x, y)：(0, 0),...(0, 14),(1, 1),...(1, 14),...(14, 0),...(14, 14)
						var currentChess = {
							//cellIndex 属性可返回一行的单元格集合中单元格的位置。
							//rowIndex 属性返回某一行在表格的行集合中的位置（row index）
							x: obj.cellIndex,
							y: obj.parentNode.rowIndex,
							color: currentColor
						};
						
						// 5、设置赢的条件
						var flag = (currentColor == 'black' ? 'bbbbb' : 'wwwww');
						
						// 6、设置接下来落子的颜色
						var tempColor = currentColor;
						if (currentColor == 'black') {
							currentColor = 'white';
						} else{
							currentColor = 'black';
						}
						// 获取页面元素提示信息并赋值
						document.getElementById('spanColor').innerText = currentColor;
						
						// 7、判断输赢（其实就是查看坐标系中的棋子颜色情况）
						// 获取棋盘中所有的单元格对象，得到单元格数组
						var tdArr = document.getElementById('chessboard').getElementsByTagName('td');
						
						// 存储棋子位置的容器，四个字符串对应横向、竖向、左上右下斜向、右上左下斜向
						var result = ['', '', '', ''];
						
						// 遍历棋盘
						for (var i = 0; i < tdArr.length; i++) {
							// 初始化每一个位置对象
							var tempChess = {
								x: tdArr[i].cellIndex,
								y: tdArr[i].parentNode.rowIndex,
								color: '0' // 位置上无棋子
							};
							
							// 遍历时，如果该位置上有棋子，就修改color属性
							if (tdArr[i].style.backgroundColor == 'black') {
								tempChess.color = 'b';
							} else if (tdArr[i].style.backgroundColor == 'white') {
								tempChess.color = 'w';
							}
							
							// 遍历每一个位置 和 当前棋子进行比较
							//位于统一横线y为0，位于同一个竖线x为0
							// 位于同一横线上，例如：(0, 0), (1, 0), (5, 0)
							if (currentChess.y == tempChess.y) {
								result[0] += tempChess.color;
							}
							// 位于同一竖线上，例如：(0, 0), (0, 1), (0, 5)
							if (currentChess.x == tempChess.x) {
								result[1] += tempChess.color;
							}
							// 位于同一斜线上（左上至右下）
							// 例如：(0, 0), (1, 1), (2, 2)；
							//		(0, 1), (1, 2), (2, 3);(0, 2), (1, 3), (2, 4);
							//		(1, 0), (2, 1), (3, 2);(2, 0), (3, 1), (4, 2)；
							if ((currentChess.x - tempChess.x) == (currentChess.y - tempChess.y)) {
								result[2] += tempChess.color;
							}
							// 位于同一斜线上（右上至左下）
							// 例如：(14, 0), (13, 1), (12, 2);
							//		(13, 0), (12, 1), (11, 2);(12, 0), (11, 1), (12, 2);
							//		(14, 1), (13, 2), (12, 3);(14, 2), (13, 3), (12, 4);
							if ((currentChess.x + currentChess.y) == (tempChess.x + tempChess.y)) {
								result[3] += tempChess.color;
							}
						}
						
						// 遍历
						for (var i = 0; i < result.length; i++) {
							// indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
							if(result[i].indexOf(flag) >= 0) {
								if (tempColor == 'black') {
									alert('黑棋获胜！');	
								} else if (tempColor == 'white') {
									alert('白棋获胜！');
								}
								
								break;
							}
						}
					}
				};
			};
		</script>
	</head>
	<body>
		<!-- <center> -->
		<div id="center">
			<h3>双人对战五子棋</h3>
			<div id="divMsg">
				落子者为：<span id="spanColor"></span>
			</div>
			<table id="chessboard">
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
			</table>
		</div>
	<!-- </center> -->
	</body>
</html>
code_xin~
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
原生Javascript实现五子棋
qq_41961383的博客
08-26 3539
原生Javascript实现五子棋
js 实现ai五子棋人机大战
yw_hard的博客
12-01 1211
实现原理就是计算五子棋所有赢的种类，利用canvas实现五子棋排版落子。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...
H5+C3+JS实现双人对战五子棋游戏（UI篇）
10-17
主要为大家详细介绍了H5+C3+JS实现双人对战五子棋游戏，实现双人对战模式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
双人五子棋HTML5网页源码
03-19
双人五子棋HTML5网页源码
利用开源HTML5引擎lufylegend.js结合javascript实现的五子棋人机对弈
李熠专用博客_白帽子一枚，人称低危终结者
09-05 9179
前言     本文主要介绍利用开源引擎lufylegend.js开发基于Html5的游戏--五子棋,主要叙述其详细开发过程。 游戏规则     玩过五子棋的都应该知道五子棋的规则，这里就简单介绍其规则。     1、传统五子棋的棋具与围棋大致相同，棋子分为黑白两色，棋盘为15×15，棋子放置于棋盘线交叉点上。两人对局，各执一色，轮流下一子，先将横、竖或斜线的5个或5个以上同色棋子连成不间断
JavaScript应用：五子棋游戏实战开发
黑夜开发者的博客
08-10 3188
本篇文章介绍了如何使用JavaScript开发一个简单的五子棋游戏。通过绘制棋盘、实现开始按钮和游戏逻辑、处理用户交互、判断胜负和游戏结束等功能，我们完成了一个基本的五子棋游戏。当然，我们还可以对游戏进行优化和扩展，例如增加悔棋功能、提示下一步最佳落子位置等。JavaScript是一种非常强大和灵活的编程语言，可以用于开发各种类型的应用程序和游戏。希望通过这篇文章，你对使用JavaScript开发游戏有了更深入的了解。如果你对五子棋游戏开发还有任何问题或建议，欢迎在评论区留言讨论。
学弟学妹看我文章顺利毕业，基于HTML+Javascript五子棋人机博弈系统设计与实现《记得收藏》
苏州程序大白的博客
07-03 3611
基于HTML+Javascript五子棋人机博弈系统设计与实现《记得收藏》目录????️‍????1、需求分析1.1.1、功能性需求分析 目录 ????开讲啦！！！！ ????️‍????1、需求分析 1.1.1、功能性需求分析 本系统的主要功能是人机在线进行对弈， 能统计下棋的棋数目以及输赢的总数。 能对用户名进行修改，使用vcsode开发，基于win10操作系统开发的在线人机对弈平台，阐述了系统的总体架构，逻辑，并且说明了系统的总体设计的策略。说明了本软件的需求规格。人机五子棋博弈项目，
js实现双人五子棋小游戏
10-15
主要为大家详细介绍了js实现双人五子棋小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue+websocket实现双人在线五子棋
05-17
把项目拷贝到webstorm即可运行，前端服务器输入vue-cli-service serve运行，后端服务器输入node ws.js运行
双人对战五子棋小游戏
09-11
双人对战五子棋小游戏是一款简单易上手的休闲娱乐项目，专为朋友们提供一个无需网络连接即可进行的互动平台。在这个游戏中，你和你的伙伴、朋友或家人可以直接进行面对面的智力对决，享受五子棋的魅力。 五子棋，又...
【JavaScript源代码】原生JavaScript实现简单五子棋游戏.docx
12-30
原生JavaScript实现简单五子棋游戏 　　本文实例为大家分享了JavaScript实现简单五子棋游戏的具体代码，供大家参考，具体内容如下　　HTML页面　　注释都很明确了，大家好好学习。　　<!DOCTYPE html>　　<html lang="en">　　  　　<head>　　  <meta charset="UTF-8">　　  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">　　  <title>五子棋</t
js实现五子棋游戏
01-26
js实现五子棋游戏 js五子棋 五子棋游戏 js五子棋 五子棋游戏
JS网页游戏五子棋源码.html
10-23
JS五子棋，界面简洁美观，适合学习JavaScript游戏编程，五子棋游戏是一款很益智的游戏，很多朋友都喜欢！鼠标点击网格节点即可开始下棋。
js实现五子棋落子，判定结果
最新发布
wwtx2048的博客
08-22 281
黑子先行不可让子上下、左右、右上左下、左上右下,四个方向有一个方向连成5子即获胜。
网页设计大作业-五子棋游戏，可以进行双人对弈
weixin_43474701的博客
10-30 2186
游戏如下动态图 下载链接在文末
基于JavaScript的简易五子棋游戏
superscales的博客
03-15 190
【代码】基于JavaScript的简易五子棋游戏。
用 p5.js 写个五子棋
笔记本
08-11 288
用 p5.js 写个五子棋，内附完整代码
html双人对战源码,双人对战五子棋游戏 综合运用HTML、CSS、JavaScript实现
weixin_36403106的博客
06-15 2387
双人对战五子棋游戏 综合运用HTML、CSS、JavaScript实现五子棋的规则：1、页面上有棋盘(15 * 15)，分为黑棋和白棋，黑棋先行2、横向、纵向、斜向，只要有5个连成直线的同色棋子，就算赢思路：获取当前落子棋子的坐标和颜色，寻找其周围横向、纵向、斜向是否能形成5个连续的同色子下载链接：点击下载演示站点：点击打开演示图片：程序源码：双人五子棋对战 - temptationtable {...
js实现五子棋小游戏
clf20731的博客
06-16 1356
html、css、js实现五子棋小游戏
java双人对战五子棋
05-24
下面是一个简单的双人对战...这段代码实现了一个简单的双人对战五子棋游戏，玩家可以通过输入坐标来落子，程序会自动判断是否有玩家获胜。注意，这段代码还没有实现悔棋、保存游戏等功能，你可以根据需要进行扩展。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值