中国象棋 - in html5是一款使用html5 canvas开发的开源小游戏，不依赖任何类库，不依赖任何后台程序，全部原生Javascript进行AI计算，欢迎广大业内同行多多交流指正，共同完善。
特点：
- 全部使用Javascript完成AI人工智能计算，不依赖任何后台程序
- 不依赖任何类库，全部原生Javascript，使用html5 canvas.
- 实现中不涉及任何浏览器特性，所以不存在浏览器兼容性问题.
- 代码结构极其简洁明了，你可以轻易的阅读，修改成自己版本.
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>中国象棋 1.5 倍版</title><meta name="viewport" content="width=device-width; initial-scale=1.0" /><link href="css/chess.css" rel="stylesheet" type="text/css"></head><body><div id="chessBox" class="chess_box"> <canvas id="chess"></canvas> <!-- 左侧按钮组（垂直排列） --> <div class="left-buttons"> <button class="side-btn" id="indexDy">人机对弈</button> <button class="side-btn" id="indexQj">挑战棋局</button> </div> <!-- 右侧按钮组（垂直排列） --> <div class="right-buttons"> <button class="side-btn" id="restartBtn">重新开始</button> <button class="side-btn" id="regretBtn">悔棋</button> </div> <!-- 音频元素 --> <audio src="audio/click.wav" id="clickAudio" preload="auto"></audio> <audio src="audio/select.wav" id="selectAudio" preload="auto"></audio></div><!-- 弹出菜单 - 人机对弈选项 --><div id="dyPopup" class="popup-menu"> <div class="close-btn" id="closeDy"></div> <div class="menu-info"> <label><input name="depth" type="radio" value="2"> 菜鸟水平</label> <label><input name="depth" type="radio" value="3" checked> 中级水平</label> <label><input name="depth" type="radio" value="4"> 高手水平</label> </div> <div class="menu-btn" id="playBtn">开始对弈</div></div><!-- 弹出菜单 - 挑战棋局选项 --><div id="qjPopup" class="popup-menu"> <div class="close-btn" id="closeQj"></div> <div class="menu-info"> <label><input name="clasli" type="radio" value="0" checked> 八卦阵法</label> <label><input name="clasli" type="radio" value="1"> 很二棋局</label> <label><input name="clasli" type="radio" value="2"> 七星会阵</label> </div> <div class="menu-btn" id="clasliBtn">开始挑战</div></div><script type="text/javascript" src="js/common.js"></script><script type="text/javascript" src="js/play.js"></script><script type="text/javascript" src="js/AI.js"></script><script type="text/javascript" src="js/gambit.js"></script><script type="text/javascript" src="js/clasli.js"></script><script>// 确保所有按钮正常工作(function() { // 等待所有脚本加载完成 window.addEventListener('load', function() { console.log('页面加载完成，初始化按钮...'); // 获取元素 var chessBox = document.getElementById('chessBox'); var dyPopup = document.getElementById('dyPopup'); var qjPopup = document.getElementById('qjPopup'); // 默认直接开始人机对弈（中级） setTimeout(function() { if (typeof play !== 'undefined' && play.init) { play.isPlay = true; play.init(3); chessBox.style.display = 'block'; } }, 500); // 人机对弈按钮 document.getElementById('indexDy').onclick = function(e) { e.stopPropagation(); qjPopup.style.display = 'none'; dyPopup.style.display = 'block'; }; // 挑战棋局按钮 document.getElementById('indexQj').onclick = function(e) { e.stopPropagation(); dyPopup.style.display = 'none'; qjPopup.style.display = 'block'; }; // 关闭弹出菜单 document.getElementById('closeDy').onclick = function() { dyPopup.style.display = 'none'; }; document.getElementById('closeQj').onclick = function() { qjPopup.style.display = 'none'; }; // 点击空白处关闭菜单 window.onclick = function(e) { if (!e.target.closest('.popup-menu') && !e.target.closest('#indexDy') && !e.target.closest('#indexQj')) { dyPopup.style.display = 'none'; qjPopup.style.display = 'none'; } }; // 开始对弈按钮 document.getElementById('playBtn').onclick = function() { var depth = 3; var radios = document.getElementsByName('depth'); for (var i = 0; i < radios.length; i++) { if (radios[i].checked) depth = parseInt(radios[i].value, 10); } if (typeof play !== 'undefined' && play.init) { play.isPlay = true; play.init(depth); chessBox.style.display = 'block'; dyPopup.style.display = 'none'; } }; // 开始挑战按钮 document.getElementById('clasliBtn').onclick = function() { var clasli = 0; var radios = document.getElementsByName('clasli'); for (var i = 0; i < radios.length; i++) { if (radios[i].checked) clasli = parseInt(radios[i].value, 10); } if (typeof play !== 'undefined' && play.init && typeof com.clasli !== 'undefined') { play.isPlay = true; play.init(4, com.clasli[clasli].map); chessBox.style.display = 'block'; qjPopup.style.display = 'none'; } }; // 重新开始 document.getElementById('restartBtn').onclick = function() { if (confirm('是否确定要重新开始？')) { if (typeof play !== 'undefined') { play.isPlay = true; play.init(play.depth || 3, play.nowMap); } } }; // 悔棋 document.getElementById('regretBtn').onclick = function() { if (typeof play !== 'undefined' && play.regret) { play.regret(); } }; });})();</script></body></html> |
演示地址：中国象棋 · 完美居中版 源码下载：github.com