Ruin/cheers
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
进进啊
2022-01-06 08:59:42 +08:00
commit 7c44a0d056
8 changed files with 1228 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
css/Chess.css Normal file
View File

@@ -0,0 +1,108 @@
#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);
}

170
css/index.css Normal file
View File

@@ -0,0 +1,170 @@
* {
/* 清除默认的外边距和内边距 */
margin: 0;
padding: 0;
}
body {
background-color: #ececec;
/* 初始化select标签的样式 */
/* 其中的-xx-xx是浏览器的私有前缀，这么写可以保证兼容性
也就是各个浏览器下样式表现一致
*/
-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;
}
/* 使用子代选择器设置.L2中第二个article的样式 */
#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;
}

108
index.html Normal file
View File

@@ -0,0 +1,108 @@
<!--
* @Description: {{ByRuin}}
* @Version: 2.0
* @Author: Ruin 🍭
* @Date: 2020-08-31 19:56:00
* @LastEditors: 刘引
* @LastEditTime: 2022-01-05 09:31:21
-->
<!-- 声明该文件是一个html文件 -->
<!DOCTYPE html>
<!-- html是这个网页的根标签 -->
<html>
<!-- cn代表申明该网页是一个中文网站-->
<head lang="cn">
<!-- 设置网页编码格式 UTF-8是一种最常用的标准编码格式，常见的编码格式还有 ASCII 、 ANSI 、 GBK 、 GB2312 、 GB18030 和 UNICODE 等。 -->
<meta charset="UTF-8" />
<!-- 网页标签栏上的标题 -->
<title>象棋</title>
<!-- 通过link标签引入css文件，一般css引用方式为三种，分别行内样式、内部样式表、外部样式表 -->
<link rel="stylesheet" href="css/index.css" type="text/css" />
<link rel="stylesheet" href="css/Chess.css" type="text/css" />
<!-- 通过script标签引入js文件，其中jq需要先引用，js的执行顺序是从上到下逐行执行，
其他js有用到jq的相关函数，所以要先引入jq -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/Show.js" type="text/javascript"></script>
<script src="js/OnDoing.js" type="text/javascript"></script>
<script src="js/CMoveRule.js" type="text/javascript"></script>
<script src="js/CChess.js" type="text/javascript"></script>
</head>
<body>
<!-- section与article都是h5中的语义化标签，前者代表区域的意思，
后者代表文章的意思，语义化标签的使用有助于网页结构更加清晰，方便seo优化 -->
<section id="ground">
<!-- 这边的id是id选择器，一般为其添加样式的方式为#ground,
它的权重是css所有选择器中最高的，可以覆盖其他样式-->
<section id="board">
<section id="line">
<section id="rows">
<article class="row"></article>
<!-- class为类名选择器，可以通过.row为其添加样式 -->
<article class="row"></article>
<article class="row"></article>
<article class="row"></article>
<article class="row"></article>
<article class="row"></article>
<article class="row"></article>
<article class="row"></article>
<article class="row"></article>
<article class="row end"></article>
</section>
<section id="lines">
<article class="line"></article>
<article class="line"></article>
<article class="line"></article>
<article class="line"></article>
<article class="line"></article>
<article class="line"></article>
<article class="line"></article>
<article class="line"></article>
<article class="line end"></article>
</section>
<section id="river">
<article>۞۞۞۞۞۞۞۞</article>
</section>
<section id="flower">
<section id="F">
<section class="L2">
<article></article>
<article class="t2"></article>
</section>
<section class="L5">
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</section>
</section>
<section id="L">
<section class="L5">
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</section>
<section class="L2">
<article></article>
<article></article>
</section>
</section>
</section>
<section id="cross">
<section id="T">
<article></article>
<article></article>
</section>
<section id="B">
<article></article>
<article></article>
</section>
</section>
</section>
<section id="space"></section>
</section>
</section>
</body>
</html>

123
js/CChess.js Normal file
View File

