jquery实现一个立体中国象棋游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：jquery实现一个立体中国象棋游戏代码，点击会提示走法。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head lang="cn">
    <meta charset="UTF-8">
    <style>
        *{
        margin: 0;
        padding: 0;
    }
    body{
        background-color: #ececec;
        -moz-user-select:none;
        -webkit-user-select:none;
        -ms-user-select:none;
        -khtml-user-select:none;
        user-select:none;
    }
    #ground{
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: hidden;
    }
    #board{
        width: 401px;
        height: 451px;
        padding: 30px;
        background-color: #8f7a66;
        position: relative;
        top: 45%;
        left: 0;
        right: 0;
        margin: -220px auto;
        border: 3px solid rgb(192, 166, 137);
        border-radius: 2px;
        box-shadow: 0 0 25px rgba(143, 97, 76, 0.35);
    }
    #board #line{
        width: 100%;
        height: 100%;
    }
    #board #line #rows{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    #board #line #lines{
        width: 100%;
        height: 100%;
        position: relative;
        top: -100%;
        overflow: hidden;
    }
    #board #line .row{
        width: 100%;
        height: 1px;
        background-color: #571b16;
        margin-bottom: 49px;
    }
    #board #line .line{
        width: 1px;
        height: 100%;
        background-color: #571b16;
        margin-right: 49px;
        float: left;
    }
    #board #line .end{
        margin: 0;
    }
    #board #line #river{
        width: 461px;
        height: 100%;
        position: relative;
        top: -200%;
        left: -30px;
    }
    #board #line #river article{
        position: relative;
        top:201px;
        width: 100%;
        height: 49px;
        background-color: rgba(143, 122, 102, 0.95);
        /*background-image: url("ass/Riv.png");*/
        box-shadow: inset 0 0 25px rgba(79, 139, 191, 0.55);
        font-family: Arial,sans-serif;
        font-size: 45px;
        text-align: center;
        letter-spacing: 1px;
        color: #817c77;
        opacity: 0.95;
    }
    #board #flower{
        width: 100%;
        height: 100%;
        position: relative;
        top: -300%;
        overflow: hidden;
    }
    #board #flower article{
        width: 25px;
        height: 25px;
        position: relative;
        left: 37px;
        top: 37px;
        float: left;
        border: 1px solid rgba(134, 42, 3, 0.55);
        transform:rotate(45deg);
    }
    #board #flower .L2{
        width: 100%;
        height: 50px;
    }
    #board #flower .L5{
        width: 100%;
        height: 50px;
    }
    #board #flower .L2 article:nth-child(2)
    {
        margin-left: 273px;
    }
    #board #flower .L5 article:nth-child(1n+2)
    {
        margin-left: 73px;
    }
    #board #flower .L5 article:nth-child(1)
    {
        margin-left: -50px;
    }
    #board #flower .L5 article:nth-child(2)
    {
        margin-left: 50px;
    }
    #board #flower #F{
        margin-top: 50px;
        height: 200px;
    }
    #board #cross{
        width: 100%;
        height: 100%;
        position: relative;
        top: -400%;
    }
    #board #cross #T{
        width: 100%;
        height: 200px;
        margin-bottom: 51px;
    }
    #board #cross #B{
        width: 100%;
        height: 200px;
    }
    #board #cross article{
        margin: 0 auto;
        width: 140px;
        height: 1px;
        position: relative;
        top: 50px;
        background-color: #752e2b;
    }
    #board #cross article:nth-child(1){
        transform:rotate(45deg);
    }
    #board #cross  article:nth-child(2){
        margin-top: -1px;
        transform:rotate(-45deg);
    }
    #board #cross #B article{
        position: relative;
        top: 149px;
    }
            #board #space{
            width: 450px;
            height: 500px;
            position: relative;
            top: -100%;
            margin: -25px;
        }
        #board #space article{
            width: 44px;
            height: 44px;
            float: left;
            transition: box-shadow 0.35s,outline 0.35s,border 0.35s,transform 0.35s;
            border: 3px solid rgba(0, 0, 0, 0);
        }
        #board #space article:hover{
            box-shadow:0 0 25pt rgba(0, 0, 0, 0.35);
            border: 3px double rgba(0, 0, 0, 0.15);
            transform: scale(1.1,1.1);
        }
        .CS{
            border-radius: 500px;
        }
        .C{
            font-family: "微软雅黑 light", "微软雅黑", Arial,sans-serif;
            width: 40px;
            height: 40px;
            font-size: 25px;
            border-radius: 50px;
            line-height: 40px;
            text-align: center;
            border: 2px solid rgba(0, 0, 0, 0);
            box-shadow: 0 0 25pt rgba(0, 0, 0, 0.35);
            transition:transform 0.35s ;
            cursor: pointer;
        }
        /*.C:hover{
            transform: scale(1.1,1.1);
        }*/
        .BR{
            border-color: #6ec672;
            color: #f3f3f3;
            background-color: #46804a;
        }
        .BB{
            border-color: #6ec672;
            color: #232323;
            background-color: #46804a;
        }
        .PR{
            border-color: #c69c13;
            color: #f3f3f3;
            background-color: #805435;
        }
        .PB{
            border-color: #c69c13;
            color: #232323;
            background-color: #805435;
        }
        .JR{
            border-color: #c6385a;
            color: #f3f3f3;
            background-color: rgba(128, 43, 34, 0.75);
        }
        .JB{
            border-color: #c6385a;
            color: #232323;
            background-color: rgba(128, 43, 34, 0.75);
        }
        .MR{
            border-color: #c6a902;
            color: #f3f3f3;
            background-color: #806328;
        }
        .MB{
            border-color: #c6a902;
            color: #232323;
            background-color: #806328;
        }
        .XR{
            border-color: #2c806e;
            color: #f3f3f3;
            background-color: #5d9eb2;
        }
        .XB{
            border-color: #2c806e;
            color: #232323;
            background-color: #5d9eb2;
        }
        .SR{
            border-color: #bebebe;
            color: #820725;
            background-color: rgba(216, 216, 216, 0.95);
        }
        .SB{
            border-color: #bebebe;
            color: #232323;
            background-color: rgba(216, 216, 216, 0.95);
        }
        .J{
            border-color: #820725;
            color: #820725;
            background-color: rgba(0, 0, 0, 0.25);
        }
        .S{
            border-color: #232323;
            color: #232323;
            background-color: rgba(0, 0, 0, 0.25);
        }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
    <script>
        function LoadGround(){
        var g="";
        for(var j=0;j<10 ;j++){
            map[j]=[];
            for(var i=0;i<9 ;i++){
                map[j][i]=0;
                g+="<article class='CS' id='CS"+j+"-"+i+"' onclick='onChose("+j+","+i+")'></article>";
            }
        }
        $("#space").html(g);
        Log("完成创建场景");
    }
    
    //0空
    //兵1 炮2 车3 马4 相5 士6 将7 红
    //卒-1 炮-2 车-3 马-4 象-5 士-6 帅-7 黑
    
    function getCText(j,i){
        var T=[];
        switch (map[j][i])
         {
         case (0):
            return null;
         break;
         case (1):
             T[0]="兵";
             T[1]="BR";
         break;
         case (2):
             T[0]="炮";
             T[1]="PR";
         break;
         case (3):
             T[0]="车";
             T[1]="JR";
         break;
         case (4):
             T[0]="马";
             T[1]="MR";
         break;
         case (5):
             T[0]="相";
             T[1]="XR";
         break;
         case (6):
             T[0]="士";
             T[1]="SR";
         break;
         case (7):
             T[0]="将";
             T[1]="J";
         break;
         case (-1):
             T[0]="卒";
             T[1]="BB";
         break;
         case (-2):
             T[0]="炮";
             T[1]="PB";
         break;
         case (-3):
             T[0]="车";
             T[1]="JB";
         break;
         case (-4):
             T[0]="马";
             T[1]="MB";
         break;
         case (-5):
             T[0]="象";
             T[1]="XB";
         break;
         case (-6):
             T[0]="士";
             T[1]="SB";
         break;
         case (-7):
             T[0]="帅";
             T[1]="S";
         break;
         default :
             return null;
         break;
         }
        return T;
    }
    
    function showC()
    {
        for(var j=0;j<10 ;j++) {
            for (var i = 0; i < 9; i++) {
                var cla="";
                var tex="";
                var isNone=false;
                var T=getCText(j,i);
                if(T == null){
                    isNone=true;
                }else{
                    cla=T[1];
                    tex=T[0];
                }
                if(isNone){
                    continue;
                }
                $("#CS"+j+"-"+i).html(
                        "<section class='C "+cla+"'>"+tex+"</section>"
             .........完整代码请登录后点击上方下载按钮下载查看