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

最新推荐文章于 2024-06-17 13:08:42 发布
最新推荐文章于 2024-06-17 13:08:42 发布
阅读量518 收藏 12
点赞数 7
文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_81218205/article/details/135199866
版权

💂 个人网站:【 海拥】【神级代码资源网站】【办公神器】
🤟 基于Web端打造的：👉轻量化工具创作平台
💅 想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】
给大家安利一个免费且实用的轻量化工具创作平台，👉点击跳转到网站。

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

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

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

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

游戏入口地址有多个：

摸鱼入口：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 主要代码：

<div class="box" id="box">
    <div class="chess_left">
        <canvas id="chess">对不起，您的浏览器不支持HTML5，请升级浏览器至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" href="https://www.bootcss.com/p/buttons/css/buttons.css">
        <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="中级水平" />
                <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="先手开始" />
            <input type="button" name="defensivePlay" id="defensivePlay" value="后手开始" />
            -->
                <input type="button" name="regret" id="regretBn" class="button button-raised button-pill button-inverse" value="悔棋" />
                <input type="button" name="billBn" id="billBn" value="重新开始" 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>

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='<h3>AI搜索结果：</h3>最佳着法：'+
                                        com.createMove(com.arr2Clone(play.map),man.x,man.y,val.x,val.y)+
                                        '<br />搜索深度：'+AI.treeDepth+'<br />搜索分支：'+
                                        AI.number+'个 <br />最佳着法评估：'+
                                        val.value+'分'+
                                        ' <br />搜索用时：'+
                                        (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<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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
取得棋谱所有己方棋子的算法
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];
             //如果不是长将着法
            if (foul[0]!=x || foul[1]!=y || foul[2]!=newX || foul[3]!=newY ){
                moves.push([x,y,newX,newY,man.key])
            }
        }
    }
    return moves;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
A:当前棋手value/B:对手value/depth：层级
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)}; //局面评价函数; 
　    }
　    var moves = AI.getMoves(map , my ); //生成全部走法; 
　    //这里排序以后会增加效率

    for (var i=0; i < moves.length; i++) {
        
        
　　    //走这个走法;
        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") {//被吃老将,撤消这个走法; 
            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;
    
    　　    //撤消这个走法;　 
            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) { 
                //将这个走法记录到历史表中; 
                //AI.setHistoryTable(txtMap,AI.treeDepth-depth+1,B,my);
                return {"key":key,"x":newX,"y":newY,"value":B}; 
            } 
            if (val > A) { 
    　　　　    A = val; //设置最佳走法; 
                if (AI.treeDepth == depth) var rootKey={"key":key,"x":newX,"y":newY,"value":A};
            } 
        } 
　    } 
    //将这个走法记录到历史表中; 
    //AI.setHistoryTable(txtMap,AI.treeDepth-depth+1,A,my);
    if (AI.treeDepth == depth) {//已经递归回根了
        if (!rootKey){
            //AI没有最佳走法，说明AI被将死了，返回false
            return false;
        }else{
            //这个就是最佳走法;
            return rootKey;
        }
    }
　return {"key":key,"x":newX,"y":newY,"value":A}; 
}

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
奖着法记录到历史表
AI.setHistoryTable = function (txtMap,depth,value,my){
    AI.setHistoryTable.lenght ++;
    AI.historyTable[txtMap] = {depth:depth,value:value} 
}
1
2
3
4
评估棋局 取得棋盘双方棋子价值差
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走棋增加随机元素
    //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走棋增加随机元素
    //com.show()
    //z(val*my)
    AI.number++;
    return val*my;
}

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
🥇 如何让学习不再盲目
学习技巧篇

1. 编程小白
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。
链接地址：牛客网 | 编程初学者入门训练

2. 编程进阶
当基础练习完已经逐步掌握了各知识要点后，这个时候去专项练习中学习数据结构、算法基础、计算机基础等。先从简单的入手，感觉上来了再做中等难度，以及较难的题目。这三样是面试中必考的知识点，我们只有坚持每日自己去多加练习，拒绝平躺持续刷题，不断提升自己才能冲击令人满意的公司。
链接地址：牛客网 | 专项练习


