js实现简单五子棋游戏源码

作者：

在

文章目录

<!– //html和css –> <!DOCTYPE html> <html lang=”en”> <!– Head –> <head> <meta charset=”UTF-8″> <title>五子棋</title> <!– css –> <style type=”text/css”> #container { width: 531px; height: 645px; margin: 0 auto; border: 1px solid blue; background: url(qipan.jpg) no-repeat; padding-top: 0px; padding-left: 5px; } td { width: 40px; height: 33px; } table { border-collapse: collapse; width: 525px; height: 465px; } </style> <!– css ends –> <!– script –> <script src=”wuzi.js”></script> <!– script ends –> </head> <!– Head Ends –> <!– Body –> <body> <!– Container –> <div id=”container”> <!– table model –> <table> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <!– 控件模块 –> <br> <div> <p> 当前棋手： <img id=”qizi” src=””> <input type=”button” value=”黑棋先行” onclick=”status1()”> <input type=”button” value=”白棋先行” onclick=”status2()”> <input type=”button” value=”再来一局” onclick=”window.location.href=window.location”> <input type=”button” value=”退出游戏” onclick=”closeFunction()”> </p> </div> </div> <!– Container Ends –> </body> <!– Body Ends –> </html> <script type=”text/javascript”> //js部分代码 /*状态事件*/ function status1() { document.getElementById(‘qizi’).src = “black.png”; } function status2() { document.getElementById(‘qizi’).src = “white.png”; } /* 控件事件 */ function closeFunction() { if (confirm(“是否退出游戏？”)) { window.close(); } else { history.back(); } } /* 判断输赢 */ var cnt = (function() { var curr = ‘black’; return function() { var tmp = curr; if (curr == ‘black’) { curr = ‘white’; } else { curr = ‘black’; } return tmp; } })(); var tds = document.getElementsByTagName(‘td’); var iswin = false; // 有没有分出胜负 // 负责下棋，即改变单元格的背景 var xia = function() { // 判断是否已分出胜负 var color = cnt(); if (iswin) { alert(‘游戏结束!’); return; } if (this.style.background.indexOf(‘.png’) >= 0) { alert(‘不能重复放置棋子！’); return; } this.style.background = ‘url(‘ + color + ‘.png)’; judge.call(this, color); // 下完棋后判断胜负 } // 判断胜负的函数 var judge = function(color) { // 找当前这颗棋的坐标 // td在tr中索引，即是横坐标 // tr是table的索引，即是纵坐标 var curr = { x: this.cellIndex, y: this.parentElement.rowIndex, color: color }; var line = [”, ”, ”, ”]; //分别放置横，竖，左右下斜上棋 // 循环225单元格 for (var i = 0, tmp = {}; i < 225; i++) { // 取当前循环到的这颗棋的坐标 tmp = { x: tds[i].cellIndex, y: tds[i].parentElement.rowIndex, color: ‘0’ }; // 取当前循环到的这颗棋的颜色，分别b,w 0（空）来表示 if (tds[i].style.background.indexOf(‘black’) >= 0) { tmp.color = ‘b’; } else if (tds[i].style.background.indexOf(‘white’) >= 0) { tmp.color = ‘w’; } if (curr.y == tmp.y) { // 在一个横线上 line[0] += tmp.color; } if (curr.x == tmp.x) { // 在一个竖线上 line[1] += tmp.color; } if ((curr.x + curr.y) == (tmp.x + tmp.y)) { //在左斜线上 line[2] += tmp.color; } if ((curr.x – tmp.x) == (curr.y – tmp.y)) { //在右斜线上 line[3] += tmp.color; } } // 判断4条线上，有没有连续的4个w,或4个b color = color == ‘black’ ? ‘bbbbb’ : ‘wwwww’; //赢家的颜色 for (var i = 0; i < 4; i++) { if (line[i].indexOf(color) >= 0) { alert(color + ‘胜了！(b表示黑方胜，w表示白方胜)’); iswin = true; // 标志已经分出胜负 break; } } } window.onload = function() { document.getElementsByTagName(‘table’)[0].onclick = function(ev) { // 1. 下棋 // 2. 判断胜负 xia.call(ev.srcElement); }; } </script>
<!DOCTYPE html> <html> <head lang=”en”> <meta charset=”UTF-8″> <title></title> <style> * { padding: 0; margin: 0; } canvas { margin: 10px; border: 2px solid #000; } #box { display: inline-block; position: absolute; margin-top: 200px; margin-left: 100px; } span { font: 24px “微软雅黑”; display: inline-block; height: 50px; } input { margin-top: 30px; display: block; width: 100px; height: 50px; font: 16px “微软雅黑”; color: #fff; background-color: #0099cc; } </style> </head> <body> <canvas width=”640″ height=”640″ id=”cas”> 您的浏览器不支持canvas，请升级到最新的浏览器 </canvas> <div id=”box”> <span id=”txt”></span> <input type=”button” id=”btn” value=”重新开始” /> </div> <script> var flag = true; //true代表白棋下的棋子，false代表黑棋下的棋子 var isWin = false; //判断是否结束，true结束，false没有结束 var step = 40; //设置每个格子的宽高都是40 var txt = document.getElementById(“txt”); var btn = document.getElementById(“btn”); var cas = document.getElementById(“cas”); // 获取画布对象 var ctx = cas.getContext(“2d”); //画布上下文 // 创建图片对象 var img_b = new Image(); img_b.src = “imgs/b.png”; //设置黑棋图片路径 var img_w = new Image(); img_w.src = “imgs/w.png”; //设置白棋图片路径 // 用二维数组来保存棋盘，0代表没有走过，1为白棋走过，2为黑棋走过 var arr = new Array(15); //声明一个一维数组 for (var i = 0; i < 15; i++) { arr[i] = new Array(15); //每个值再声明一个一维数组，这样就组成了一个二维数组 for (var j = 0; j < 15; j++) { arr[i][j] = 0; } } //绘制棋盘 function drawLine() { for (var i = 0; i < cas.width / step; i++) { // 画竖线 ctx.moveTo((i + 1) * step, 0); ctx.lineTo((i + 1) * step, cas.height); // 画横线 ctx.moveTo(0, (i + 1) * step); ctx.lineTo(cas.width, (i + 1) * step); ctx.stroke(); } } //获取鼠标点击的位置 cas.onclick = function(e) { // 先判断游戏是否结束 if (isWin) { alert(“游戏已经结束，请刷新重新开始！”); return 0; } //判断棋子显示的地方，四条边上不显示棋子， //鼠标点击的位置减去边框距离页面的上和左的距离（10），减去一个格子宽高的一半（20） var x = (e.clientX – 10 – 20) / 40; var y = (e.clientY – 10 – 20) / 40; //进行取整来确定棋子最终显示的区域 x = parseInt(x); y = parseInt(y); //如果超出棋盘或者在棋盘边界直接返回，边界上不能画棋子 if (x < 0 || x >= 15 || y < 0 || y >= 15) { return; } //进行判断该位置是否已经显示过棋子 if (arr[x][y] != 0) { alert(“你不能在这个位置下棋”); return; } // 判断是显示黑子还是白子 if (flag) { //白子 flag = false; //将标志置为false,表示下次为黑子 drawChess(1, x, y); //调用函数来画棋子 } else { //黑子 flag = true; //将标志置为true,表示下次为白子 drawChess(2, x, y); //调用函数来画棋子 } } //画棋子 function drawChess(num, x, y) { //根据x和y确定图片显示位置,让图片显示在十字线中间，因为一个格子为40，图片大小为30，所以40-30/2等于25，所以需要加上25 var x0 = x * step + 25; var y0 = y * step + 25; if (num == 1) { //绘制白棋 ctx.drawImage(img_w, x0, y0); arr[x][y] = 1; //白子 } else if (num == 2) { // 绘制黑棋 ctx.drawImage(img_b, x0, y0); arr[x][y] = 2; //黑子 } //调用函数判断输赢 judge(num, x, y); } //判断输赢 function judge(num, x, y) { var n1 = 0, //左右方向 n2 = 0, //上下方向 n3 = 0, //左上到右下方向 n4 = 0; // 右上到左下方向 //***************左右方向************* //先从点击的位置向左寻找，相同颜色的棋子n1自加，直到不是相同颜色的棋子，则跳出循环 for (var i = x; i >= 0; i–) { if (arr[i][y] != num) { break; } n1++; } //然后从点击的位置向右下一个位置寻找，相同颜色的棋子n1自加，直到不是相同颜色的棋子，则跳出循环 for (var i = x + 1; i < 15; i++) { if (arr[i][y] != num) { break; } n1++; } //****************上下方向************ for (var i = y; i >= 0; i–) { if (arr[x][i] != num) { break; } n2++; } for (var i = y + 1; i < 15; i++) { if (arr[x][i] != num) { break; } n2++; } //****************左上到右下斜方向*********** for (var i = x, j = y; i >= 0, j >= 0; i–, j–) { if (i < 0 || j < 0 || arr[i][j] != num) { break; } n3++; } for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) { if (i >= 15 || j >= 15 || arr[i][j] != num) { break; } n3++; } //****************右上到左下斜方向************* for (var i = x, j = y; i >= 0, j < 15; i–, j++) { if (i < 0 || j >= 15 || arr[i][j] != num) { break; } n4++; } for (var i = x + 1, j = y – 1; i < 15, j >= 0; i++, j–) { if (i >= 15 || j < 0 || arr[i][j] != num) { break; } n4++; } //用一个定时器来延时，否则会先弹出对话框，然后才显示棋子 var str; if (n1 >= 5 || n2 >= 5 || n3 >= 5 || n4 >= 5) { if (num == 1) { //白棋 str = “白棋赢了，游戏结束！” } else if (num == 2) { //黑棋 str = “黑棋赢了，游戏结束！” } txt.innerHTML = str; isWin = true; } } //重新开始 btn.onclick = function() { flag = true; isWin = false; for (var i = 0; i < 15; i++) { for (var j = 0; j < 15; j++) { arr[i][j] = 0; } } ctx.clearRect(0, 0, 640, 640); txt.innerHTML = “”; drawLine(); } drawLine(); </script> </body> </html> 效果演示如下图：参考资料： https://www.cnblogs.com/xbyl/p/5733830.html https://www.jb51.net/article/128503.htm

<!-- //html和css -->
<!DOCTYPE html>
<html lang="en">
	<!-- Head -->
	<head>
		<meta charset="UTF-8">
		<title>五子棋</title>
		<!-- css -->
		<style type="text/css">
			#container {
				width: 531px;
				height: 645px;
				margin: 0 auto;
				border: 1px solid blue;
				background: url(qipan.jpg) no-repeat;
				padding-top: 0px;
				padding-left: 5px;
			}

			td {
				width: 40px;
				height: 33px;
			}

			table {
				border-collapse: collapse;
				width: 525px;
				height: 465px;
			}
		</style>
		<!-- css ends -->
		<!-- script -->
		<script src="wuzi.js"></script>
		<!-- script ends -->
	</head>
	<!-- Head Ends -->
	<!-- Body -->
	<body>
		<!-- Container -->
		<div id="container">
			<!-- table model -->
			<table>
				<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>
			<!-- 控件模块 -->
			<br>
			<div>
				<p>&nbsp;当前棋手：
					<img id="qizi" src="">
					<input type="button" value="黑棋先行" onclick="status1()">
					<input type="button" value="白棋先行" onclick="status2()">
					<input type="button" value="再来一局" onclick="window.location.href=window.location">
					<input type="button" value="退出游戏" onclick="closeFunction()">
				</p>
			</div>
		</div>
		<!-- Container Ends -->
	</body>
	<!-- Body Ends -->