@@ -0,0 +1,123 @@
$().ready(function () {
//运行程序
LoadGround();
putDef();
showC();
runNow = true;
});
function Log(info) {
//登录调试
if (DeBug) {
console.log("DEBUG:" + info);
}
}
function LogError(info) {
//
if (DeBug) {
console.log("ERROR:" + info);
}
}
//0空
//兵1 炮2 车3 马4 相5 士6 将7 红
//卒-1 炮-2 车-3 马-4 象-5 士-6 帅-7 黑
var map = [];
var runNow = false;
var DeBug = true;
function putDef() {
//定义功能函数,调用map集合,让集合中的每个元素对应放置象棋棋子
map[0][0] = -3;
map[9][0] = 3;
map[0][1] = -4;
map[9][1] = 4;
map[0][2] = -5;
map[9][2] = 5;
map[0][3] = -6;
map[9][3] = 6;
map[0][4] = -7;
map[9][4] = 7;
map[0][5] = -6;
map[9][5] = 6;
map[0][6] = -5;
map[9][6] = 5;
map[0][7] = -4;
map[9][7] = 4;
map[0][8] = -3;
map[9][8] = 3;
map[2][1] = -2;
map[7][1] = 2;
map[2][7] = -2;
map[7][7] = 2;
map[3][0] = -1;
map[6][0] = 1;
map[3][2] = -1;
map[6][2] = 1;
map[3][4] = -1;
map[6][4] = 1;
map[3][6] = -1;
map[6][6] = 1;
map[3][8] = -1;
map[6][8] = 1;
Log("完成放置默认棋子");
}
function WhatSpace(y, x) {
return map[y][x];
}
function CanEat(y, x, c) {
var cc = 0;
if (c == 0) {
cc = 1;
} else {
cc = -1;
}
return map[y][x] * cc < 0;
}
//0空
//兵1 炮2 车3 马4 相5 士6 将7 红
//卒-1 炮-2 车-3 马-4 象-5 士-6 帅-7 黑
function WhereCan(y, x, t) {
//0可以走 1可以吃
var c = 0;
if (t <= 0) {
c = 1;
t *= -1;
}
var tmap = [];
switch (t) {
case 1:
binMove(tmap, c, y, x);
break;
case 2:
paoMove(tmap, c, y, x);
break;
case 3:
juMove(tmap, c, y, x);
break;
case 4:
maMove(tmap, c, y, x);
break;
case 5:
xiangMove(tmap, c, y, x);
break;
case 6:
shiMove(tmap, c, y, x);
break;
case 7:
JSMove(tmap, c, y, x);
break;
default:
break;
}
for (var l = 0; l < tmap.length; l++) {
if (CanEat(tmap[l][0], tmap[l][1], c)) {
tmap[l][2] = 1;
} else {
tmap[l][2] = 0;
}
}
return tmap;
}

353
js/CMoveRule.js Normal file
View File

