中国象棋 - 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