使用 HTML、CSS 和 JS 制作一个中国象棋

• ?? 个人网站:【 海拥】【摸鱼小游戏】
• ?? 风趣幽默的前端学习课程：??28个案例趣学前端
• ?? 想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】
• ?? 免费且实用的计算机相关知识题库：??进来逛逛

给大家安利一个免费且实用的前端刷题（面经大全）网站，??点击跳转到网站。

本文章为系列文章，共100个摸鱼小游戏。初学者可以尝试实现这些项目，并在HTML、CSS、JS编译环境中动手操作。所有项目都已收集在专栏：

??【100个摸鱼小游戏】（源码永久免费开源）

直接跳到末尾 参与评论送书
直接跳到末尾 领取完整源码
快速跳转 如何高效学习

---

目前已上线的小游戏有60+个

游戏入口地址有多个：

• 摸鱼入口：https://haiyong.site/moyu/
• 海拥开发文档：https://haiyong.site/doc/
• GitHub 源码：https://github.com/wanghao221/moyu

---

HTML 实现仿 Windows 桌面主题特效

• • ? 项目基本结构
  • • ?? HTML 代码
    • ?? CSS 代码
    • ?? JS 代码
    • • 人工智能初始化
      • 迭代加深搜索算法
      • 取得棋盘上所有棋子
      • 取得棋谱所有己方棋子的算法
      • A:当前棋手value/B:对手value/depth：层级
      • 奖着法记录到历史表
      • 评估棋局 取得棋盘双方棋子价值差
  • ?? 如何让学习不再盲目
  • ?? 参与评论送书
  • ?? 完整源码下载?

在线演示地址：https://haiyong.site/moyu/xiangqi/

源码可在文末免费获取

项目基本结构

目录结构如下：

├── js
│   ├── AI.js
│   ├── bill.js
│   ├── common.js
│   ├── gambit.all.js
│   ├── gambit.js
│   ├── play.js
│   └── store.js
├── img
│   ├── stype_1
│   └── stype_2
├── css
│   └── zzsc.css
└── index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14

?? HTML 代码

HTML 主要代码：

	

		对不起，您的浏览器不支持HTML5，请升级浏览器至IE9、firefox或者谷歌浏览器！
		
		
		
		
		

			

				
				
                

				
				
				
				
			
		
	
	

		
		
		

		
	
	
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

?? CSS 代码

CSS主要代码：

@charset "gb2312";
body {
	font-size: 12px;
	line-height: 150%;
}
.box {
	margin:0 auto;
	width:460px;
	position: relative;
}
.chess_left {
	float:left;
	text-align:center
}
.chess_right {
	float:left;
	display:none
}
.move_info {
	float:left;
	margin-top:20px
}
.bill_box {
	height: 320px;
	width: 80px;
	overflow:auto;
}
.bill_box li {
	cursor:pointer;
	text-align:left
}
.bill_box li:hover {
	cursor:pointer;
	background: #C6A577;
}
.bill_box li:active {
	cursor:pointer;
	background: #fff;
}
#billList {
	margin-top:20px
}
.bn_box {
	display:none
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

?? JS 代码

JS代码较多这里只展示部分JS代码，完整源码可在文末获取

人工智能初始化

AI.init = function(pace){
	var bill = AI.historyBill || com.gambit; //开局库
	if (bill.length){
		var len=pace.length;
		var arr=[];
		//先搜索棋谱
		for (var i=0;i< bill.length;i++){
			if (bill[i].slice(0,len)==pace) {
			arr.push(bill[i]);
			}
		}
		if (arr.length){
			var inx=Math.floor( Math.random() * arr.length );
			AI.historyBill = arr ;
			return arr[inx].slice(len,len+4).split("");
		}else{
			AI.historyBill = [] ;
		}
		
	}
	 //如果棋谱里面没有，人工智能开始运作
	var initTime = new Date().getTime();
	AI.treeDepth=play.depth;
	//AI.treeDepth=4;
	
	AI.number=0;
	AI.setHistoryTable.lenght = 0

	var val=AI.getAlphaBeta(-99999 ,99999, AI.treeDepth, com.arr2Clone(play.map),play.my);
	//var val = AI.iterativeSearch(com.arr2Clone(play.map),play.my)
	if (!val||val.value==-8888) {
		AI.treeDepth=2;
		val=AI.getAlphaBeta(-99999 ,99999, AI.treeDepth, com.arr2Clone(play.map),play.my);
	}
	//var val = AI.iterativeSearch(com.arr2Clone(play.map),play.my);
	if (val&&val.value!=-8888) {
		var man = play.mans[val.key];
		var nowTime= new Date().getTime();
		com.get("moveInfo").innerHTML='
AI搜索结果：
最佳着法：'+
										com.createMove(com.arr2Clone(play.map),man.x,man.y,val.x,val.y)+
										'
搜索深度：'+AI.treeDepth+'
搜索分支：'+
										AI.number+'个 
最佳着法评估：'+
										val.value+'分'+
										' 
搜索用时：'+
										(nowTime-initTime)+'毫秒'
		return [man.x,man.y,val.x,val.y]
	}else {
		return false;	
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

迭代加深搜索算法

AI.iterativeSearch = function (map, my){
	var timeOut=100;
	var initDepth = 1;
	var maxDepth = 8;
	AI.treeDepth=0;
	var initTime = new Date().getTime();
	var val = {};
	for (var i=initDepth; i<=maxDepth; i++){
		var nowTime= new Date().getTime();
		AI.treeDepth=i;
		AI.aotuDepth=i;
		var val = AI.getAlphaBeta(-99999, 99999, AI.treeDepth , map ,my)
		if (nowTime-initTime > timeOut){
			return val;
		}
	}
	return false;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

取得棋盘上所有棋子

AI.getMapAllMan = function (map, my){
	var mans=[];
	for (var i=0; i

AI.getMoves = function (map, my){
	var manArr = AI.getMapAllMan (map, my);
	var moves = [];
	var foul=play.isFoul;
	for (var i=0; i