H5 canvas制作中国象棋

H5 canvas制作中国象棋，帅，将，相，车，马，炮，兵，卒，楚河象棋游戏源代码下载。

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

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

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

H5 canvas制作中国象棋部分JS

const canvas = document.getElementById("myCanvas");
			//var canvas = $("#myCanvas");
			const ctx = canvas.getContext("2d");
			//线条的颜色
			ctx.strokeStyle="#000";
			//线条的宽度像素
			ctx.lineWidth=1;
			
			const space = 60;//棋盘边界与画布边界的间距
			const row_cell_num = 8;//每行格子数
			const col_cell_num = 4;//每一方各有几行
			const total_row = 10;//总行数
			const total_col = 9;//总列数
			const width = $("#container2").width() - space * 2; // 棋盘的宽度
			const height = $("#container2").height() - space * 2; // 棋盘的高度
			const cell_width = width / row_cell_num; // 每个格子的宽度
			const cell_height = height / (total_row-1); // 每个格子的高度
			const chess_size = cell_width / 2 - 2; //棋子的直径
			
			var game_status = 1;
			var qi = "red";
			var chess = new Array();
			var step=0;//存储下棋步骤
			var has_chess = false;
			var is_win = false;
			
			var chessAndPos = {'x':-1,'y':-1,'color':qi};
			
			//定义红棋数组
			var red_chess = [
				{'x':0,'y':0,'color':'red','chess_type':'che','img':'./images/hongche.png','live_status':'live'},
				{'x':1,'y':0,'color':'red','chess_type':'ma','img':'./images/hongma.png','live_status':'live'},
				{'x':2,'y':0,'color':'red','chess_type':'xiang','img':'./images/hongxiang.png','live_status':'live'},
				{'x':3,'y':0,'color':'red','chess_type':'shi','img':'./images/hongshi.png','live_status':'live'},
				{'x':4,'y':0,'color':'red','chess_type':'boss','img':'./images/hongboss.png','live_status':'live'},
				{'x':5,'y':0,'color':'red','chess_type':'shi','img':'./images/hongshi.png','live_status':'live'},
				{'x':6,'y':0,'color':'red','chess_type':'xiang','img':'./images/hongxiang.png','live_status':'live'},
				{'x':7,'y':0,'color':'red','chess_type':'ma','img':'./images/hongma.png','live_status':'live'},
				{'x':8,'y':0,'color':'red','chess_type':'che','img':'./images/hongche.png','live_status':'live'},
				//炮
				{'x':1,'y':2,'color':'red','chess_type':'pao','img':'./images/hongpao.png','live_status':'live'},
				{'x':7,'y':2,'color':'red','chess_type':'pao','img':'./images/hongpao.png','live_status':'live'},
				//士兵
				{'x':0,'y':3,'color':'red','chess_type':'soldier','img':'./images/hongbin.png','live_status':'live'},
				{'x':2,'y':3,'color':'red','chess_type':'soldier','img':'./images/hongbin.png','live_status':'live'},
				{'x':4,'y':3,'color':'red','chess_type':'soldier','img':'./images/hongbin.png','live_status':'live'},
				{'x':6,'y':3,'color':'red','chess_type':'soldier','img':'./images/hongbin.png','live_status':'live'},
				{'x':8,'y':3,'color':'red','chess_type':'soldier','img':'./images/hongbin.png','live_status':'live'}
				
			];
			//黑棋
			var black_chess = [
				{'x':0,'y':9,'color':'black','chess_type':'che','img':'./images/heiche.png','live_status':'live'},
				{'x':1,'y':9,'color':'black','chess_type':'ma','img':'./images/heima.png','live_status':'live'},
				{'x':2,'y':9,'color':'black','chess_type':'xiang','img':'./images/heixiang.png','live_status':'live'},
				{'x':3,'y':9,'color':'black','chess_type':'shi','img':'./images/heishi.png','live_status':'live'},
				{'x':4,'y':9,'color':'black','chess_type':'boss','img':'./images/heiboss.png','live_status':'live'},
				{'x':5,'y':9,'color':'black','chess_type':'shi','img':'./images/heishi.png','live_status':'live'},
				{'x':6,'y':9,'color':'black','chess_type':'xiang','img':'./images/heixiang.png','live_status':'live'},
				{'x':7,'y':9,'color':'black','chess_type':'ma','img':'./images/heima.png','live_status':'live'},
				{'x':8,'y':9,'color':'black','chess_type':'che','img':'./images/heiche.png','live_status':'live'},
				//炮
				{'x':1,'y':7,'color':'black','chess_type':'pao','img':'./images/heipao.png','live_status':'live'},
				{'x':7,'y':7,'color':'black','chess_type':'pao','img':'./images/heipao.png','live_status':'live'},
				//士兵
				{'x':0,'y':6,'color':'black','chess_type':'soldier','img':'./images/heibing.png','live_status':'live'},
				{'x':2,'y':6,'color':'black','chess_type':'soldier','img':'./images/heibing.png','live_status':'live'},
				{'x':4,'y':6,'color':'black','chess_type':'soldier','img':'./images/heibing.png','live_status':'live'},
				{'x':6,'y':6,'color':'black','chess_type':'soldier','img':'./images/heibing.png','live_status':'live'},
				{'x':8,'y':6,'color':'black','chess_type':'soldier','img':'./images/heibing.png','live_status':'live'}
			];
			
			//初始化棋子数组
			for(let i=0;i<total_row;i++){
				chess.push([]);
				for(let j=0;j<total_col;j++){
					chess[i].push(0);
				}
			}
			
			//console.log(red_chess);
			//将红棋存入棋盘
			red_chess.forEach(item=>{
				chess[item.y][item.x] = item;
			});
			
			//将黑棋存入棋盘
			black_chess.forEach(item=>{
				chess[item.y][item.x] = item;
			});