jquery+css实现象棋翻翻棋游戏代码

代码语言: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 ? 280 : 560;
             y.push('<div class="kk" style="margin:0 auto;width: ' + x + 'px;height:auto;font-size:16px;padding-top:15px;height:40px;">');
             y.push('<div class="kk_time" style="float:left;width:33.333%;text-align: left;height:40px;">耗时:<span>0</span> 秒</div>');
             y.push('<div class="kk_step" style="float:left;width:33.333%;text-align: center;height:40px;">步数:<span>0</span> 步</div>');
             y.push('<div class="kk_role" style="float:left;width:33.333%;text-align: right;height:40px;">请翻棋</div>');
             y.push("</div>");
             b.after(y.join("\n"));
             a = b.next("div")
         } else {
             if (k && k != false) {
                 a = $(k)
             }
         }
         b.after('<audio src="./mp3/fall.mp3" class="audio-fall"></audio>');
         b.after('<audio src="./mp3/eat.mp3" class="audio-eat"></audio>');
         e()
     };
     u.restart = function() {
         var x = p();
         b.find(".box-item").remove();
         $.each(x, function(B, C) {
             var A = '<div class="layui-col-xs1 box-item" ' + o(B) + ' data-row="' + B + '"><div data-role="' + (C < 16 ? 0 : 1) + '" data-number="' + C + '" class="un-invert"></div></div>';
             var y = b.find(".box-item:last");
             if (y && y.length > 0) {
                 y.after(A)
             } else {
                 b.append(A)
             }
         });
         l = null;
         v = 0;
         s = false;
         e()
     };

     function p() {
         var x = [];
         for (var y = 0; y < w * z; y++) {
             x.push(y)
         }
         x.sort(function() {
             return Math.random() - 0.5
         });
         return x
     }

     function o(y) {
         var A = 70,
             x = 22;
         return 'style="width:' + A + "px;height:" + A + "px;line-height:" + A + "px;font-size:" + (x || 10) + 'px;"'
     }

     function t(y, x) {
         if (window.layer) {
             return x ? layer.alert(y) : layer.msg(y)
         }
         return alert(y)
     }

     function g(x) {
         l = l == 1 ? 0 : 1;
         if (c && c.length > 0) {
             c.addClass("selected")
         }
         c = null;
         if (!x) {
             b.parent().find(".audio-fall")[0].play()
         }
         h(true);
         if (a && !s) {
             if (u.stepNum < 5200) {
                 u.stepNum = parseInt(u.stepNum) + 1
             }
             a.find(".kk_step>span").text(u.stepNum);
             a.find(".kk_role").text(l == 0 ? "红棋下" : .........完整代码请登录后点击上方下载按钮下载查看

网友评论0