🎁 参与评论送书
💌 以后每周新文评论区至少抽三位朋友送书，大家可持续关注我：海拥

【内容简介】

第1章 MySQL数据库基础
第2章 详解InnoDB存储引擎
第3章 MySQL 用户管理与访问控制
第4章 管理MySQL的数据库对象
第5章 MySQL应用程序开发
第6章 MySQL的事务与锁
第7章 MySQL备份与恢复
第8章 MySQL的主从复制与主主复制
第9章 MySQL的高可用架构
第10章 MySQL性能优化与运维管理
第11章 MySQL数据库的监控
第12章 使用MySQL数据库的中间件
📚 京东自营购买链接： 《MySQL数据库进阶实战》- 京东图书

【抽奖方式】关注博主、点赞收藏文章后，评论区留言：人生苦短，我爱摸鱼！！！博主会用爬虫代码随机抽取九人送书！
【开奖时间】：截止到周二晚8点，博主会用爬虫代码随机抽取九人送书！

本期中奖名单：

📑 完整源码下载⬇
一共三种下载方式，推荐后两种（免费）

1.CSDN资源下载：https://download.csdn.net/download/qq_44273429/86249236
2.GitHub 地址（给个star ❤️ 吧）：https://github.com/wanghao221/moyu
3.通过下方卡片添加作者VX(wh18363)备注：中国象棋


商务合作 | 学习交流 | 资料领取

微信名片
————————————————
版权声明：本文为CSDN博主「海拥✘」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_44273429/article/details/125957467

