jquery实现一个立体中国象棋游戏代码
代码语言：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>"
)
}
}
Log("完成显示场景");
}
//0清除 1绿色 2黄色 3红色
function showChose(j,i,t){
var o=$("#CS"+j+"-"+i);
if(t==0){
o.css({
"box-shadow": "",
"border": ""
});
return;
}
var c="";
switch (t){
case 1:
c="6bc274";
break;
case 2:
c="eeb948";
break;
case 3:
c="c53f46";
break;
default :
break;
}
o.css({
"box-shadow": "0 0 25pt #"+c,
"border": "3px solid #"+c
})
}
function cleanChose(){
$(".CS").css({
"box-shadow": "",
"border": ""
})
}
function move(y,x,j,i,eat){
onMove=true;
if(eat==null)
if(map[j][i]!=0){
LogError("错误的位置");
return;
}
var cla="";
var tex="";
var T=getCText(y,x);
if(T == null){
LogError("丢失棋子信息");
return;
}else{
cla=T[1];
tex=T[0];
}
if(eat==null)
Log(y+"-"+x+" "+tex+" 移动到"+j+"-"+i);
else
Log(y+"-"+x+" "+tex+" 吃"+j+"-"+i+" "+getCText(j,i)[0]);
map[j][i]=map[y][x];
map[y][x]=0;
$("#CS"+j+"-"+i).html(
"<section class='C "+cla+"' style='transform:translate("+(x-i)*45+"px,"+(y-j)*45+"px);'>"+tex+"</section>"
)
$("#CS"+y+"-"+x).html(
""
)
setTimeout(function(){
$("#CS"+j+"-"+i+" section").css({
transform:""
})
},10);
setTimeout(function(){
trunH();
onMove=false;
},700);
}
function eat(y,x,j,i){
onMove=true;
$("#CS"+j+"-"+i+" section").css({
transform:"scale(0,0)"
})
setTimeout(function(){
move(y,x,j,i,true);
},700)
}
function onChose(j,i){
if(!runNow)return;
if(onMove)return;
//alert(j+""+i);
var CC=WhatSpace(j,i);
if(CC==0)
{
onChoseS(j,i);
}else
{
Log("选择了"+j+"-"+i+" "+CC);
onChoseC(j,i,CC);
}
}
function cleanSt(){
nowChoseC=[];
cleanChose();
moveList=[];
eatList=[];
OnChoseNow=false;
}
function trunH(){
if(nowWho==0){
nowWho=1;
}else{
nowWho=0;
}
cleanSt();
}
function showSt(j,i,t){
nowChoseC=[];
cleanChose();
showChose(j,i,1);
var tmap = WhereCan(j,i,t);
if(tmap!=null && tmap.length>0)
for(var q=0;q<tmap.length;q++){
if(map[tmap[q][0]][tmap[q][1]]==0){
moveList.push(tmap[q]);
}else{
eatList.push(tmap[q]);
}
showChose(tmap[q][0],tmap[q][1],tmap[q][2]+2);
}
nowChoseC[0]=j;
nowChoseC[1]=i;
nowChoseC[2]=t;
OnChoseNow=true;
}
var onMove=false;
var OnChoseNow=false;
var nowChoseC=[];
var nowWho=0;//0红 1黑
var moveList=[];
var eatList=[];
function onChoseC(j,i,t){
if(!OnChoseNow){
if(nowWho==0){
if(t<0)return;
}
if(nowWho==1){
if(t>0)return;
}
}
if(nowChoseC[0]==j&&nowChoseC[1]==i){
cleanSt();
return;
}
if(OnChoseNow==true){
for(var q=0;q<eatList.length;q++){
if(eatList[q][0]==j&&eatList[q][1]==i){
//eat && move
eat(nowChoseC[0],nowChoseC[1],j,i);
break;
}
}
cleanSt();
}
if(nowWho==0){
if(t<0){
cleanSt();
return;
}
}
if(nowWho==1){
if(t>0){
cleanSt();
return;
}
}
showSt(j,i,t);
}
function onChoseS(j,i){
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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