</html>


<script type="text/javascript">
	//js部分代码
	/*状态事件*/

	function status1() {
		document.getElementById('qizi').src = "black.png";
	}

	function status2() {
		document.getElementById('qizi').src = "white.png";
	}

	/* 控件事件 */
	function closeFunction() {
		if (confirm("是否退出游戏？")) {
			window.close();
		} else {
			history.back();
		}
	}

	/* 判断输赢 */
	var cnt = (function() {
		var curr = 'black';
		return function() {
			var tmp = curr;
			if (curr == 'black') {
				curr = 'white';
			} else {
				curr = 'black';
			}
			return tmp;
		}
	})();

	var tds = document.getElementsByTagName('td');
	var iswin = false; // 有没有分出胜负

	// 负责下棋，即改变单元格的背景
	var xia = function() {
		// 判断是否已分出胜负
		var color = cnt();
		if (iswin) {
			alert('游戏结束!');
			return;
		}
		if (this.style.background.indexOf('.png') >= 0) {
			alert('不能重复放置棋子！');
			return;
		}
		this.style.background = 'url(' + color + '.png)';
		judge.call(this, color); // 下完棋后判断胜负
	}

	// 判断胜负的函数
	var judge = function(color) {
		// 找当前这颗棋的坐标
		// td在tr中索引，即是横坐标
		// tr是table的索引，即是纵坐标
		var curr = {
			x: this.cellIndex,
			y: this.parentElement.rowIndex,
			color: color
		};
		var line = ['', '', '', '']; //分别放置横，竖，左右下斜上棋
		// 循环225单元格
		for (var i = 0, tmp = {}; i < 225; i++) {
			// 取当前循环到的这颗棋的坐标
			tmp = {
				x: tds[i].cellIndex,
				y: tds[i].parentElement.rowIndex,
				color: '0'
			};

			// 取当前循环到的这颗棋的颜色，分别b,w 0（空）来表示
			if (tds[i].style.background.indexOf('black') >= 0) {
				tmp.color = 'b';
			} else if (tds[i].style.background.indexOf('white') >= 0) {
				tmp.color = 'w';
			}

			if (curr.y == tmp.y) {
				// 在一个横线上
				line[0] += tmp.color;
			}
			if (curr.x == tmp.x) {
				// 在一个竖线上
				line[1] += tmp.color;
			}
			if ((curr.x + curr.y) == (tmp.x + tmp.y)) {
				//在左斜线上
				line[2] += tmp.color;
			}
			if ((curr.x - tmp.x) == (curr.y - tmp.y)) {
				//在右斜线上
				line[3] += tmp.color;
			}
		}
		// 判断4条线上，有没有连续的4个w,或4个b
		color = color == 'black' ? 'bbbbb' : 'wwwww'; //赢家的颜色

		for (var i = 0; i < 4; i++) {
			if (line[i].indexOf(color) >= 0) {
				alert(color + '胜了！(b表示黑方胜，w表示白方胜)');
				iswin = true; // 标志已经分出胜负
				break;
			}
		}
	}
	window.onload = function() {
		document.getElementsByTagName('table')[0].onclick = function(ev) {
			// 1. 下棋
			// 2. 判断胜负
			xia.call(ev.srcElement);
		};
	}