@@ -0,0 +1,353 @@
// 该js文件中的函数主要是用于控制棋子路径，使其符合象棋的游戏规则，如马走日，象走田等。
// 设置小兵的路径规则
function binMove(tmap, c, y, x) {
//0红 1黑
var w;
var h = 0;
if (c == 0) {
w = y < 5;
h = -1;
} else {
w = y > 4;
h = 1;
}
if (w) {
if (y + h >= 0 && y + h < map.length) {
var t1 = [];
t1[0] = y + h;
t1[1] = x;
tmap.push(t1);
}
var t2 = [];
var t3 = [];
t2[0] = y;
t3[0] = y;
t2[1] = x - 1;
t3[1] = x + 1;
tmap.push(t2);
tmap.push(t3);
} else {
var t = [];
t[0] = y + h;
t[1] = x;
tmap.push(t);
}
}
// 设置炮直线和竖线移动
function paoMove(tmap, c, y, x) {
paoMove_(tmap, 0, c, y, x);
paoMove_(tmap, 1, c, y, x);
paoMove_(tmap, 2, c, y, x);
paoMove_(tmap, 3, c, y, x);
}
// 设置炮隔子移动
function paoMove_(tmap, d, c, y, x) {
//0上1左2下3右
var q = y,
w = x,
qi = 0,
wi = 0,
ci = 0; //ci:0红 1黑
if (c == 0) {
ci = 1;
} else {
ci = -1;
}
var cc;
switch (d) {
case 0:
cc = function (q) {
return q >= 0;
};
qi = -1;
break;
case 1:
cc = function (q, w) {
return w >= 0;
};
wi = -1;
break;
case 2:
cc = function (q) {
return q < map.length;
};
qi = 1;
break;
case 3:
cc = function (q, w) {
return w < map.length;
};
wi = 1;
break;
}
var ce = false;
while (true) {
if (!cc(q, w)) break;
if (q == y && w == x) {
q += qi;
w += wi;
continue;
}
if (map[q][w] == 0) {
if (!ce) {
var t = [];
t[0] = q;
t[1] = w;
tmap.push(t);
}
} else {
if (ce) {
if (map[q][w] * ci < 0) {
var t = [];
t[0] = q;
t[1] = w;
tmap.push(t);
ce = false;
break;
}
}
ce = true;
}
q += qi;
w += wi;
}
}
// 设置车的路径规则
function juMove(tmap, c, y, x) {
for (var q = y; q >= 0; q--) {
if (q == y) continue;
if (!fastMove(tmap, c, q, x)) break;
}
for (var q = x; q >= 0; q--) {
if (q == x) continue;
if (!fastMove(tmap, c, y, q)) break;
}
for (var q = y; q < map.length; q++) {
if (q == y) continue;
if (!fastMove(tmap, c, q, x)) break;
}
for (var q = x; q < map.length; q++) {
if (q == x) continue;
if (!fastMove(tmap, c, y, q)) break;
}
}
// 设置车的水平和垂直移动
function fastMove(tmap, c, y, x) {
//c:0红 1黑
var ci = 0;
if (c == 0) {
ci = 1;
} else {
ci = -1;
}
if (map[y][x] == 0) {
var t = [];
t[0] = y;
t[1] = x;
tmap.push(t);
return true;
} else {
if (map[y][x] * ci < 0) {
var t = [];
t[0] = y;
t[1] = x;
tmap.push(t);
}
return false;
}
}
// 设置马的路径规则
function maMove(tmap, c, y, x) {
function fastMa(tmap, y, x, ys, xs, c) {
if (
y + ys < map.length &&
y + ys >= 0 &&
x + xs < map.length &&
x + xs >= 0
)
if (map[y + ys][x + xs] == 0) {
var yz = 0,
xz = 0;
if (ys == 0) {
yz = -1;
} else {
xz = -1;
}
if (
y + ys + ys - yz < map.length &&
y + ys + ys - yz >= 0 &&
x + xs + xs - xz < map.length &&
x + xs + xs - xz >= 0
)
if (map[y + ys + ys - yz][x + xs + xs - xz] * c <= 0) {
var t = [];
t[0] = y + ys + ys - yz;
t[1] = x + xs + xs - xz;
tmap.push(t);
}
if (
y + ys + ys + yz < map.length &&
y + ys + ys + yz >= 0 &&
x + xs + xs + xz < map.length &&
x + xs + xs + xz >= 0
)
if (map[y + ys + ys + yz][x + xs + xs + xz] * c <= 0) {
var t1 = [];
t1[0] = y + ys + ys + yz;
t1[1] = x + xs + xs + xz;
tmap.push(t1);
}
}
}
var cc = 0;
if (c == 0) {
cc = 1;
} else {
cc = -1;
}
fastMa(tmap, y, x, -1, 0, cc);
fastMa(tmap, y, x, 1, 0, cc);
fastMa(tmap, y, x, 0, -1, cc);
fastMa(tmap, y, x, 0, 1, cc);
}
// 设置象的路径规则
function xiangMove(tmap, c, y, x) {
//c:0红 1黑
function fastXiang(tmap, y, x, yy, xx, c, cy) {
if (
y + yy * 2 < map.length &&
y + yy * 2 >= 0 &&
x + xx * 2 < map.length &&
x + xx * 2 >= 0
) {
if (cy(y + yy * 2))
if (map[y + yy][x + xx] == 0) {
if (map[y + yy * 2][x + xx * 2] * c <= 0) {
var t = [];
t[0] = y + yy * 2;
t[1] = x + xx * 2;
tmap.push(t);
}
}
}
}
var cc = 0;
if (c == 0) {
cc = 1;
} else {
cc = -1;
}
var ch;
if (c == 0) {
ch = function (y) {
return y > 4;
};
} else {
ch = function (y) {
return y < 5;
};
}
fastXiang(tmap, y, x, 1, 1, cc, ch);
fastXiang(tmap, y, x, 1, -1, cc, ch);
fastXiang(tmap, y, x, -1, 1, cc, ch);
fastXiang(tmap, y, x, -1, -1, cc, ch);
}
// 设置士的路径规则
function shiMove(tmap, c, y, x) {
//c:0红 1黑
function fastShi(tmap, y, x, yy, xx, c, cc) {
if (cc(y + yy)) {
if (x + xx >= 3 && x + xx <= 5) {
if (map[y + yy][x + xx] * c <= 0) {
var t = [];
t[0] = y + yy;
t[1] = x + xx;
tmap.push(t);
}
}
}
}
var cf;
var cc = 0;
if (c == 0) {
cc = 1;
cf = function (y) {
return y >= 7 && y <= 9;
};
} else {
cf = function (y) {
return y >= 0 && y <= 2;
};
cc = -1;
}
fastShi(tmap, y, x, 1, 1, cc, cf);
fastShi(tmap, y, x, -1, 1, cc, cf);
fastShi(tmap, y, x, 1, -1, cc, cf);
fastShi(tmap, y, x, -1, -1, cc, cf);
}
// 设置将和帅的路径规则
function JSMove(tmap, c, y, x) {
function fastJS(tmap, y, x, yy, xx, c, cc) {
if (cc(y + yy)) {
if (x + xx >= 3 && x + xx <= 5) {
if (map[y + yy][x + xx] * c <= 0) {
var t = [];
t[0] = y + yy;
t[1] = x + xx;
tmap.push(t);
}
}
}
}
var cf;
var cc = 0;
if (c == 0) {
cc = 1;
cf = function (y) {
return y >= 7 && y <= 9;
};
} else {
cf = function (y) {
return y >= 0 && y <= 2;
};
cc = -1;
}
fastJS(tmap, y, x, 1, 0, cc, cf);
fastJS(tmap, y, x, -1, 0, cc, cf);
fastJS(tmap, y, x, 0, -1, cc, cf);
fastJS(tmap, y, x, 0, 1, cc, cf);
if (c == 0) {
for (var q = y - 1; q < map.length && q >= 0; q--) {
if (map[q][x] == 0) {
continue;
}
if (map[q][x] == -7) {
var t = [];
t[0] = q;
t[1] = x;
tmap.push(t);
} else break;
}
} else {
for (var q = y + 1; q < map.length && q >= 0; q++) {
if (map[q][x] == 0) {
continue;
}
if (map[q][x] == 7) {
var t = [];
t[0] = q;
t[1] = x;
tmap.push(t);
} else break;
}
}
}

