html5的canvas实现中国象棋

已于 2023-06-14 16:04:03 修改
阅读量1.9k 收藏 15
点赞数 7
分类专栏： HTMLCSSJavaScript 文章标签： html javascript canvas css
于 2021-05-20 00:48:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48447283/article/details/117049554
版权

html5的canvas实现中国象棋

最近有了一个写中国象棋程序的想法，就根据canvas实现了一下。下面是最终效果：

 首先，分析页面布局。主要的是有一个显示图像的区域，左下角是显示当前选中的棋子的<p>标签，右下角是两个按钮。

对于图像区域的布局，首先为了让棋子的移动，红圈的移动，和棋盘之间不会互相影响。那我们就要创建三个图层，也就是用三个<canvas>根据相对布局放在同一个位置。

在css设定z-index的值来确定图层的上下。棋盘图层应该放到最下面，棋子图层由于要对点击事件进行相应，于是放在最上层。其余就是JavaScript功能的实现。

注意几点：

  1. 棋子的图片应该是一个透明背景图，这样呈现的效果才会真实（为了更加真实，棋子图片是我的3D渲染图）；
  2. 在网页刚打开时会调用init()方法，但是图片可能会没有加载出来，会造成棋盘上棋子显示不全的情况。这时只需刷新几次网页就好了。
  3. 在之后的棋子移动过程中可能也会有棋子显示不出来的情况（但是，目前还没有遇到），如果遇到这种情况就需要点击“刷新”按钮。
  4. 悔棋目前不支持多步，只能悔棋一步。若想改成多步，可能需要用几个数组来存储棋子走过的位置等一些信息。
  5. 没有写对于胜利的判断，因为我觉得象棋的胜利已经很明显了。若想要添加，可以写一个win()方法，在每一次Remove()方法调用后都判断一次。

