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

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:.........完整代码请登录后点击上方下载按钮下载查看