Lixh1986
- 浏览: 1092011 次
-
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言，WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986：
Java并发编程：自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986：
http://win.51apps.com.cn/https: ...
temp -
ztwsl：
不错，支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai：
谢谢您能将知识精华汇编总结，让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23：
谢谢了，顶顶
struts2中的ValueStack学习
HTML5实现中国象棋游戏
http://www.w2bc.com/article/20596
http://www.html5tricks.com/html5-zgxq.html
https://gist.github.com/siongui/7958813
https://blog.csdn.net/itlwei/article/details/7635984
https://github.com/baxinfangkai/ChinaChess-html5
-
http://www.w2bc.com/article/20596
http://www.html5tricks.com/html5-zgxq.html
https://gist.github.com/siongui/7958813
https://blog.csdn.net/itlwei/article/details/7635984
https://github.com/baxinfangkai/ChinaChess-html5
<!DOCTYPE HTML>
<html>
<head>
<meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" />
<title> 象棋 </title>
<style>
canvas.middle {
border: 1 px solid# dddddd;
cursor: crosshair;
</style>
</head>
<body>
<canvas width = "600px" height = "600px" id = "middle" class = "middle" ></canvas>
<script type = "text/javascript">
var mycanvas = document.getElementById("middle");
var stepCount = 0;
ctx = mycanvas.getContext("2d");
var layout = {
offsetWidth: 600, //canvas 中用于作为绘图面板的总宽度
offsetHeight: 600,
cell: 50,
padding: 30,
middleHeight: 80
};
var style = {
board: {
bgColor: "rgb(255,200,100)",
border: "rgb(100,255,200)",
lineWidth: 2,
middle_bound: {
fontColor: "rgba(0,255,0,1)",
fontSize: 18,
fontName: "Arial"
}
},
qizi: {
radius: 16, //半径
bgColor: "rgba(200,200,200,1)",
sideColor: "rgba(200,180,220,1)",
red_fontColor: "rgba(255,0,0,1)",
black_fontColor: "rgba(0,0,0,1)",
fontSize: 14,
fontName: "Arial",
goColor: "rgb(255,0,0)"
}
};
function getPosToPanel(xIndex, yIndex) { //获取棋盘上qizi[yIndex][xIndex]处棋子的中心位置
var temp = {
x: xIndex,
y: yIndex
};
temp.x = layout.padding + xIndex * layout.cell;
temp.y = layout.padding + yIndex * layout.cell;
if (yIndex >= 5) {
temp.y += layout.middleHeight - layout.cell;
}
return temp;
}
function getXY(evt) { // get click pos base on <canvas>, so(0,0) is at the left-top of <canvas>
var clientX = evt.clientX,
clientY = evt.clientY;
var temp = {
x: 0,
y: 0
};
var parObj = mycanvas;
var offset = mycanvas.offsetLeft;
while (parObj = parObj.offsetParent) {
offset += parObj.offsetLeft;
}
temp.x = clientX - offset;
var parObj = mycanvas;
var offset = mycanvas.offsetTop;
while (parObj = parObj.offsetParent) {
offset += parObj.offsetTop;
}
temp.y = clientY - offset;
return temp;
}
function getQiziClickIndex(evt) { //根据点击事件，返回点击范围所在处属于哪个索引的棋子，返回值为0-89,-1表示错误值
var temp = getXY(evt);
temp.x = temp.x - layout.padding;
temp.y = temp.y - layout.padding;
var i, j;
i = Math.round(temp.x / layout.cell);
if (temp.y <= layout.cell * 4 + style.qizi.radius) {
j = Math.round(temp.y / layout.cell); //求出距离第i行，j列最近
} else if (temp.y >= layout.cell * 4 + layout.middleHeight - style.qizi.radius) { //在楚河汉界的下方
j = Math.round((temp.y - (layout.cell * 4 + layout.middleHeight)) / layout.cell) + 5;
} else {
return -1;
}
if (i >= 9 || j >= 10 || i < 0 || j < 0) {
return -1;
}
var pos = getPosToPanel(i, j);
pos.x -= layout.padding;
pos.y -= layout.padding;
if (Math.pow(temp.x - pos.x, 2) + Math.pow(temp.y - pos.y, 2) < style.qizi.radius * style.qizi.radius) { //在棋子范围内
return i + j * 9;
}
return -1; // 不在棋子范围内
}
var qiziIndex = new Array(90);
var qiziyanse = new Array(90);
function initQiziArray() {
for (var i = 0; i < qiziIndex.length; ++i) {
qiziIndex[i] = "";
qiziyanse[i] = 0; //-1 red, 1 black, 0 none
}
qiziIndex[0] = qiziIndex[8] = "车";
qiziIndex[1] = qiziIndex[7] = "马";
qiziIndex[2] = qiziIndex[6] = "相";
qiziIndex[3] = qiziIndex[5] = "士";
qiziIndex[4] = "将";
qiziIndex[19] = qiziIndex[25] = "炮";
qiziIndex[27] = qiziIndex[29] = qiziIndex[31] = qiziIndex[33] = qiziIndex[35] = "兵";
qiziyanse[0] = qiziyanse[8] = qiziyanse[1] = qiziyanse[7] = qiziyanse[2] = qiziyanse[6] = qiziyanse[3] = qiziyanse[5] = qiziyanse[4] = qiziyanse[19] = qiziyanse[25] = qiziyanse[27] = qiziyanse[29] = qiziyanse[31] = qiziyanse[33] = qiziyanse[35] = 1;
qiziIndex[81] = "车";
qiziIndex[89] = "车";
qiziIndex[82] = "马";
qiziIndex[88] = "马";
qiziIndex[83] = "相";
qiziIndex[87] = "相";
qiziIndex[84] = qiziIndex[86] = "士";
qiziIndex[85] = "将";
qiziIndex[64] = "炮";
qiziIndex[70] = "炮";
qiziIndex[54] = qiziIndex[56] = qiziIndex[58] = qiziIndex[60] = qiziIndex[62] = "兵";
qiziyanse[81] = qiziyanse[89] = qiziyanse[82] = qiziyanse[88] = qiziyanse[83] = qiziyanse[87] = qiziyanse[84] = qiziyanse[85] = qiziyanse[86] = qiziyanse[64] = qiziyanse[70] = qiziyanse[54] = qiziyanse[56] = qiziyanse[58] = qiziyanse[60] = qiziyanse[62] = -1;
//qiziIndex[10] = "相";qiziyanse[10]=1;
}
initQiziArray();
function drawQizi(name, index, red_black) { //在指定的棋子位置，画出指定的棋子
if (red_black != -1 && red_black != 1 || index > 89 || index < 0) {
return;
}
var pos = getPosToPanel(index % 9, Math.floor(index / 9));
var x = pos.x;
var y = pos.y;
ctx.fillStyle = style.qizi.bgColor; //定义演示
ctx.strokeStyle = style.qizi.sideColor;
ctx.lineWidth = style.board.lineWidth;
ctx.beginPath(); //从新开始画，防止冲突重叠
ctx.arc(x, y, style.qizi.radius, Math.PI * 0, Math.PI * 2, true); //x坐标，y坐标，直径，始，终，时针方向
ctx.closePath(); //结束画布，防止冲突重叠
ctx.fill(); //结束渲染
ctx.font = "Normal " + style.qizi.fontSize + "px " + style.qizi.fontName;
ctx.fillStyle = ((red_black == -1) ? style.qizi.red_fontColor : style.qizi.black_fontColor); //定义演示
ctx.fillText(name, x, y);
ctx.stroke();
qiziyanse[index] = red_black;
qiziIndex[index] = name;
}
function drawChess() { //在棋盘上画出所有棋子
var i = 0;
for (i = 0; i < 90; ++i) {
drawQizi(qiziIndex[i], i, qiziyanse[i]);
}
}
function canJump(srcIndex, dstIndex) { // 判断srcIndex的棋子是否可以吃掉dstIndex的棋子,或者srcIndex 是否可以跳到dstIndex处
if (srcIndex < 0 || srcIndex >= 90 || dstIndex < 0 || dstIndex >= 90 //棋子不在棋盘内
||
qiziyanse[srcIndex] == qiziyanse[dstIndex] || qiziyanse[srcIndex] == 0 ||
qiziyanse[srcIndex] == -1 && stepCount % 2 == 1 || qiziyanse[srcIndex] == 1 && stepCount % 2 == 0) { //空子或者同色棋子不可以发生 吃子或走棋 行为
return false;
}
var xIndex = {};
var yIndex = {};
xIndex.src = srcIndex % 9;
xIndex.dst = dstIndex % 9;
yIndex.src = Math.floor(srcIndex / 9);
yIndex.dst = Math.floor(dstIndex / 9);
switch (qiziIndex[srcIndex]) {
case "车":
var existMiddleQizi = false;
var increase = 0;
if (xIndex.src == xIndex.dst) {
increase = 9;
} else if (yIndex.src == yIndex.dst) {
increase = 1;
}
if (increase > 0) {
var min = srcIndex,
max = dstIndex;
if (srcIndex > dstIndex) {
min = dstIndex;
max = srcIndex;
}
for (var i = min + increase; i < max; i += increase) {
if (qiziyanse[i] != 0) {
existMiddleQizi = true;
break;
}
}
return !existMiddleQizi;
} else {
return false;
}
case "马":
return Math.abs(xIndex.src - xIndex.dst) * Math.abs(yIndex.src - yIndex.dst) == 2 &&
(Math.abs(xIndex.src - xIndex.dst) == 1 && qiziIndex[xIndex.src + (yIndex.src + yIndex.dst) / 2 * 9] == "" || Math.abs(yIndex.src - yIndex.dst) == 1 && qiziIndex[yIndex.src * 9 + (xIndex.src + xIndex.dst) / 2 % 9] == ""); //成 ”日" 且不能 别着 马腿
case "炮":
var min = srcIndex,
max = dstIndex;
var increase = 0;
if (xIndex.src == xIndex.dst) {
increase = 9;
} else if (yIndex.src == yIndex.dst) {
increase = 1;
} else {
return false;
}
var middleQiziCount = 0;
if (srcIndex > dstIndex) {
min = dstIndex;
max = srcIndex;
}
for (var i = min + increase; i < max && middleQiziCount < 2; i += increase) {
if (qiziyanse[i] != 0) {
++middleQiziCount;
}
}
return qiziyanse[srcIndex] != qiziyanse[dstIndex] && qiziyanse[dstIndex] != 0 && middleQiziCount == 1 || qiziyanse[dstIndex] == 0 && middleQiziCount == 0;
case "兵":
case "卒":
return Math.abs(xIndex.dst - xIndex.src) == 1 && yIndex.src == yIndex.dst && (yIndex.src - 4.5) * qiziyanse[srcIndex] > 0 ||
xIndex.src == xIndex.dst && qiziyanse[srcIndex] * (dstIndex - srcIndex) == 9;
case "相":
case "象":
return Math.abs(xIndex.src - xIndex.dst) == 2 && Math.abs(yIndex.src - yIndex.dst) == 2 && qiziIndex[(srcIndex + dstIndex) >> 1] == "";
case "将":
case "帅":
return (Math.abs(xIndex.src - xIndex.dst) + Math.abs(yIndex.src - yIndex.dst) == 1) && Math.abs(xIndex.dst - 4) <= 1 &&
(qiziyanse[srcIndex] == -1 ? Math.abs(yIndex.dst - 8) <= 1 : Math.abs(yIndex.dst - 1) <= 1);
case "士":
return (Math.abs(xIndex.src - xIndex.dst) == 1 && Math.abs(yIndex.src - yIndex.dst) == 1) && Math.abs(xIndex.dst - 4) <= 1 &&
(qiziyanse[srcIndex] == -1 ? Math.abs(yIndex.dst - 8) <= 1 : Math.abs(yIndex.dst - 1) <= 1);
default:
return false;
}
}
function drawChessPanel() {
// draw bgColor
ctx.fillStyle = style.board.bgColor;
ctx.beginPath();
ctx.rect(0, 0, layout.offsetWidth, layout.offsetHeight);
ctx.closePath();
ctx.fill();
// prepare to draw lines
var p = layout.padding,
s = layout.cell,
w = layout.cell * 8,
h = layout.cell * 4;
m = layout.middleHeight;
ctx.strokeStyle = style.board.border;
ctx.lineWidth = style.board.lineWidth;
ctx.beginPath();
// horizonal lines
for (var i = 0; i <= 4; i++) {
ctx.moveTo(p, s * i + p + 0.5);
ctx.lineTo(w + p, s * i + p + 0.5);
}
var fixL = p + h + m;
for (var i = 5; i <= 9; i++) {
ctx.moveTo(p, s * (i - 5) + fixL + 0.5);
ctx.lineTo(w + p, s * (i - 5) + fixL + 0.5);
}
// vertical lines
ctx.moveTo(p + 0.5, p);
ctx.lineTo(p + 0.5, 2 * h + m + p);
ctx.moveTo(w + p + 0.5, p);
ctx.lineTo(w + p + 0.5, 2 * h + m + p);
for (var i = 1; i < 8; i++) {
ctx.moveTo(s * i + p + 0.5, p);
ctx.lineTo(s * i + p + 0.5, s * 4 + p);
ctx.moveTo(s * i + p + 0.5, h + p + m);
ctx.lineTo(s * i + p + 0.5, h * 2 + m + p);
} //"X" shapes
ctx.moveTo(s * 3 + p, p);
ctx.lineTo(s * 5 + p, s * 2 + p);
ctx.moveTo(s * 5 + p, 0 + p);
ctx.lineTo(s * 3 + p + 0.5, s * 2 + p);
ctx.moveTo(s * 3 + p + 0.5, h + s * 2 + m + p);
ctx.lineTo(s * 5 + p + 0.5, h + s * 4 + m + p);
ctx.moveTo(s * 5 + p + 0.5, h + s * 2 + m + p);
ctx.lineTo(s * 3 + p, h + s * 4 + m + p);
ctx.closePath();
ctx.stroke();
ctx.font = "Normal " + style.board.middle_bound.fontSize + "px " + style.board.middle_bound.fontName;
ctx.fillStyle = style.board.middle_bound.fontColor;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("楚河", p + s * 2, p + s * 4 + layout.middleHeight / 2);
ctx.fillText("漢界", p + s * 6, p + s * 4 + layout.middleHeight / 2);
ctx.stroke();
}
drawChessPanel();
drawChess();
function drawClearQizi(xIndex, yIndex) {
var pos;
pos = getPosToPanel(xIndex, yIndex);
var old = {};
old.bgColor = style.qizi.bgColor; //保存棋子的样式设置
old.sideColor = style.qizi.sideColor;
old.red_fontColor = style.qizi.red_fontColor;
old.black_fontColor = style.qizi.black_fontColor;
old.radius = style.qizi.radius;
style.qizi.bgColor = style.board.bgColor; //使用背景设置
style.qizi.sideColor = style.board.bgColor;
style.qizi.red_fontColor = style.board.bgColor;
style.qizi.black_fontColor = style.board.bgColor;
style.qizi.radius = style.qizi.radius + 1; // 还没搞清为何这个地方要增加一个才行
drawQizi("", xIndex + yIndex * 9, qiziyanse[yIndex * 9 + xIndex]); //用背景色的圆恢复棋盘颜色
style.qizi.bgColor = old.bgColor; //还原棋子的样式设置
style.qizi.sideColor = old.sideColor;
style.qizi.red_fontColor = old.red_fontColor;
style.qizi.black_fontColor = old.black_fontColor;
style.qizi.radius = old.radius;
ctx.strokeStyle = style.board.border;
ctx.lineWidth = style.board.lineWdith;
ctx.beginPath();
var lineTop = Math.max(pos.y - style.qizi.radius - style.board.lineWidth, layout.padding);
var lineBottom = Math.min(pos.y + style.qizi.radius + style.board.lineWidth, layout.middleHeight + 8 * layout.cell + layout.padding);
if (yIndex == 4) { // 楚河汉界 的边界棋子绘制
lineBottom = layout.padding + layout.cell * 4;
if (xIndex == 0 || xIndex == 8) {
lineBottom += style.qizi.radius + style.board.lineWidth;
}
} else if (yIndex == 5) {
lineTop = layout.padding + layout.cell * 4 + layout.middleHeight;
if (xIndex == 0 || xIndex == 8) {
lineTop -= style.qizi.radius + style.board.lineWidth;
}
}
ctx.moveTo(pos.x + 0.5, lineTop);
ctx.lineTo(pos.x + 0.5, lineBottom);
ctx.moveTo(Math.max(pos.x - style.qizi.radius - style.board.lineWidth, layout.padding), pos.y + 0.5);
ctx.lineTo(Math.min(pos.x + style.qizi.radius + style.board.lineWidth, layout.padding + layout.cell * 8), pos.y + 0.5);
//绘制将帅的斜线
var r_sqrt2 = Math.ceil(style.qizi.radius / Math.sqrt(2)) + 1;
if (xIndex == 3 && (yIndex == 0 || yIndex == 7)) {
ctx.moveTo(pos.x, pos.y);
ctx.lineTo(pos.x + r_sqrt2, pos.y + r_sqrt2);
} else if (xIndex == 3 && (yIndex == 2 || yIndex == 9)) {
ctx.moveTo(pos.x, pos.y);
ctx.lineTo(pos.x + r_sqrt2, pos.y - r_sqrt2);
} else if (xIndex == 4 && (yIndex == 1 || yIndex == 8)) {
ctx.moveTo(pos.x, pos.y);
ctx.lineTo(pos.x - r_sqrt2, pos.y - r_sqrt2);
ctx.moveTo(pos.x, pos.y);
ctx.lineTo(pos.x + r_sqrt2, pos.y - r_sqrt2);
ctx.moveTo(pos.x, pos.y);
ctx.lineTo(pos.x - r_sqrt2, pos.y + r_sqrt2);
ctx.moveTo(pos.x, pos.y);
ctx.lineTo(pos.x + r_sqrt2, pos.y + r_sqrt2);
} else if (xIndex == 5 && (yIndex == 0 || yIndex == 7)) {
ctx.moveTo(pos.x, pos.y);
ctx.lineTo(pos.x - r_sqrt2, pos.y + r_sqrt2);
} else if (xIndex == 5 && (yIndex == 2 || yIndex == 9)) {
ctx.moveTo(pos.x, pos.y);
ctx.lineTo(pos.x - r_sqrt2, pos.y - r_sqrt2);
}
//结束将帅斜线的绘制
//显示图形
ctx.closePath();
ctx.stroke();
qiziIndex[yIndex * 9 + xIndex] = ""; //更新棋盘
qiziyanse[yIndex * 9 + xIndex] = 0;
}
function drawFourCross(xIndex, yIndex, color) {
var oldStyle = ctx.strokeStyle;
color ? ctx.strokeStyle = color : ctx.strokeStyle = style.qizi.goColor;
var pos = getPosToPanel(xIndex, yIndex);
ctx.beginPath();
ctx.moveTo(pos.x - style.qizi.radius, pos.y - style.qizi.radius);
ctx.lineTo(pos.x - style.qizi.radius, pos.y - style.qizi.radius / 2);
ctx.moveTo(pos.x - style.qizi.radius, pos.y - style.qizi.radius);
ctx.lineTo(pos.x - style.qizi.radius / 2, pos.y - style.qizi.radius);
ctx.moveTo(pos.x - style.qizi.radius, pos.y + style.qizi.radius);
ctx.lineTo(pos.x - style.qizi.radius, pos.y + style.qizi.radius / 2);
ctx.moveTo(pos.x - style.qizi.radius, pos.y + style.qizi.radius);
ctx.lineTo(pos.x - style.qizi.radius / 2, pos.y + style.qizi.radius);
ctx.moveTo(pos.x + style.qizi.radius, pos.y - style.qizi.radius);
ctx.lineTo(pos.x + style.qizi.radius / 2, pos.y - style.qizi.radius);
ctx.moveTo(pos.x + style.qizi.radius, pos.y - style.qizi.radius);
ctx.lineTo(pos.x + style.qizi.radius, pos.y - style.qizi.radius / 2);
ctx.moveTo(pos.x + style.qizi.radius, pos.y + style.qizi.radius);
ctx.lineTo(pos.x + style.qizi.radius, pos.y + style.qizi.radius / 2);
ctx.moveTo(pos.x + style.qizi.radius, pos.y + style.qizi.radius);
ctx.lineTo(pos.x + style.qizi.radius / 2, pos.y + style.qizi.radius);
ctx.closePath();
ctx.stroke();
ctx.strokeStyle = oldStyle;
}
function drawLastGo(xIndex, yIndex, color) {
//drawClearQizi(xIndex, yIndex);
drawFourCross(xIndex, yIndex);
//drawFourCross(xIndex, yIndex, "rgb(0,0,255)");
}
function clearLastGo(xIndex, yIndex) {
drawFourCross(xIndex, yIndex, style.board.bgColor);
}
var isDown = false;
var timer = null;
var g_num_down = -1;
var g_num_up = -1;
mycanvas.onmousedown = function(evt) {
g_num_down = getQiziClickIndex(evt);
if (g_num_down != -1) {
var oldColor = style.qizi.bgColor;
style.qizi.bgColor = "rgba(200,170,190,1.0)";
drawQizi(qiziIndex[g_num_down], g_num_down, qiziyanse[g_num_down]);
style.qizi.bgColor = oldColor;
}
isDown = true;
};
var g_last_go = -1;
var g_last_go2 = -1;
mycanvas.onmouseup = function(evt) {
if (!isDown) {
return;
}
g_num_up = getQiziClickIndex(evt);
if (g_num_up != -1 && g_num_down != -1 && canJump(g_num_down, g_num_up)) {
if (g_last_go != -1) {
clearLastGo(g_last_go % 9, Math.floor(g_last_go / 9));
}
if (g_last_go2 != -1) {
clearLastGo(g_last_go2 % 9, Math.floor(g_last_go2 / 9));
}
var oldColor = style.qizi.bgColor;
var whowin = 0;
if (qiziIndex[g_num_up] == "将") {
whowin = qiziyanse[g_num_down];
}
drawQizi(qiziIndex[g_num_down], g_num_up, qiziyanse[g_num_down]);
style.qizi.bgColor = oldColor;
drawClearQizi(g_num_down % 9, Math.floor(g_num_down / 9));
g_last_go = g_num_down;
g_last_go2 = g_num_up;
drawLastGo(g_num_down % 9, Math.floor(g_num_down / 9));
drawFourCross(g_num_up % 9, Math.floor(g_num_up / 9));
stepCount += 1;
if (whowin == -1) alert("红方胜利");
else if (whowin == 1) alert("黑方胜利");
} else if (g_num_down != -1) {
drawQizi(qiziIndex[g_num_down], g_num_down, qiziyanse[g_num_down]);
}
isDown = false;
}
</script>
</body>
</html>
-
分享到：
发表评论
-
Javascript 测试框架之 隐式声明 之 describe
2019-06-25 15:26 2449为什么使用 javascript 测试框架时，没有显式导入 d ... -
JavaScript之ECMAScript6新特性之_03_箭头函数（Arrow Function）
2018-01-25 13:46 1052一、简介 箭头函数（Arrow Function）是 ES6 ... -
JavaScript之ECMAScript6新特性之_02_线程异步阻塞: Promise, Async / await
2018-01-12 16:51 2255刚出来不久的 ES8 包含了 async 函数，它的出现，终于 ... -
JavaScript之ECMAScript6新特性之_01_开篇
2017-08-17 02:54 561点此查看全部： http://es6-features.org ... -
jQuery Versions - browser support
2017-08-12 04:19 1553jQuery 3.2.1 Support Deskto ... -
JavaScript之跨域请求解决方案
2017-06-07 11:03 3897浏览器处于安全原因，在使用 Ajax 进行请求访问时，不允许跨 ... -
JavaScript之 25 道面试题
2017-04-17 17:05 91325 Essential JavaScript Intervi ... -
JavaScript小应用之分页算法
2017-03-16 12:56 629效果图： function getPagina ... -
jQuery之empty() VS. remove()
2017-03-16 10:32 686jQuery empty() vs remove() Wh ... -
jQuery之 prop() VS. attr()
2017-03-14 16:43 624attr() 用于自定义属性，id ； prop() 用于 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 619Jquery mouseenter() vs mouseove ... -
javascript之JS操作iframe
2017-02-28 14:56 2135JS操作iframe 1. 获得iframe的w ... -
javascript之面向对象编程之原型继承
2017-01-02 15:34 1043前文讲到“属性继承” ... -
HTML5之Cookie,localStorage 与 sessionStorage
2016-12-22 18:35 807详说 Cookie, LocalStorage 与 ... -
jquery之live(), delegate(), on() 方法
2016-11-26 23:48 882通过下面的一个实例理解 jQuery 的 live(), de ... -
javascript之小应用：网页在线聊天
2016-11-08 11:48 4213概览 这款使用 PHP 和 javascript 搭建的 ... -
javascript之编程序题目
2016-11-06 17:30 10031. 判断两个字符串是否：字母相同切长度相同（空格不算）。 ... -
javascript之面向对象编程之属性继承
2016-10-23 21:09 834函数继承可以分为两种：1、继承其 this 属性 2、继承其 ... -
javascript 之 undefined
2016-08-12 11:01 656一、用法 undefined 关键字有两种用法： 1. 如 ... -
javascript之 == vs ===
2016-06-12 15:59 623一、Comparison Overview 1. Speed ...
相关推荐
一个经典的基于html5的开发的象棋游戏，游戏效果非常好，而且代码非常典型、独到，非常值得推荐
超强的javascript html5 下的游戏 得在支持Html5的浏览器下运行
今天这款基于HTML5技术的中国象棋游戏非常有特色，我们不仅可以选择中国象棋的游戏难度，而且可以切换棋盘的样式。程序写累了，喝上一杯咖啡，和电脑对弈几把吧，相信这HTML5中国象棋游戏的实现算法你比较清楚，可以...
毕业设计-基于JavaScript+HTML5实现中国象棋AI博弈游戏源码+项目说明.zip （一）课题内容 建议用JavaScript+HTML5实现中国象棋游戏。主要功能为游戏界面显示、落子的响应以及判定胜负统计、用websocket实现ai算法的...
基于html5开发的中国象棋游戏，人机AI对战，含源码可二次开发
说明：中国象棋游戏，点击新手或者初级即可开始游戏，棋盘可放大，手机电脑均可玩，源码完整，代码注释清晰。 使用场景：HTML大作业、个人网站、网页模板、游戏网站等 适用人群：初学者、资深专家均可
html5开发
基于html5 的中国象棋源码,javascript写的有注释，很详细
HTML5中国象棋网页游戏代码基于jquery.1.10.2.min.js制作，鼠标点击棋子操作游戏。中国象棋是起源于中国的一种棋戏，属于二人对抗性游戏的一种，在中国有着悠久的历史，由于用具简单，趣味性强，成为流行极为广泛的...
基于HTML5 / canvas和TypeScript的具有AI的中国象棋项目。 这是一个。 有几个搜索引擎。 一个非常navie algorithom是minimax搜索 negamax ，这是实现negamax的常用方法 带有alpha-beta修剪的minimax搜索 带有...
微思象棋播放器是一个基于JQuery开发的简单迷你并且高效的在线中国象棋棋谱播放器，基于网络访问并且兼容IE 7.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+，并对IE 6.0提供部分支持。微思象棋播放器完全...
微思象棋播放器是一个基于jQuery开发的简单迷你并且高效的在线中国象棋棋谱播放器，基于网络访问并且兼容IE 7.0 ,Firefox 3.0 ,Opera 9.6 ,Chrome 1.0 ,Safari 3.22 ，并对IE 6.0提供部分支持。微思象棋播放器完全...
之前我们分享过很多不错的HTML5游戏，大部分的效果都非常炫酷，比如HTML5/CSS3简易版俄罗斯方块游戏就非常经典，今天要介绍的是一款基于HTML5的赣极方棋游戏，这有点像斗兽棋和中国象棋的结合，可以根据动物之间的...
今天要介绍的是一款基于HTML5的赣极方棋游戏，这有点像斗兽棋和中国象棋的结合，可以根据动物之间的实力来吃掉对方。
2012-06-11 21:42 4,478,005 中国象棋C++(1).rar 2012-06-11 21:42 4,478,005 中国象棋C++.rar 2012-06-11 21:10 18,808 为智能电子钟添加阴历计时功能.rar 2012-06-11 21:35 38,896 二叉树的遍历.zip 2012-06-11 21...