所以整个的代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>中国象棋</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			#id1 {
				position: relative;
			}
			
			#canvasp {
				position: absolute;
				top: 0px;
				left: 0px;
				z-index: 2;
			}
			
			#btn1 {
				position: absolute;
				width: 50px;
				height: 30px;
				left: 450px;
			}
			
			#btn3 {
				position: absolute;
				width: 50px;
				height: 30px;
				left: 380px;
			}
			
			#id3 {
				position: absolute;
				top: 0px;
				left: 0px;
				z-index: 1;
			}
		</style>
	</head>

	<body>

		<div id="id1">
			<div id="canvasp">
				<canvas id="myCanvas" width="500" height="470" style="border:1px solid #d3d3d3;" onmousedown="show_coords(event)">
				Your browser does not support the HTML5 canvas tag.
				</canvas>
			</div>
			<div id="id2"><canvas id="canvas" width="500" height="470"></canvas></div>
			<div id="id3"><canvas id="canvas3" width="500" height="470"></canvas></div>
		</div>
		<div id="id2">
			<button id="btn1">刷新</button>
			<button id="btn3">悔棋</button>
			<p id="checkedItem">选中了啥</p>

		</div>

		<script>
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			//图片
			var c2 = document.getElementById("canvas");
			var canvas = c2.getContext("2d");
			//提示方框
			var c3 = document.getElementById("canvas3");
			var canvas3 = c3.getContext("2d");
			//选中
			var checkedItem = document.getElementById("checkedItem");

			var img = new Image();
			img.src = "img/chess/象棋棋盘2.png";
			img.onload = imgfn; //图片加载完在执行

			var img2 = new Image();
			var qizi = ["红車", "红马", "红相", "红仕", "红帅",
				"红炮", "红兵", "黑車", "黑马", "黑象", "黑士",
				"黑将", "黑炮", "黑卒"
			]

			init();

			function changImgPath(size) {
				var imgapath = "img/chess/象棋" + qizi[size] + ".gif";
				img2.src = imgapath;
			}

			function imgfn() {
				canvas.drawImage(img, 0, 0, 500, 480)
			}

			function imgfn2(x, y) {
				ctx.drawImage(img2, x, y, 50, 50)
			}

			function imgfn3(x, y) {
				canvas3.drawImage(img, x, y, 70, 70)
			}

			var pre_x = 0;
			var pre_y = 0;
			var victory = false;
			var Pre_isChecked = false;
			var Pre_checkedItem = 0;
			var Now_checkedItem = -2; //默认选择空
			var Now_team = true; //true表示黑方
			var Pre_team = true; //true表示黑方
			var Red_runed = false; //红方走过了没有
			var Black_runed = false; //黑方走过了没有
			var qizi_remember = -2; //默认为没有
			var Remove_successed = false; //上一步走了没
			var pre_pre_index = [0, 0]; //记录悔棋

			var index = new Array(
				[7, 8, 9, 10, 11, 10, 9, 8, 7], 
				[-2, -2, -2, -2, -2, -2, -2, -2, -2], 
				[-2, 12, -2, -2, -2, -2, -2, 12, -2], 
				[13, -2, 13, -2, 13, -2, 13, -2, 13], 
				[-2, -2, -2, -2, -2, -2, -2, -2, -2], 
				[-2, -2, -2, -2, -2, -2, -2, -2, -2], 
				[6, -2, 6, -2, 6, -2, 6, -2, 6], 
				[-2, 5, -2, -2, -2, -2, -2, 5, -2], 
				[-2, -2, -2, -2, -2, -2, -2, -2, -2], 
				[0, 1, 2, 3, 4, 3, 2, 1, 0]
			)

			function repeat(x, y) {
				return index[y][x] >= 0;
			}

			function show_coords(event) {
				if(victory == false) {

					x = event.clientX
					y = event.clientY
					var qp_x = Math.round((x - 25) / 55);
					var qp_y = Math.round((y - 25) / 48);
					Now_checkedItem = index[qp_y][qp_x];
					Now_team = Now_checkedItem > 6;
					changImgPath(Pre_checkedItem)
					if(Pre_isChecked && (Now_team != Pre_team || Now_checkedItem == -2)) {
						//							alert(Now_team+"xxx"+Pre_team)
						pre_pre_index[0] = pre_x;
						pre_pre_index[1] = pre_y;
						Remove(qp_x, qp_y, Pre_checkedItem, Now_checkedItem);
					}

					canvas3.clearRect(0, 0, 500, 500);

					pre_x = qp_x;
					pre_y = qp_y;

					x = qp_x * 50 + 25;
					y = qp_y * 46 + 9;

					canvas3.strokeStyle = 'red';
					canvas3.font = "50px Georgia";
					canvas3.strokeText("⚪", x - 7, y + 42);
					checkedItem.innerHTML = qizi[index[qp_y][qp_x]]
					Pre_isChecked = repeat(qp_x, qp_y)
					Pre_checkedItem = index[qp_y][qp_x];
					Pre_team = Pre_checkedItem > 6;
				} else {
					alert("请重新开局。");
				}

			}
			var btn1 = document.getElementById('btn1');
			var btn3 = document.getElementById("btn3");

			function clear(x, y) {
				x = x * 50 + 25;
				y = y * 46 + 9;
				ctx.clearRect(x, y + 3, 50, 47);
			}

			btn1.onclick = function() {
				imgfn2(pre_x * 50 + 25, pre_y * 46 + 9)
			}
			btn3.onclick = function() {
				if(!Remove_successed)
					return
				x = pre_pre_index[0];
				y = pre_pre_index[1];
				clear(pre_x, pre_y);
				imgfn2(x * 50 + 25, y * 46 + 9);
				if(qizi_remember != -2) {
					changImgPath(qizi_remember);
					setTimeout("imgfn2(" + pre_x + "*50+25," + pre_y + "*46+9)", 30)
				}
				index[pre_y][pre_x] = qizi_remember;
				index[y][x] = Pre_checkedItem;
				Pre_checkedItem = -2;
				if(Red_runed) {
					Red_runed = false;
					Black_runed = true;
					//					alert("调用了"+Red_runed)
				} else if(Black_runed) {
					Black_runed = false;
					Red_runed = true;
				}
			}

			function Remove(x, y, Pre_checkedItem, Now_checkedItem) {
				if(Red_runed) {
					if(Pre_checkedItem <= 6) {
						Remove_successed = false;
						return;
					}

				}
				if(Black_runed) {
					if(Pre_checkedItem > 6) {
						Remove_successed = false;
						return;
					}

				}

				if(!rule(x, y, Pre_checkedItem)) {
					Remove_successed = false;
					return;
				}
				Remove_successed = true;
				clear(pre_x, pre_y);
				if(Now_checkedItem != -2) {
					clear(x, y);
				}

				imgfn2(x * 50 + 25, y * 46 + 9)

				setTimeout("imgfn2(" + x + "*50+25," + y + "*46+9)", 15)

				qizi_remember = index[y][x]; //记录被吃掉的棋子或空白
				index[pre_y][pre_x] = -2;
				index[y][x] = Pre_checkedItem;

				if(Pre_checkedItem > 6) {
					Black_runed = true;
					Red_runed = false;
				}
				if(Pre_checkedItem <= 6) {
					Red_runed = true;
					Black_runed = false;
				}
			}

			function rule(x, y, Pre_checkedItem) {
				switch(Pre_checkedItem) {
					case 0:
					case 7:
						if(x == pre_x || y == pre_y) {
							if(x == pre_x) {
								var max_y = (y > pre_y) ? y : pre_y;
								var min_y = (y > pre_y) ? pre_y : y;
								for(var i = min_y + 1; i < max_y; i++) {
									if(index[i][x] != -2) {
										return false;
									}
								}
							}
							if(y == pre_y) {
								var max_x = (x > pre_x) ? x : pre_x;
								var min_x = (x > pre_x) ? pre_x : x;
								for(var i = min_x + 1; i < max_x; i++) {
									if(index[y][i] != -2) {
										return false;
									}
								}
							}
							return true;
						} else {
							return false;
						}
						break;
					case 1:
					case 8:
						if((Math.abs(x - pre_x) == 1 && Math.abs(y - pre_y) == 2) ||
							(Math.abs(x - pre_x) == 2 && Math.abs(y - pre_y) == 1)) {

							if((y - pre_y == 2 && index[pre_y + 1][pre_x] != -2) ||
								(y - pre_y == -2 && index[pre_y - 1][pre_x] != -2) ||
								(x - pre_x == 2 && index[pre_y][pre_x + 1] != -2) ||
								(x - pre_x == -2 && index[pre_y][pre_x - 1] != -2)) {
								return false;
							}
							return true;
						} else {
							return false;
						}
					case 2:
					case 9:
						if((Math.abs(x - pre_x) == 2 && Math.abs(y - pre_y) == 2)) {
							if((Pre_checkedItem > 6 && y <= 4) || (Pre_checkedItem <= 6 && y > 4)) {

								if((y > pre_y && x > pre_x && index[pre_y + 1][pre_x + 1] != -2) ||
									(y < pre_y && x > pre_x && index[pre_y - 1][pre_x + 1] != -2) ||
									(y > pre_y && x < pre_x && index[pre_y + 1][pre_x - 1] != -2) ||
									(y < pre_y && x < pre_x && index[pre_y - 1][pre_x - 1] != -2)) {
									return false;
								}
								return true;
							}
							return false;
						} else {
							return false;
						}
					case 3:
					case 10:
						if((Math.abs(x - pre_x) == 1 && Math.abs(y - pre_y) == 1)) {
							if((x >= 3 && x <= 5) && (y < 3 || y > 6)) {
								return true;
							}
							return false;
						} else {
							return false;
						}
					case 4:
					case 11:
						if((Math.abs(x - pre_x) == 1 && y == pre_y) ||
							(Math.abs(y - pre_y) == 1 && x == pre_x)) {
							if((x >= 3 && x <= 5) && (y < 3 || y > 6)) {
								return true;
							}
							return false;
						} else {
							return false;
						}
					case 5:
					case 12:
						if((x == pre_x || y == pre_y)) {
							var count2 = 0;
							if(x == pre_x) {
								var max_y = (y > pre_y) ? y : pre_y;
								var min_y = (y > pre_y) ? pre_y : y;
								for(var i = min_y + 1; i < max_y; i++) {
									if(index[i][x] != -2) {
										count2++;
										if(count2 > 1)
											return false;
									}
								}
							}
							if(y == pre_y) {
								var max_x = (x > pre_x) ? x : pre_x;
								var min_x = (x > pre_x) ? pre_x : x;
								for(var i = min_x + 1; i < max_x; i++) {
									if(index[y][i] != -2) {
										count2++;
										if(count2 > 1)
											return false;
									}
								}
							}
							if((count2 == 0 && Now_checkedItem == -2) ||
								(count2 == 1 && Now_checkedItem >= 0)) {
								return true;
							} else {
								return false;
							}
							return true;
						} else {
							return false;
						}
						break;
					case 6:
					case 13:
						var passRaiver = false;
						if(Pre_checkedItem > 6) { //黑色棋子
							passRaiver = pre_y > 4
							if(passRaiver) {
								if((Math.abs(x - pre_x) == 1 && y == pre_y) ||
									(Math.abs(y - pre_y) == 1 && x == pre_x)) {
									if(y - pre_y < 0) {
										return false;
									}
									return true;
								} else {
									return false;
								}
							} else {
								if(y - pre_y == 1 && x == pre_x) {
									return true;
								} else {
									return false;
								}
							}
							return true;
						} else {
							passRaiver = pre_y < 5
							if(passRaiver) {
								if((Math.abs(x - pre_x) == 1 && y == pre_y) ||
									(Math.abs(y - pre_y) == 1 && x == pre_x)) {
									if(y - pre_y > 0) {
										return false;
									}
									return true;
								} else {
									return false;
								}
							} else {
								if(y - pre_y == -1 && x == pre_x) {
									return true;
								} else {
									return false;
								}
							}
							return false;
						}

					default:
						alert("default了");
						return true;
						break;
				}
			}

			function init() {
				changImgPath(0)
				setTimeout("imgfn2(0*50+25,9*46+9)", 30)
				setTimeout("imgfn2(8*50+25,9*46+9)", 30)

				setTimeout("changImgPath(1)", 50)
				setTimeout("imgfn2(1*50+25,9*46+9)", 70)
				setTimeout("imgfn2(7*50+25,9*46+9)", 70)

				setTimeout("changImgPath(2)", 90)
				setTimeout("imgfn2(2*50+25,9*46+9)", 110)
				setTimeout("imgfn2(6*50+25,9*46+9)", 110)

				setTimeout("changImgPath(3)", 130)
				setTimeout("imgfn2(3*50+25,9*46+9)", 150)
				setTimeout("imgfn2(5*50+25,9*46+9)", 150)

				setTimeout("changImgPath(4)", 170)
				setTimeout("imgfn2(4*50+25,9*46+9)", 190)

				setTimeout("changImgPath(5)", 210)
				setTimeout("imgfn2(1*50+25,7*46+9)", 230)
				setTimeout("imgfn2(7*50+25,7*46+9)", 230)

				setTimeout("changImgPath(6)", 250)
				setTimeout("imgfn2(0*50+25,6*46+9)", 270)
				setTimeout("imgfn2(2*50+25,6*46+9)", 270)
				setTimeout("imgfn2(4*50+25,6*46+9)", 270)
				setTimeout("imgfn2(6*50+25,6*46+9)", 270)
				setTimeout("imgfn2(8*50+25,6*46+9)", 270)

				setTimeout("changImgPath(13)", 290)
				setTimeout("imgfn2(0*50+25,3*46+9)", 310)
				setTimeout("imgfn2(2*50+25,3*46+9)", 310)
				setTimeout("imgfn2(4*50+25,3*46+9)", 310)
				setTimeout("imgfn2(6*50+25,3*46+9)", 320)
				setTimeout("imgfn2(8*50+25,3*46+9)", 320)

				setTimeout("changImgPath(12)", 330)
				setTimeout("imgfn2(1*50+25,2*46+9)", 350)
				setTimeout("imgfn2(7*50+25,2*46+9)", 350)

				setTimeout("changImgPath(11)", 370)
				setTimeout("imgfn2(4*50+25,0*46+9)", 390)

				setTimeout("changImgPath(10)", 410)
				setTimeout("imgfn2(3*50+25,0*46+9)", 430)
				setTimeout("imgfn2(5*50+25,0*46+9)", 430)

				setTimeout("changImgPath(9)", 450)
				setTimeout("imgfn2(2*50+25,0*46+9)", 470)
				setTimeout("imgfn2(6*50+25,0*46+9)", 470)

				setTimeout("changImgPath(8)", 490)
				setTimeout("imgfn2(1*50+25,0*46+9)", 510)
				setTimeout("imgfn2(7*50+25,0*46+9)", 510)

				setTimeout("changImgPath(7)", 530)
				setTimeout("imgfn2(0*50+25,0*46+9)", 550)
				setTimeout("imgfn2(8*50+25,0*46+9)", 550)
			}
		</script>

	</body>

