jquery+css实现象棋翻翻棋游戏代码
代码语言：html
所属分类：游戏
代码描述：jquery+css实现象棋翻翻棋游戏代码，象棋翻翻棋是由象棋变化而来，游戏时，所有的棋子都会翻过来，成为暗棋。翻翻棋将大型的象棋对战，变为休闲+对战的娱乐性较强的游戏，加上运气的成份，越来越受玩家们喜欢。玩法：2人对战游戏，当把对方的棋子全部吃掉的时候，则为胜利。吃法说明：棋子由大到小排列：帅（将），士 ， 相（象），车 ，马 ，炮 ，兵（卒）。 较大的棋子可以吃掉较小的棋子，但是帅（将）不能吃兵（卒），反而被兵（卒）吃。 其中一方的棋子包括：帅（将）一个，士，相（象），马，车，炮，均为2个，兵（卒）为
下面为部分代码预览，完整代码请点击下载或在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> </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 ? "红棋下" : .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0