</script>

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
padding: 0;
margin: 0;
}
canvas {
margin: 10px;
border: 2px solid #000;
}
#box {
display: inline-block;
position: absolute;
margin-top: 200px;
margin-left: 100px;
}
span {
font: 24px "微软雅黑";
display: inline-block;
height: 50px;
}
input {
margin-top: 30px;
display: block;
width: 100px;
height: 50px;
font: 16px "微软雅黑";
color: #fff;
background-color: #0099cc;
}
</style>
	</head>
	<body>
		<canvas width="640" height="640" id="cas">
			您的浏览器不支持canvas，请升级到最新的浏览器
		</canvas>
		<div id="box">
			<span id="txt"></span>
			<input type="button" id="btn" value="重新开始" />
		</div>

		<script>
			var flag = true; //true代表白棋下的棋子，false代表黑棋下的棋子
			var isWin = false; //判断是否结束，true结束，false没有结束
			var step = 40; //设置每个格子的宽高都是40

			var txt = document.getElementById("txt");
			var btn = document.getElementById("btn");
			var cas = document.getElementById("cas"); // 获取画布对象
			var ctx = cas.getContext("2d"); //画布上下文

			// 创建图片对象
			var img_b = new Image();
			img_b.src = "imgs/b.png"; //设置黑棋图片路径
			var img_w = new Image();
			img_w.src = "imgs/w.png"; //设置白棋图片路径

			// 用二维数组来保存棋盘，0代表没有走过，1为白棋走过，2为黑棋走过
			var arr = new Array(15); //声明一个一维数组
			for (var i = 0; i < 15; i++) {
				arr[i] = new Array(15); //每个值再声明一个一维数组，这样就组成了一个二维数组
				for (var j = 0; j < 15; j++) {
					arr[i][j] = 0;
				}
			}

			//绘制棋盘
			function drawLine() {
				for (var i = 0; i < cas.width / step; i++) {
					// 画竖线
					ctx.moveTo((i + 1) * step, 0);
					ctx.lineTo((i + 1) * step, cas.height);
					// 画横线
					ctx.moveTo(0, (i + 1) * step);
					ctx.lineTo(cas.width, (i + 1) * step);
					ctx.stroke();
				}
			}
			//获取鼠标点击的位置
			cas.onclick = function(e) {
				// 先判断游戏是否结束
				if (isWin) {
					alert("游戏已经结束，请刷新重新开始！");
					return 0;
				}
				//判断棋子显示的地方，四条边上不显示棋子，
				//鼠标点击的位置减去边框距离页面的上和左的距离（10），减去一个格子宽高的一半（20）
				var x = (e.clientX - 10 - 20) / 40;
				var y = (e.clientY - 10 - 20) / 40;

				//进行取整来确定棋子最终显示的区域
				x = parseInt(x);
				y = parseInt(y);
				//如果超出棋盘或者在棋盘边界直接返回，边界上不能画棋子
				if (x < 0 || x >= 15 || y < 0 || y >= 15) {
					return;
				}
				//进行判断该位置是否已经显示过棋子
				if (arr[x][y] != 0) {
					alert("你不能在这个位置下棋");
					return;
				}
				// 判断是显示黑子还是白子
				if (flag) { //白子
					flag = false; //将标志置为false,表示下次为黑子
					drawChess(1, x, y); //调用函数来画棋子

				} else { //黑子
					flag = true; //将标志置为true,表示下次为白子
					drawChess(2, x, y); //调用函数来画棋子

				}
			}
			//画棋子
			function drawChess(num, x, y) {
				//根据x和y确定图片显示位置,让图片显示在十字线中间，因为一个格子为40，图片大小为30，所以40-30/2等于25，所以需要加上25
				var x0 = x * step + 25;
				var y0 = y * step + 25;
				if (num == 1) {
					//绘制白棋
					ctx.drawImage(img_w, x0, y0);
					arr[x][y] = 1; //白子
				} else if (num == 2) {
					// 绘制黑棋
					ctx.drawImage(img_b, x0, y0);
					arr[x][y] = 2; //黑子
				}
				//调用函数判断输赢
				judge(num, x, y);
			}
			//判断输赢
			function judge(num, x, y) {
				var n1 = 0, //左右方向
					n2 = 0, //上下方向
					n3 = 0, //左上到右下方向
					n4 = 0; // 右上到左下方向
				//***************左右方向*************
				//先从点击的位置向左寻找，相同颜色的棋子n1自加，直到不是相同颜色的棋子，则跳出循环
				for (var i = x; i >= 0; i--) {
					if (arr[i][y] != num) {
						break;
					}
					n1++;
				}
				//然后从点击的位置向右下一个位置寻找，相同颜色的棋子n1自加，直到不是相同颜色的棋子，则跳出循环
				for (var i = x + 1; i < 15; i++) {
					if (arr[i][y] != num) {
						break;
					}
					n1++;
				}
				//****************上下方向************
				for (var i = y; i >= 0; i--) {
					if (arr[x][i] != num) {
						break;
					}
					n2++;
				}
				for (var i = y + 1; i < 15; i++) {
					if (arr[x][i] != num) {
						break;
					}
					n2++;
				}
				//****************左上到右下斜方向***********
				for (var i = x, j = y; i >= 0, j >= 0; i--, j--) {
					if (i < 0 || j < 0 || arr[i][j] != num) {
						break;
					}
					n3++;
				}
				for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) {
					if (i >= 15 || j >= 15 || arr[i][j] != num) {
						break;
					}
					n3++;
				}
				//****************右上到左下斜方向*************
				for (var i = x, j = y; i >= 0, j < 15; i--, j++) {
					if (i < 0 || j >= 15 || arr[i][j] != num) {
						break;
					}
					n4++;
				}
				for (var i = x + 1, j = y - 1; i < 15, j >= 0; i++, j--) {
					if (i >= 15 || j < 0 || arr[i][j] != num) {
						break;
					}
					n4++;
				}
				//用一个定时器来延时，否则会先弹出对话框，然后才显示棋子
				var str;
				if (n1 >= 5 || n2 >= 5 || n3 >= 5 || n4 >= 5) {
					if (num == 1) { //白棋
						str = "白棋赢了，游戏结束！"
					} else if (num == 2) { //黑棋
						str = "黑棋赢了，游戏结束！"
					}
					txt.innerHTML = str;
					isWin = true;
				}
			}
			//重新开始
			btn.onclick = function() {
				flag = true;
				isWin = false;

				for (var i = 0; i < 15; i++) {
					for (var j = 0; j < 15; j++) {
						arr[i][j] = 0;
					}
				}
				ctx.clearRect(0, 0, 640, 640);
				txt.innerHTML = "";
				drawLine();
			}
			drawLine();
		</script>
	</body>
</html>

效果演示如下图：

参考资料：
https://www.cnblogs.com/xbyl/p/5733830.html
https://www.jb51.net/article/128503.htm

js 五子棋

华夏福临门盛世加强版怎么样？产品责任是重中之重

国寿福庆典版值得买吗？附投保建议

理财中低风险是几级？中低风险理财会亏吗

瑞泰泰安心防癌险优缺点是什么？这份分析不容错过

2020最新自助免费申请Office365教育版，免费5TOneDrive云盘详细图文教程

MacBook怎么绕过BootCamp安装Win10双系统？

国内知名的前端博客

域名为什么会被墙？如何检测域名是否被墙？域名被墙如何处理？

最新的windows xp sp3产品密匙 xp sp3序列号 xp sp3激活码

js实现简单五子棋游戏源码

更多文章

评论

发表回复 取消回复

站内搜索

标签云

热门文章

友情链接

发表回复取消回复