html5的canvas实现中国象棋

html5的canvas实现中国象棋

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

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

标签，右下角是两个按钮。

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

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

注意几点：

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

所以整个的代码如下：

	
		
		
		
	

	

		

			

				
				Your browser does not support the HTML5 canvas tag.
				
			
			

			

		
		

			刷新
			悔棋
			
选中了啥

		

		

	

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

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