</html>

棋子图片和棋盘的图片已经上传到了我的百度网盘上了，链接如下：

链接：https://pan.baidu.com/s/1HwurAERgQiBt82WlH7L4IA 
提取码：bddb 
复制这段内容后打开百度网盘手机App，操作更方便哦

====================================================

2023年6月14日更新：

已更新链接；已将链接时长改为永久。

链接：https://pan.baidu.com/s/1EqKFkUxbvMhH5f4hYpwakw 
提取码：wng6

时听葵因
关注
  • 7
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
canvas绘制中国象棋
PPaio的博客
08-27 463
const draw = (id) => { let pieces = [ //黑 { x: 0, y: 0, name: "車", type: "black" }, { x: 1, y: 0, name: "馬", type: "black" }, { x: 2, y: 0, name: "象", type: "black" }, { x: 3, y: 0, name: "仕", type: "black".
canvas实现中国象棋（未判断绝杀）
weixin_51364599的博客
12-07 1万+
中国象棋 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1 i
canvas 实现中国象棋
08-31
本文主要介绍了canvas 实现中国象棋的方法。具有很好的参考价值，下面跟着小编一起来看下吧
使用canvas画象棋界面
qq_56523345的博客
05-20 325
【代码】使用canvas画象棋界面。
h5使用canvas模拟制作的中国象棋实现残局走子
dreamimport的博客
02-23 983
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Access-Control-Allow-Origin" content="*"> <title>中国象棋</title> <style> html,body{ width: 100%; height: 100%; padding: 0;
canvas绘制中国象棋棋盘
冰凌的博客
02-14 901
棋盘 board.html <!doctype html> <html> <head> <meta charset="gb2312"/> </head> <body> <div class="board"> <canvas id="board" width="450px" height=...
html画布创建黑白象棋棋盘,canvas应用——中国象棋棋盘
weixin_29775447的博客
06-15 563
CANVAS应用-中国象棋body{margin: 0;padding: 0;}#div1{width:620px;height:620px;margin: 0 auto;margin-top: 50px;border: 2px solid #f00;}#div2{width:605px;height:120px;margin:0 auto;margin-top:10px;border: 2px ...
使用 HTML、CSS 和 JS 制作一个中国象棋
热门推荐
努力是为了站在万人之中，成为别人的光
07-24 2万+
给大家安利一个免费且实用的前端刷题（面经大全）网站，👉点击跳转到网站。本文章为系列文章，共100个摸鱼小游戏。初学者可以尝试实现这些项目，并在HTML、CSS、JS编译环境中动手操作。所有项目都已收集在专栏：🌟【100个摸鱼小游戏】（源码永久免费开源）直接跳到末尾 参与评论送书 直接跳到末尾 领取完整源码 快速跳转 如何高效学习目前已上线的小游戏有90+个游戏入口地址有多个：在线演示地址：https://haiyong.site/moyu/xiangqi/源码可在文末免费获取目录结构如下：
html制作象棋教程入门教程,canvas 纯js 绘制中国象棋棋盘
weixin_39698217的博客
06-07 618
chess();functionchess(){let canvas= document.getElementById("chess");let chess= canvas.getContext("2d");let width=chess.canvas.width;let height=chess.canvas.height;//单边长let sidelen = 24;//左侧长度 = 竖直方向l...
基于HTML5实现的中国象棋游戏
weixin_34342905的博客
02-06 1306
棋类游戏在桌面游戏中已经非常成熟，中国象棋的版本也非常多。今天这款基于HTML5技术的中国象棋游戏非常有特色，我们不仅可以选择中国象棋的游戏难度，而且可以切换棋盘的样式。程序写累了，喝上一杯咖啡，和电脑对弈几把吧，相信这HTML5中国象棋游戏的实现算法你比较清楚，可以打开源码来研究一下这款HTML5中国象棋游戏。 在线预览   源码下载 实现的代码。 html代码： &lt...
html5的canvas中国象棋.zip
05-19
利用html5的canvas实现中国象棋，棋子和棋盘资源都在文件中。具有棋子的逻辑，玩家可以操作，没有写最终的胜负判断，但是胜负可以有玩家自己看到（自己判断有没有将军）。可以悔棋一步。棋子的移动具有约束条件。
HTML5 Canvas中国象棋、国际象棋游戏代码
02-27
HTML5 Canvas中国象棋、国际象棋游戏代码 象棋游戏、中国象棋、Canvas、HTML5 代码简介：HTML5 Canvas中国象棋游戏代码是一款中国象棋，帅，将，相，车，马，炮，兵，卒，楚河象棋游戏源代码，象棋对战，判断输赢。
基于html5 canvas的中国象棋游戏.zip
02-13
在这个基于HTML5 Canvas的中国象棋游戏中，开发者利用Canvas API来实现棋盘的绘制、棋子的动态移动以及游戏逻辑的处理。 1. **Canvas API基础** - Canvas是一个可编程的画布，允许开发者通过JavaScript代码来绘制...
【JavaScript游戏开发】使用HTML5 canvas开发的网页版中国象棋项目
小牛itbull的博客
08-21 1438
//V1.0 : 实现棋子的布局，画布及游戏场景的初始化 //V2.0 : 实现棋子的颜色改变 //V3.0 ：实现所有象棋的走棋规则 //V4.0 : 实现所有棋子的吃子功能 完整的项目源码已经开源：https://github.com/xiugangzhang/ChineseChess 项目在线预览地址： http://htmlpreview.github.io/?https://gi...
iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部
最新发布
汤一飞
07-25 1125
iframe 预览邮件 + 打印邮件 + 模拟滚动条
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 1012
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
HTML常见标签——超链接a标签
weixin_64294248的博客
07-23 680
a>标签用于做跳转、导航，是双标签，记作，它是行内标签，不可以直接设置宽度高度，特殊的是，作为行内标签，它可以嵌套文本、行内元素、块级元素。
前端开发知识(一)-html
modi000的博客
07-24 579
2.前端开发的三剑客：html、css、javascript。Element（饿了么开发的） ：前端组件库。Vue可以简化JavaScpript流程。Ngix：前端服务器。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值