
中国象棋 - in html5是一款使用html5 canvas开发的开源小游戏,不依赖任何类库,不依赖任何后台程序,全部原生Javascript进行AI计算,欢迎广大业内同行多多交流指正,共同完善。
特点:
- 全部使用Javascript完成AI人工智能计算,不依赖任何后台程序
- 不依赖任何类库,全部原生Javascript,使用html5 canvas.
- 实现中不涉及任何浏览器特性,所以不存在浏览器兼容性问题.
- 代码结构极其简洁明了,你可以轻易的阅读,修改成自己版本.
| 001002003004005006007008009010011012013014015016017018019020021022023024025026027028029030031032033034035036037038039040041042043044045046047048049050051052053054055056057058059060061062063064065066067068069070071072073074075076077078079080081082083084085086087088089090091092093094095096097098099100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 | <!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>中国象棋 1.5 倍版</title><meta name="viewport" content="width=device-width;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('页面加载完成,初始化按钮...'); // 获取元素 vardocument.getElementById('chessBox'); vardocument.getElementById('dyPopup'); vardocument.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() { var3; vardocument.getElementsByName('depth'); for (var0; 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