jquery+css实现象棋翻翻棋游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：jquery+css实现象棋翻翻棋游戏代码，象棋翻翻棋是由象棋变化而来，游戏时，所有的棋子都会翻过来，成为暗棋。翻翻棋将大型的象棋对战，变为休闲+对战的娱乐性较强的游戏，加上运气的成份，越来越受玩家们喜欢。玩法：2人对战游戏，当把对方的棋子全部吃掉的时候，则为胜利。吃法说明：棋子由大到小排列：帅（将），士，相（象），车，马，炮，兵（卒）。较大的棋子可以吃掉较小的棋子，但是帅（将）不能吃兵（卒），反而被兵（卒）吃。其中一方的棋子包括：帅（将）一个，士，相（象），马，车，炮，均为2个，兵（卒）为

代码标签： jquery css 象棋翻翻棋游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,target-densitydpi=high-dpi,user-scalable=yes">

    <meta charset="UTF-8">
<style>
@charset "UTF-8";
        body {
        background-color:#F8FAFB
}
.container {
        margin-right:auto;
        margin-left:auto;
        width:960px;
        background:white;
        padding:20px;
        margin-top:10px
}
@media screen and (max-width:520px) {
        .container {
        width:auto
}
.box {
        width:280px!important;
        height:560px!important
}
.box .box-item div {
        font-size:2.4rem
}
}.container a,.container a:hover,.container a:active {
        color:#31BDEC!important;
        margin:0 10px
}
.box {
        width:560px;
        height:280px;
        margin:0 auto;
        border:12px solid #e09b49;
        position:relative;
        background:#e09b49;
        padding-bottom:1px;
        border-radius:0;
        box-shadow:3px 3px 3px #7d4d14
}
.box .box-item {
        border:1px solid #9c6422;
        box-sizing:border-box;
        text-align:center;
        height:100%;
        background:#e09b49;
        color:#8f532f;
        cursor:pointer
}
.box .box-item div {
        width:50px;
        height:50px;
        margin:2px;
        border-radius:520px;
        border:#82531d double 6px;
        background-color:#aa754f;
        text-align:center;
        font:2.6rem "楷体";
        font-weight:bold;
        line-height:50px;
        text-shadow:0 0 2px white;
        box-shadow:2px 2px 2px black
}
.box .box-item div.invert.selected {
        box-shadow:0 0 3px 3px #ffe6c9
}
.box .box-item div.invert[data-role="0"] {
        color:#900b0b;
        border-color:#900b0b;
        background-color:#e4b77c
}
.box .box-item div.invert[data-role="1"] {
        color:#4e3817;
        border-color:#4e3817;
        background-color:#e4b77c
}
.role-text-0 {
        color:#900b0b
}
.role-text-1 {
        color:#900b0b
}
.start {
        width:200px;
        height:40px;
        background:#aa754f;
        box-shadow:0 3px 3px #7d4d14;
        margin:10px auto;
        display:block;
        transition:box-shadow .5s;
        color:#fff;
        border:1px solid #6d543a;
        cursor:pointer;
        font-size:17px;
        font-weight:bold;
        letter-spacing:2px
}
.start:hover {
        box-shadow:0 3px 3px #000
}
.opt-desc {
        margin:20px auto
}
.opt-desc p {
        text-indent:2em;
        margin-bottom:4px;
        color:#999
}
.opt-desc .layui-table {
        width:120px;
        margin-left:2em
}
.opt-desc .layui-table td {
        text-align:center!important;
        background:white!important
}
.kk_step span,.kk_time span {
        color:orange
}
.none {
        display:none!important
}
blockquote,body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul {
        margin:0;
        padding:0;
        -webkit-tap-highlight-color:rgba(0,0,0,0)
}
.layui-col-space1>* {
        padding:.5px
}
.layui-col-xs1,.layui-col-xs10,.layui-col-xs11,.layui-col-xs12,.layui-col-xs2,.layui-col-xs3,.layui-col-xs4,.layui-col-xs5,.layui-col-xs6,.layui-col-xs7,.layui-col-xs8,.layui-col-xs9 {
        float:left;
        position:relative;
        display:block
}
.layui-elem-field {
        border-color:#e6e6e6
}
.layui-field-title {
        margin:10px 0 20px;
        border-width:1px 0 0
}
.layui-elem-field {
        padding:0;
        border-style:solid
}
.layui-elem-field legend {
        margin-left:20px;
        padding:0 10px;
        font-size:20px;
        font-weight:300
}
.layui-elem-quote {
        margin-bottom:10px;
        padding:15px;
        line-height:22px;
        border-left:5px solid #009688;
        border-radius:0 2px 2px 0;
        background-color:#f2f2f2
}

</style>
</head>

<body>
    <div id="main-layout" class="main-layout">
        <div class="container">
            <blockquote class="layui-elem-quote none">[原创]源码： <a href="https://github.com/lvbee/ChessInvert" target="_blank">Github仓库</a>、 <a href="https://gitee.com/2925001332/ChessInvert" target="_blank">Gitee仓库</a>、 <a href="https://www.jq22.com/jquery-info24476" target="_blank">效果预览</a></blockquote>
            <div
                class="content">
                <div data-chess></div>
                <div><button type="button" class="start">开始游戏</button></div>
        </div>
        <div class="opt-desc">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>游戏说明</legend>
            </fieldset>
            <p>象棋翻翻棋是由象棋变化而来，游戏时，所有的棋子都会翻过来，成为暗棋。</p>
            <p>翻翻棋将大型的象棋对战，变为休闲+对战的娱乐性较强的游戏，加上运气的成份，越来越受玩家们喜欢。</p>
            <p>玩法：2人对战游戏，当把对方的棋子全部吃掉的时候，则为胜利。</p><br />
            <p>吃法说明：棋子由大到小排列：帅（将），士 ， 相（象），车 ，马 ，炮 ，兵（卒）。 较大的棋子可以吃掉较小的棋子，但是帅（将）不能吃兵（卒），反而被兵（卒）吃。 其中一方的棋子包括：帅（将）一个，士，相（象），马，车，炮，均为2个，兵（卒）为5个。</p>
            <p>棋子走法：炮只能隔子吃，即中间必须隔一个子可以吃掉任何棋子，但炮走棋无吃子时仍旧是一格一格移动。其他棋子只能横竖向移动一格。</p>
        </div>
    </div>
    </div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script >
  /* ChessInvert v1.0.1 lvbee.com.cn/ license */
 function CNChessInvert(n, f, k) {
     var u = this;
     if (!window.$) {
         throw new Error("need jquery.js")
     }
     var b = $(n),
         d = $(f),
         a;
     b.addClass("layui-row box");
     var s = true;
     var w = 4,
         z = 8,
         l = null,
         v = 0;
     var i = ["兵", "兵", "兵", "兵", "兵", "车", "车", "马", "马", "相", "相", "仕", "仕", "帅", "炮", "炮", "卒", "卒", "卒", "卒", "卒", "车", "车", "马", "马", "象", "象", "士", "士", "将", "炮", "炮"];
     u.init = function() {
         b.html("");
         if ($(window).width() < 520) {
             w = 8;
             z = 4;
             console.log(w, z)
         }
         for (var A = 0; A < w * z; A++) {
             b.append('<div class="layui-col-xs1 box-item" ' + o(A) + "><div data-role>&nbsp;</div></div>")
         }
         l = null;
         v = 0;
         if (k == true) {
             var y = [],
                 x = w > z ? 2.........完整代码请登录后点击上方下载按钮下载查看