109
js/OnDoing.js Normal file
View File

@@ -0,0 +1,109 @@
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) {
if (OnChoseNow) {
for (var q = 0; q < moveList.length; q++) {
if (moveList[q][0] == j && moveList[q][1] == i) {
move(nowChoseC[0], nowChoseC[1], j, i);
break;
}
}
}
cleanSt();
}

250
js/Show.js Normal file
View File

@@ -0,0 +1,250 @@
function LoadGround() {
//创建加载场景
var g = "";
// 使用循环将棋盘的样式结构遍历出来，添加到dom节点树
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>";
}
}
// 获取dom id space，调用jq中的html方法并将参数g传入
$("#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 case 判断当前map集合中棋子的名称
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;
}
// 循环遍历棋子，渲染其dom结构和样式
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) {
// 添加棋子被选中、移动、吃子等时的样式
// 获取id cs，并进行字符串的拼接
var o = $("#CS" + j + "-" + i);
if (t == 0) {
//当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) {
// 该函数主要是根据棋子的坐标来判断棋子是否被吃掉以及控制棋子的移动
// 它主要有5个形参，其中有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]
);
console.log(getCText(j, i));
/*
getCText是一个函数，这个函数中有两个形参，其中j代表棋子的中文名，i代表棋子的英文名
这个函数的返回值是一个数组，每当有棋子被吃掉时该函数就会触发 值的格式为 ['马', 'MB']
前面的马是被吃棋子名称，后面的’MB‘代表被吃的是黑子，如果是‘MR’则代表被吃的是红子。
*/
/*
根据这个函数的返回值中的棋子名称来判断哪方为胜利方并调用js中的刷新方法，来结束游戏
*/
if (getCText(j, i)[0] === "帅") {
// 如果getCText的返回值为“帅”则可以判断出黑子的“帅”被吃掉了
alert("红子获胜！");
// 弹窗提示用户红字胜出
location.reload();
// 刷新整个网页
console.error("游戏结束");
// 打印日志
} else if (getCText(j, i)[0] === "将") {
// 同上
alert("黑子获胜！");
location.reload();
console.error("游戏结束");
}
}
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;
// 该函数用于实现棋子被吃掉的效果
// 具体效果的实现是通过css来隐藏棋子从而达到看不到被吃掉的效果
$("#CS" + j + "-" + i + " section").css({
transform: "scale(0,0)",
// css中的transform中有scale缩放的属性，缩放为0时则可以达到隐藏的效果
});
setTimeout(function () {
move(y, x, j, i, true);
}, 700);
}

7
js/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long