拉保小跑
关注
  • 7
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS中国象棋
11-03
JS中国象棋 JS中国象棋 JS中国象棋 JS中国象棋 JS中国象棋
js象棋实现
03-06
纯js，css实现象棋功能，有需要的来
【中国象棋人机对战】引入了AI算法，学习低代码和高代码如何混编并互相调用
weixin_52095264的博客
07-19 1041
以低代码和高代码（原生JS代码）混编的方式引入了AI算法，学习如何使用表达式调用原生代码的。整个过程在众触低代码应用平台进行，适合高阶学员。
JavaScript妙笔生花：打造沉浸式中国象棋游戏体验
最新发布
仰望苍穹
06-17 1787
随着信息技术的飞速发展，Web开发领域也出现了翻天覆地的变化。JavaScript作为前端开发中不可或缺的编程语言，其重要性不言而喻。而当我们谈论到利用JavaScript打造一款沉浸式的中国象棋游戏体验时，我们不仅仅是在开发一个游戏，更是在进行一种文化的传承和创新。以下将探讨如何利用现代互联网技术，结合JavaScript以及其他前端技术，来打造一款独特的沉浸式中国象棋游戏体验。
李小枫原生js象棋
Li_xiaofen的博客
10-13 360
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.
纯JS中国象棋
08-31
原创纯JS中国象棋，非jquery，非框架，纯javascript编写网页版中国象棋。纯属个人爱好而编写。
用原生 JS 写一个象棋小游戏
LuckyWinty的博客
03-09 379
前言最近没什么需求，借着上班摸鱼的时间，写点代码玩玩。过年的时候总是和爷爷下象棋，这次用原生JS写了一个象棋小游戏，但是技术有限，只能自己一个人左右手互博来下棋。象棋规则基本上都实现了，下面就来给大家分享一下。我正在参与码上掘金编程挑战赛，请为我点赞吧！一、绘制棋盘和棋子游戏的元素是棋盘和棋子，图片都是在网上搜，然后用截图工具截下来，就可以直接使用了。棋子通过遍历数组来渲染，因为棋子的种类很多，所...
使用html+css+JavaScript实现中国象棋的对弈，并给出代码
06-03
在中国象棋的对弈系统中，使用HTML、CSS和JavaScript技术可以构建一个基本的交互界面。HTML用于构建页面结构，CSS用于美化样式，而JavaScript则是实现动态交互的关键。以下是对这些代码片段的详细解释和扩展： 1. *...
基于 HTML、CSS 和 JS 的中国象棋游戏
07-24
使用技术：HTML+CSS+JS 在线演示地址：https://haiyong.site/moyu/xiangqi/ 说明：中国象棋游戏，点击新手或者初级即可开始游戏，棋盘可放大，手机电脑均可玩，源码完整，代码注释清晰。 使用场景：HTML大作业、个人...
HTML5 Canvas中国象棋、国际象棋游戏代码
02-27
HTML5 Canvas中国象棋、国际象棋游戏代码 象棋游戏、中国象棋、Canvas、HTML5 代码简介：HTML5 Canvas中国象棋游戏代码是一款中国象棋，帅，将，相，车，马，炮，兵，卒，楚河象棋游戏源代码，象棋对战，判断输赢。
中国象棋-html5.zip
09-03
本项目“中国象棋-html5.zip”便是一个典型的应用实例，它是一款基于HTML5开发的中国象棋游戏，不仅支持人机对战，还提供了完整的源码，方便开发者进行二次开发，深入理解HTML5在游戏制作中的应用。 首先，我们来...
中国象棋(原生js+canvas)
12-11
简易的中国象棋 , 由原生JavaScript + canvas 开发, 适合初学者学习js 和canvas的应用!
js写的象棋（面向对象）
02-20
用javascript写的象棋，基本功能全部实现，里面是个Html文件打开直接就能开到效果了！
纯JS象棋 AI算法
05-21
AI 人工智能 象棋游戏 AI 人工智能 象棋游戏 AI 人工智能 象棋游戏
JavaScript象棋
12-09
“楚汉相争，鸿沟为界”，这句话里诠释着中国象棋博大文化精髓，象棋是由两人轮流走子，以将死或困毙对方将（帅）为胜。以其精妙的布局，灵动的走法，在国内深受群众喜爱，现在有JavaScript象棋游戏源码，分享给大家
js 象棋游戏 _ 支持双方在线对战
04-20
NULL 博文链接：https://jiangxiao-2000.iteye.com/blog/1901699
html5小游戏-中国象棋
07-22
HTML5小游戏——中国象棋是一种基于现代Web技术开发的在线娱乐项目，利用HTML5、CSS3和JavaScript等技术实现。这种小游戏无需安装任何插件，只需在支持HTML5的浏览器上运行，为用户提供了便捷的体验。下面我们将深入...
通过原生 JS 写一个象棋小游戏，感受无穷乐趣
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
03-02 1859
前言最近没什么需求，借着上班摸鱼的时间，写点代码玩玩。过年的时候总是和爷爷下象棋，这次用原生JS写了一个象棋小游戏，但是技术有限，只能自己一个人左右手互博来下棋。象棋规则基本上都实现了，下面就来给大家分享一下。我正在参与码上掘金编程挑战赛，请为我点赞吧！一、绘制棋盘和棋子游戏的元素是棋盘和棋子，图片都是在网上搜，然后用截图工具截下来，就可以直接使用了。棋子通过遍历数组来渲染，因为棋子的种类很多，所...
完整指南：使用JavaScript从零开始构建中国象棋游戏
m0_57781768的博客
09-19 754
在真实的中国象棋规则中，每种棋子都有自己的移动规则，但为了保持本教程的简洁性，我们不会涉及这些细节。此外，为了增强游戏的功能性和用户体验，你可以考虑使用更高级的工具和库，例如React或Vue，以及游戏开发库如Phaser。在中国象棋中，两方各有一军队，包括士、象、车、马、炮和卒等棋子，目标是将对方的“将”或“帅”给将死，达到胜利。现在，当你打开HTML页面时，你应该能看到一个8x8的棋盘，其中白色和黑色的格子交替排列。我们的棋盘由8x8的格子组成。现在，当你点击棋子时，它会被选中，并显示一个金色的边框。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值