Lixh1986
- 浏览: 1111154 次
-
文章分类
- 全部博客 (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 2578为什么使用 javascript 测试框架时，没有显式导入 d ... -
JavaScript之ECMAScript6新特性之_03_箭头函数（Arrow Function）
2018-01-25 13:46 1116一、简介 箭头函数（Arrow Function）是 ES6 ... -
JavaScript之ECMAScript6新特性之_02_线程异步阻塞: Promise, Async / await
2018-01-12 16:51 2322刚出来不久的 ES8 包含了 async 函数，它的出现，终于 ... -
JavaScript之ECMAScript6新特性之_01_开篇
2017-08-17 02:54 602点此查看全部： http://es6-features.org ... -
jQuery Versions - browser support
2017-08-12 04:19 1610jQuery 3.2.1 Support Deskto ... -
JavaScript之跨域请求解决方案
2017-06-07 11:03 3967浏览器处于安全原因，在使用 Ajax 进行请求访问时，不允许跨 ... -
JavaScript之 25 道面试题
2017-04-17 17:05 95025 Essential JavaScript Intervi ... -
JavaScript小应用之分页算法
2017-03-16 12:56 663效果图： function getPagina ... -
jQuery之empty() VS. remove()
2017-03-16 10:32 720jQuery empty() vs remove() Wh ... -
jQuery之 prop() VS. attr()
2017-03-14 16:43 656attr() 用于自定义属性，id ； prop() 用于 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 653Jquery mouseenter() vs mouseove ... -
javascript之JS操作iframe
2017-02-28 14:56 2191JS操作iframe 1. 获得iframe的w ... -
javascript之面向对象编程之原型继承
2017-01-02 15:34 1116前文讲到“属性继承” ... -
HTML5之Cookie,localStorage 与 sessionStorage
2016-12-22 18:35 842详说 Cookie, LocalStorage 与 ... -
jquery之live(), delegate(), on() 方法
2016-11-26 23:48 925通过下面的一个实例理解 jQuery 的 live(), de ... -
javascript之小应用：网页在线聊天
2016-11-08 11:48 4293概览 这款使用 PHP 和 javascript 搭建的 ... -
javascript之编程序题目
2016-11-06 17:30 10501. 判断两个字符串是否：字母相同切长度相同（空格不算）。 ... -
javascript之面向对象编程之属性继承
2016-10-23 21:09 885函数继承可以分为两种：1、继承其 this 属性 2、继承其 ... -
javascript 之 undefined
2016-08-12 11:01 703一、用法 undefined 关键字有两种用法： 1. 如 ... -
javascript之 == vs ===
2016-06-12 15:59 652一、Comparison Overview 1. Speed ...
相关推荐
在这个基于HTML5 Canvas的中国象棋游戏中，开发者利用Canvas API来实现棋盘的绘制、棋子的动态移动以及游戏逻辑的处理。 1. **Canvas API基础** - Canvas是一个可编程的画布，允许开发者通过JavaScript代码来绘制...
【标题】：“基于HTML5的象棋游戏” HTML5作为现代网页开发的主流技术，以其强大的功能和跨平台兼容性，极大地推动了网络应用的发展。在这个“基于HTML5的象棋游戏”中，开发者充分利用了HTML5的新特性，构建了一个...
在这个"html5实现的中国象棋游戏.zip"压缩包中，包含了实现一个完整中国象棋游戏所需的各类文件，如HTML文档、JavaScript脚本、图像资源以及CSS样式表。 首先，`index.html`是网页的主入口文件，它定义了网页的基本...
【HTML5实现的中国象棋游戏】是一种基于现代网页技术构建的在线娱乐应用，它利用HTML5的强大功能，为用户提供了一种无需下载安装即可在浏览器上玩的棋类游戏体验。这种游戏通常由HTML、CSS和JavaScript这三种核心...
HTML5中国象棋源码是一个基于现代Web技术实现的在线中国象棋游戏，它具有人机对战功能，允许玩家与计算机智能进行对局。这个源码是开发者使用HTML5、CSS3和JavaScript等前端技术构建的，展示了如何在浏览器环境中...
【中国象棋HTML5源码】是一个基于HTML5技术实现的在线中国象棋游戏项目，主要涉及前端开发，利用HTML、CSS和JavaScript等技术构建。这个项目为学习者提供了了解和实践Web游戏开发的实例，同时也展示了HTML5在游戏...
HTML5中国象棋游戏是一款基于网页的在线对弈平台，主要特点是实现了人机对弈功能，用户可以在浏览器中直接体验。这款游戏利用了HTML5这一现代网页技术，使其具有跨平台兼容性和良好的用户体验。下面将详细阐述游戏的...
【作品名称】：基于HTML5实现的中国象棋对战游戏【毕业设计】 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：HTML5版...
HTML5中国象棋游戏源码是一个基于Web技术开发的在线象棋游戏，它利用了HTML5的先进技术，为用户提供了在网页上体验传统中国象棋的乐趣。HTML5是超文本标记语言的第五个版本，其核心特性包括离线存储、媒体元素、 ...
【标题】"h5_中国象棋游戏"是一款基于HTML5技术开发的在线中国象棋游戏，它将传统的中国象棋玩法与现代互联网技术相结合，为玩家提供了方便快捷的在线对战体验。这款游戏的设计和实现充分体现了HTML5的跨平台特性和...
【HTML5中国象棋游戏自定义难度】是一个基于Web技术实现的在线中国象棋游戏，主要运用了HTML5、jQuery、CSS等技术。这款游戏不仅提供了基础的棋盘界面和象棋规则，还允许用户根据自身水平调整游戏难度，包括新手水平...
HTML5小游戏——中国象棋是一种基于现代Web技术开发的在线娱乐项目，利用HTML5、CSS3和JavaScript等技术实现。这种小游戏无需安装任何插件，只需在支持HTML5的浏览器上运行，为用户提供了便捷的体验。下面我们将深入...
HTML5中国象棋游戏是一款基于HTML5技术和JavaScript编程语言开发的在线象棋应用程序。这款小游戏以其高度的交互性、流畅的动画效果和真实的对弈体验，吸引了许多爱好者的关注。HTML5作为现代网页开发的标准，提供了...
要实现完整的中国象棋游戏，还需要进一步的JavaScript逻辑，包括但不限于： - **落子规则**：检查棋子是否可以移动到目标位置，例如不能越子，兵只能前进，马走日，炮隔子打等。 - **吃子规则**：当棋子可以吃掉...
今天这款基于HTML5技术的中国象棋游戏非常有特色，我们不仅可以选择中国象棋的游戏难度，而且可以切换棋盘的样式。程序写累了，喝上一杯咖啡，和电脑对弈几把吧，相信这HTML5中国象棋游戏的实现算法你比较清楚，可以...
《基于HTML5技术的中国象棋游戏开发详解》 HTML5作为现代网页开发的核心技术，以其强大的功能和跨平台特性，极大地推动了网络应用的发展。本项目“中国象棋-html5.zip”便是一个典型的应用实例，它是一款基于HTML5...
HTML5中国象棋小游戏是一款基于Web技术开发的互动娱乐应用，它利用了HTML5、CSS3和JavaScript这三种核心技术来构建。在这个游戏中，用户可以选择不同的难度级别，包括简单、中等和困难，来体验中国象棋的魅力。同时...
毕业设计-基于JavaScript+HTML5实现中国象棋AI博弈游戏源码+项目说明.zip （一）课题内容 建议用JavaScript+HTML5实现中国象棋游戏。主要功能为游戏界面显示、落子的响应以及判定胜负统计、用websocket实现ai算法的...
HTML5网络版中国象棋游戏源码是一款基于HTML5、CSS3技术开发的在线对战游戏，它提供了用户友好的界面和流畅的游戏体验。这款源码的亮点在于其设计的美观性和专业性，以及走棋逻辑的精确性，使得游戏在网页上能够展现...
HTML5是中国象棋网页游戏开发中的重要技术，它极大地增强了网页的交互性和功能。JavaScript作为前端的主要编程语言，是实现游戏逻辑的关键。本项目提供的源码是一个可移动的HTML5象棋界面，允许用户在网页上进行象棋...