基于HTML+JavaScript實(shí)現(xiàn)中國(guó)象棋
更新時(shí)間：2022年08月01日 14:55:07 作者：海擁
這篇文章主要為大家詳細(xì)介紹了如何利用HTML+CSS+JS實(shí)現(xiàn)中國(guó)象棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
效果展示
項(xiàng)目基本結(jié)構(gòu)
目錄結(jié)構(gòu)如下：
HTML 代碼
HTML 主要代碼：
<div class="box" id="box">
<div class="chess_left">
<canvas id="chess">對(duì)不起，您的瀏覽器不支持HTML5，請(qǐng)升級(jí)瀏覽器至IE9、firefox或者谷歌瀏覽器！</canvas>
<audio src="audio/click.wav" id="clickAudio" preload="auto"></audio>
<!--<audio src="audio/check.wav" id="checkAudio" preload="auto"></audio>-->
<audio src="audio/select.wav" id="selectAudio" preload="auto"></audio>
<link rel="stylesheet" type="text/css" rel="external nofollow" >
<div>
<div class="bn_box" id="bnBox">
<input type="button" name="offensivePlay" id="tyroPlay" class="button button-caution button-pill button-jumbo" value="新手水平" />
<input type="button" name="offensivePlay" id="superPlay" class="button button-caution button-pill button-jumbo" value="中級(jí)水平" />
<input type="button" name="button" id="" value="大師水平" class="button button-caution button-pill button-jumbo" disabled /><br>
<!--
<input type="button" name="offensivePlay" id="offensivePlay" value="先手開(kāi)始" />
<input type="button" name="defensivePlay" id="defensivePlay" value="后手開(kāi)始" />
-->
<input type="button" name="regret" id="regretBn" class="button button-raised button-pill button-inverse" value="悔棋" />
<input type="button" name="billBn" id="billBn" value="重新開(kāi)始" class="button button-glow button-rounded button-royal" class="bn_box" />
<input type="button" name="stypeBn" id="stypeBn" class="button button-raised button-primary button-pill" value="放大棋局" />
</div>
</div>
</div>
<div class="chess_right" id="chessRight">
<select name="billList" id="billList">
</select>
<ol id="billBox" class="bill_box">
</ol>
</div>
<div id="moveInfo" class="move_info"> </div>
</div>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
}JS 代碼
JS代碼較多這里只展示部分JS代碼
人工智能初始化
AI.init = function(pace){
var bill = AI.historyBill || com.gambit; //開(kāi)局庫(kù)
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 = [] ;
}
}
//如果棋譜里面沒(méi)有，人工智能開(kāi)始運(yùn)作
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='<h3>AI搜索結(jié)果：</h3>最佳著法：'+
com.createMove(com.arr2Clone(play.map),man.x,man.y,val.x,val.y)+
'<br />搜索深度：'+AI.treeDepth+'<br />搜索分支：'+
AI.number+'個(gè) <br />最佳著法評(píng)估：'+
val.value+'分'+
' <br />搜索用時(shí)：'+
(nowTime-initTime)+'毫秒'
return [man.x,man.y,val.x,val.y]
}else {
return false;
}
}迭代加深搜索算法
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;
}取得棋盤(pán)上所有棋子
AI.getMapAllMan = function (map, my){
var mans=[];
for (var i=0; i<map.length; i++){
for (var n=0; n<map[i].length; n++){
var key = map[i][n];
if (key && play.mans[key].my == my){
play.mans[key].x = n;
play.mans[key].y = i;
mans.push(play.mans[key])
}
}
}
return mans;
}取得棋譜所有己方棋子的算法
AI.getMoves = function (map, my){
var manArr = AI.getMapAllMan (map, my);
var moves = [];
var foul=play.isFoul;
for (var i=0; i<manArr.length; i++){
var man = manArr[i];
var val=man.bl(map);
for (var n=0; n<val.length; n++){
var x=man.x;
var y=man.y;
var newX=val[n][0];
var newY=val[n][1];
//如果不是長(zhǎng)將著法
if (foul[0]!=x || foul[1]!=y || foul[2]!=newX || foul[3]!=newY ){
moves.push([x,y,newX,newY,man.key])
}
}
}
return moves;
}A:當(dāng)前棋手value/B:對(duì)手value/depth：層級(jí)
AI.getAlphaBeta = function (A, B, depth, map ,my) {
//var txtMap= map.join();
//var history=AI.historyTable[txtMap];
// if (history && history.depth >= AI.treeDepth-depth+1){
// return history.value*my;
//}
if (depth == 0) {
return {"value":AI.evaluate(map , my)}; //局面評(píng)價(jià)函數(shù);
}
var moves = AI.getMoves(map , my ); //生成全部走法;
//這里排序以后會(huì)增加效率
for (var i=0; i < moves.length; i++) {
//走這個(gè)走法;
var move= moves[i];
var key = move[4];
var oldX= move[0];
var oldY= move[1];
var newX= move[2];
var newY= move[3];
var clearKey = map[ newY ][ newX ]||"";
map[ newY ][ newX ] = key;
delete map[ oldY ][ oldX ];
play.mans[key].x = newX;
play.mans[key].y = newY;
if (clearKey=="j0"||clearKey=="J0") {//被吃老將,撤消這個(gè)走法;
play.mans[key] .x = oldX;
play.mans[key] .y = oldY;
map[ oldY ][ oldX ] = key;
delete map[ newY ][ newX ];
if (clearKey){
map[ newY ][ newX ] = clearKey;
// play.mans[ clearKey ].isShow = false;
}
return {"key":key,"x":newX,"y":newY,"value":8888};
//return rootKey;
}else {
var val = -AI.getAlphaBeta(-B, -A, depth - 1, map , -my).value;
//val = val || val.value;
//撤消這個(gè)走法;
play.mans[key] .x = oldX;
play.mans[key] .y = oldY;
map[ oldY ][ oldX ] = key;
delete map[ newY ][ newX ];
if (clearKey){
map[ newY ][ newX ] = clearKey;
//play.mans[ clearKey ].isShow = true;
}
if (val >= B) {
//將這個(gè)走法記錄到歷史表中;
//AI.setHistoryTable(txtMap,AI.treeDepth-depth+1,B,my);
return {"key":key,"x":newX,"y":newY,"value":B};
}
if (val > A) {
A = val; //設(shè)置最佳走法;
if (AI.treeDepth == depth) var rootKey={"key":key,"x":newX,"y":newY,"value":A};
}
}
}
//將這個(gè)走法記錄到歷史表中;
//AI.setHistoryTable(txtMap,AI.treeDepth-depth+1,A,my);
if (AI.treeDepth == depth) {//已經(jīng)遞歸回根了
if (!rootKey){
//AI沒(méi)有最佳走法，說(shuō)明AI被將死了，返回false
return false;
}else{
//這個(gè)就是最佳走法;
return rootKey;
}
}
return {"key":key,"x":newX,"y":newY,"value":A};
}獎(jiǎng)著法記錄到歷史表
AI.setHistoryTable = function (txtMap,depth,value,my){
AI.setHistoryTable.lenght ++;
AI.historyTable[txtMap] = {depth:depth,value:value}
}評(píng)估棋局 取得棋盤(pán)雙方棋子價(jià)值差
AI.evaluate = function (map,my){
var val=0;
for (var i=0; i<map.length; i++){
for (var n=0; n<map[i].length; n++){
var key = map[i][n];
if (key){
val += play.mans[key].value[i][n] * play.mans[key].my;
}
}
}
//val+=Math.floor( Math.random() * 10); //讓AI走棋增加隨機(jī)元素
//com.show()
//z(val*my)
AI.number++;
return val*my;
}
AI.evaluate1 = function (map,my){
var val=0;
for (var i in play.mans){
var man=play.mans[i];
if (man.isShow){
val += man.value[man.y][man.x] * man.my;
}
}
//val+=Math.floor( Math.random() * 10); //讓AI走棋增加隨機(jī)元素
//com.show()
//z(val*my)
AI.number++;
return val*my;
}完整源碼下載
GitHub 地址：https://github.com/wanghao221/moyu/tree/main/游戲-57.中國(guó)象棋
到此這篇關(guān)于基于HTML+JavaScript實(shí)現(xiàn)中國(guó)象棋的文章就介紹到這了,更多相關(guān)JavaScript中國(guó)象棋內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
可以用鼠標(biāo)拖動(dòng)的DIV實(shí)現(xiàn)思路及代碼
DIV可以拖動(dòng)的效果，想必大家都有見(jiàn)到過(guò)吧,在本文也為大家實(shí)現(xiàn)一個(gè)不錯(cuò)的可以用鼠標(biāo)拖動(dòng)的div,感興趣的各位不要錯(cuò)過(guò)2013-10-10
JavaScript 阻止超鏈接跳轉(zhuǎn)的操作方法(多種寫(xiě)法)
很多朋友問(wèn)小編能否通過(guò)JavaScript來(lái)阻止超鏈接的跳轉(zhuǎn)呢，今天給大家通過(guò)多種寫(xiě)法來(lái)實(shí)現(xiàn)這一功能，具體實(shí)例代碼跟隨小編一起看看吧2021-06-06
文字滾動(dòng)顯示，是網(wǎng)頁(yè)企業(yè)公告，文字鏈廣告常用的一種效果，說(shuō)不定在什么時(shí)候你就能看到它。2010-05-05
childNodes.length與children.length的區(qū)別
childNodes.length與children.length的值常不一樣。2009-05-05
這篇文章主要介紹了JavaScript 作用域scope簡(jiǎn)單匯總,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
postman自定義函數(shù)實(shí)現(xiàn) 時(shí)間函數(shù)的思路詳解
Postman是一款功能強(qiáng)大的網(wǎng)頁(yè)調(diào)試與發(fā)送網(wǎng)頁(yè)HTTP請(qǐng)求的Chrome插件。這篇文章主要給大家介紹postman自定義函數(shù)實(shí)現(xiàn) 時(shí)間函數(shù)的思路詳解，感興趣的朋友一起看看吧2019-04-04
JavaScript面向?qū)ο笾R(shí)串結(jié)(讀JavaScript高級(jí)程序設(shè)計(jì)(第三版))
最近在看JavaScript高級(jí)程序設(shè)計(jì)(第三版)，面向?qū)ο笠徽?0多頁(yè)，來(lái)來(lái)回回看了三五遍，每次看的收獲都不一樣2012-07-07
Bootstrap Tree View簡(jiǎn)單而優(yōu)雅的樹(shù)結(jié)構(gòu)組件實(shí)例解析
本文通過(guò)實(shí)例代碼給大家介紹了Bootstrap Tree View簡(jiǎn)單而優(yōu)雅的樹(shù)結(jié)構(gòu)組件,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-06-06
深入淺析JavaScript中數(shù)據(jù)共享和數(shù)據(jù)傳遞
這篇文章主要介紹了深入淺析JavaScript中數(shù)據(jù)共享和數(shù)據(jù)傳遞的相關(guān)資料,需要的朋友可以參考下2016-04-04
JavaScript實(shí)現(xiàn)的選擇排序算法實(shí)例分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的選擇排序算法,結(jié)合實(shí)例形式分析了選擇排序的原理、實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-04-04