超级简单的纯js 象棋,看一遍你也会写

这是我第一次写游戏，也是随兴花了一下午写的，代码结构可能没有设计的很清晰，但是主要逻辑还是很清楚。这次利用了html5 canvas 画布效果，把棋盘，。棋子，动画写出

写任何东西，首先要知道它的组成部分。比如盖子，你得先准备好，沙子，水泥，钢筋，石砖，再打成地基再一层一层的盖

象棋游戏组成部分很简单。

棋盘: 有10 行 9列拼成的90个不同的坐标点,给棋子移动,棋盘事件捕捉，通过鼠标点击棋盘上面坐标，去定位点击在棋盘哪个位置

棋子:｛

基本属性：

颜色:红或黑

移动规则设定:例如如，马只能走日，相只能走田

棋子选择中状态下棋子形状变化

棋子当前坐标位置

｝

下面是代码:

<canvas id="xqCanvas"></canvas>

<script>
(function () {

that.bodys = [];

that.element = document.getElementById(id);
that.element.width = that.canvas.w;
that.element.height = that.canvas.h;
that.ctx = that.element.getContext("2d");

that.render();
},

render: function () {
this.bindevent();
},
drawQipan: function () {

var that = this, ctx = that.ctx, bodys = that.bodys
,

r = 9,
c = 8,
cellSize = that.qipan.cellSize,
w = cellSize * 8,
h = r * cellSize,
startX = (that.canvas.w - w) / 2,
startY = (that.canvas.h - h) / 2,
cX = 0,
cY = 0,
rX = 0,
rY = 0
;
ctx.beginPath();
ctx.lineWidth = that.qipan.lineWidth;
ctx.strokeStyle = that.qipan.strokeStyle;

that.qipan.w = w;
that.qipan.h = h;

that.startX = startX;
that.startY = startY;
that.radius = cellSize / 2;
that.maxR = r;
that.maxC = c;
for (var i = 0; i <= r; i++) {
cX = startX;
cY = startY + (i * cellSize);
ctx.moveTo(cX, cY);
ctx.lineTo(cX + w, cY);

bodys[i] = bodys[i] || [];
for (var k = 0; k <= c; k++) {

rX = startX + (k * cellSize);
rY = startY + (i * cellSize);

bodys[i][k] = bodys[i][k] || {};
bodys[i][k].x = rX;
bodys[i][k].y = rY;
bodys[i][k].r = i;
bodys[i][k].c = k;
//{
// x: rX,
// y: rY,
// r:i,
// c:k
//});
if (i == 4 && k != 0 && k != 8 || i == 9) {
continue;
}

ctx.moveTo(rX, cY);
ctx.lineTo(rX, rY + cellSize);
}

}
ctx.stroke();

ctx.restore();
var fontOffsetY = bodys[4][0].y + that.radius;
ctx.fillStyle = "#000";
ctx.font = "bold 40px Arial";
ctx.textBaseline = "middle";

ctx.fillText("汉", startX + cellSize, fontOffsetY);
ctx.fillText("界", startX + cellSize * 2, fontOffsetY);
ctx.fillText("楚", startX + cellSize * 5, fontOffsetY);
ctx.fillText("河", startX + cellSize * 6, fontOffsetY);
ctx.save();

ctx.beginPath();
ctx.strokeStyle = "#000";
ctx.lineWidth = 2;
ctx.moveTo(bodys[0][3].x, bodys[0][3].y);
ctx.lineTo(bodys[2][5].x, bodys[2][5].y);
ctx.moveTo(bodys[0][5].x, bodys[0][5].y);
ctx.lineTo(bodys[2][3].x, bodys[2][3].y);

ctx.moveTo(bodys[7][3].x, bodys[7][3].y);
ctx.lineTo(bodys[9][5].x, bodys[9][5].y);
ctx.moveTo(bodys[7][5].x, bodys[7][5].y);
ctx.lineTo(bodys[9][3].x, bodys[9][3].y);

ctx.stroke();

}
drawX(2, 1, [1, 1, 1, 1]);
drawX(2, 7, [1, 1, 1, 1]);

drawX(3, 0, [0, 1, 0, 1]);
drawX(3, 2, [1, 1, 1, 1]);
drawX(3, 4, [1, 1, 1, 1]);
drawX(3, 6, [1, 1, 1, 1]);
drawX(3, 8, [1, 0, 1, 0]);

drawX(7, 1, [1, 1, 1, 1]);
drawX(7, 7, [1, 1, 1, 1]);

drawX(6, 0, [0, 1, 0, 1]);
drawX(6, 2, [1, 1, 1, 1]);
drawX(6, 4, [1, 1, 1, 1]);
drawX(6, 6, [1, 1, 1, 1]);
drawX(6, 8, [1, 0, 1, 0]);

ctx.beginPath();
ctx.lineWidth = 5;
ctx.rect(startX - 5, startY - 5, w + 10, h + 10);
ctx.stroke();

}

,
renderQiJu: function (redBottom) {
var qiJu = this.qiJu = [
['车', '马', '相', '仕', '帅', '仕', '相', '马', '车'],
[],
['', '炮', '', '', '', '', '', '炮', ''],
['兵', '', '兵', '', '兵', '', '兵', '', '兵'],
[],
[],
['卒', '', '卒', '', '卒', '', '卒', '', '卒'],
['', '炮', '', '', '', '', '', '炮', ''],
[],
['車', '馬', '象', '士', '将', '士', '象', '馬', '車'],
];
this.bodys = [];
this.clearCanvas();
this.drawQipan();
this.redBottom = !!redBottom;
if (this.redBottom) {
qiJu.reverse();
}
this.drawQiJu(qiJu);
},
drawQiJu: function (qiJu) {
for (var i = 0; i < qiJu.length; i++) {
for (var k = 0; k < qiJu[i].length; k++) {
if (qiJu[i][k] != '') {
this.bodys[i][k].qizi = new QiZi(this, i, k, qiJu[i][k], (this.redBottom && i > 5 || this.redBottom == false && i < 5) ? true : false);

} else {
this.bodys[i][k].qizi = null;
}
}
}
},
clearCanvas: function () {
this.ctx.clearRect(0, 0, this.canvas.w, this.canvas.h);
},
resetQiJu: function () {

this.clearCanvas();
this.drawQipan();

this.eachBody(function (d) {
if (d.qizi) {
d.qizi.draw();
}
});

},
moveQizi: function (r, c, tr, tc) {
this.bodys[tr][tc].qizi = this.bodys[r][c].qizi;
this.bodys[r][c].qizi = null;
this.resetQiJu();

}
,
getPositions: function (e) {
var x = e.x, y = e.y;
if (e.layerX) {

x = e.layerX;
y = e.layerY;
} else {
x += document.body.scrollLeft;
y += document.body.scrollTop;

}

return { x: x, y: y };
},
check: function (x, y) {
var that = this,
minX = that.startX - that.radius,
minY = that.startY - that.radius,
maxX = that.startX + that.qipan.w + that.radius,
maxY = that.startY + that.qipan.h + that.radius
;

return x >= minX && x <= maxX && y >= minY && y <= maxY;
},

eachBody: function (handler) {
var bodys = this.bodys, len = bodys.length;

for (var i = 0; i < len; i++) {

for (var k = 0, len2 = bodys[i].length; k < len2; k++) {
if (handler(bodys[i][k], i, k) === true) {
return bodys[i][k];
}
}
}
return null;
},
findPos: function (x, y) {
var that = this, r = that.radius;
return this.eachBody(function (pos) {

// this.ctx.st
},
bindevent: function () {
var that = this;
that.qiziRedMove = true;
that.qiziSelected = false;
that.qiziCurrent = null;
this.element.addEventListener("click", function (e) {

var xy = that.getPositions(e);

if (that.check(xy.x, xy.y)) {
var pos = that.findPos(xy.x, xy.y);
if (pos != null) {

if (pos.qizi && pos.qizi.isred == that.qiziRedMove) {
that.resetQiJu();
that.qiziCurrent = pos.qizi;
that.qiziSelected = true;
pos.qizi.select();

return;
}

if (that.qiziSelected && that.qiziCurrent != null && that.qiziCurrent.moveTo(pos.r, pos.c)) {

that.qiziRedMove = !that.qiziRedMove;
that.qiziSelected = false;
}
}
}
});
that.showMess(that.messages.step1);

},
save: function () {
this.ctx.save();
},
restore: function () {
this.ctx.restore();
}
};
var QiZi = function (qipan, r, c, text, isred) {
this.text = text;
this.isred = isred;
this.ctx = qipan.ctx;
this.qipan = qipan;
this.r = r;
this.c = c;

this.draw();
var that = this, maxR = that.qipan.maxR, maxC = that.qipan.maxC;
this.checkstep = (function () {

if (text == "兵" || text == "卒") {
if (that.r > 4) {

return function (r, c) {
return this.r > 4 && (this.r - 1) == r && this.c == c
|| this.r <= 4 && this.r == r && ((this.c - 1) == c || (this.c + 1) == c)
|| this.r <= 4 && (this.r - 1) == r && this.c == c;
}

} else {
return function (r, c) {
return this.r < 5 && (this.r + 1) == r && this.c == c || this.r >= 5 && this.r == r && ((this.c - 1) == c || (this.c + 1) == c) || this.r >= 5 && (this.r + 1) == r && this.c == c;
}
}

} else if (text == "炮") {
return function (r, c) {
if (this.r != r && this.c != c) {
return false;
}
var bodys = this.qipan.bodys, step = this.getMoveRange(r, c);

return bodys[r][c].qizi != null && step == 1 || bodys[r][c].qizi == null && step == 0;

}
} else if (text == "车" || text == "車") {
return function (r, c) {
if (this.r != r && this.c != c) {
return false;
}
return this.getMoveRange(r, c) == 0;

}
} else if (text == "马" || text == "馬") {
return function (r, c) {

return this.r - 2 == r && this.c - 1 == c && this.isEnemyOrEmpty(this.r - 1, this.c)
|| this.r - 2 == r && this.c + 1 == c && this.isEnemyOrEmpty(this.r - 1, this.c)
|| this.r + 2 == r && this.c - 1 == c && this.isEnemyOrEmpty(this.r + 1, this.c)
|| this.r + 2 == r && this.c + 1 == c && this.isEnemyOrEmpty(this.r + 1, this.c)
|| this.r - 1 == r && this.c - 2 == c && this.isEnemyOrEmpty(this.r, this.c - 1)
|| this.r - 1 == r && this.c + 2 == c && this.isEnemyOrEmpty(this.r, this.c + 1)
|| this.r + 1 == r && this.c - 2 == c && this.isEnemyOrEmpty(this.r, this.c - 1)
|| this.r + 1 == r && this.c + 2 == c && this.isEnemyOrEmpty(this.r, this.c + 1)
;
}
} else if (text == "相" || text == "象") {
return function (r, c) {
return this.r - 2 == r && this.c - 2 == c && this.isEnemyOrEmpty(this.r - 1, this.c - 1)
|| this.r - 2 == r && this.c + 2 == c && this.isEnemyOrEmpty(this.r - 1, this.c + 1)
|| this.r + 2 == r && this.c - 2 == c && this.isEnemyOrEmpty(this.r + 1, this.c - 1)
|| this.r + 2 == r && this.c + 2 == c && this.isEnemyOrEmpty(this.r + 1, this.c + 1)
;
}
} else if (text == "士" || text == "仕") {
if (that.r > 4) {
return function (r, c) {
var l = 7, l2 = 9, b = 3, b2 = 5;
if (r < l || r > l2 || c < b || c > b2) {
return false;
}
return this.r - 1 == r && this.c - 1 == c
|| this.r - 1 == r && this.c + 1 == c
|| this.r + 1 == r && this.c - 1 == c
|| this.r + 1 == r && this.c + 1 == c
;
}
} else {
return function (r, c) {
var l = 0, l2 = 3, b = 3, b2 = 5;
if (r < l || r > l2 || c < b || c > b2) {
return false;
}
return this.r - 1 == r && this.c - 1 == c
|| this.r - 1 == r && this.c + 1 == c
|| this.r + 1 == r && this.c - 1 == c
|| this.r + 1 == r && this.c + 1 == c
;
}
}

} else if (text == "将" || text == "帅") {
if (that.r > 4) {
return function (r, c) {
var l = 7, l2 = 9, b = 3, b2 = 5;
if (r < l || r > l2 || c < b || c > b2) {
return false;
}
return this.r - 1 == r && this.c == c
|| this.r + 1 == r && this.c == c
|| this.r == r && this.c - 1 == c
|| this.r == r && this.c + 1 == c
;
}
} else {
return function (r, c) {
var l = 0, l2 = 3, b = 3, b2 = 5;
if (r < l || r > l2 || c < b || c > b2) {
return false;
}
return this.r - 1 == r && this.c == c
|| this.r + 1 == r && this.c == c
|| this.r == r && this.c - 1 == c
|| this.r == r && this.c + 1 == c
;
}
}
}
return function () {

};

}());
}
QiZi.prototype = {
isEnemyOrEmpty: function (r, c) {
return this.qipan.bodys[r][c].qizi == null;
},
getMoveRange: function (r, c) {
var
step = 0,
bodys = this.qipan.bodys,
minR = Math.min(this.r, r), maxR = Math.max(this.r, r), minC = Math.min(this.c, c), maxC = Math.max(this.c, c);

if (this.r != r && this.c == c) {
for (var i = minR; i < maxR; i++) {

if (i != this.r && i != r && bodys[i][c].qizi != null) {

step++;
}
}
} else if (this.r == r && this.c != c) {
for (var i = minC; i < maxC; i++) {

if (i != this.c && i != c && bodys[r][i].qizi != null) {
step++;
}
}
}
return step;
},
draw: function () {
var
qipan = this.qipan,
isred = this.isred,
ctx = this.ctx,
bodys = qipan.bodys,
radius = qipan.radius,
xy = this.getPostion(this.r, this.c)
;
ctx.beginPath();
ctx.strokeStyle = isred ? "red" : "#000";
ctx.lineWidth = 1;

this.x = xy.x;
this.y = xy.y;
this.left = xy.x - radius;
this.top = xy.y - radius;
this.right = xy.x + radius;
this.bottom = xy.y + radius;

ctx.arc(xy.x, xy.y, radius, 0, 2 * Math.PI);

ctx.fillStyle = "rgba(250, 240, 240,1)";
ctx.fill();
ctx.stroke();

ctx.fillStyle = isred ? "red" : "#000";
ctx.textAlign = "center";
ctx.fillText(this.text, xy.x, xy.y);
},
getPostion: function (r, c) {
return {
x: this.qipan.bodys[r][c].x,
y: this.qipan.bodys[r][c].y
};
},

moveTo: function (r, c) {
if (this.checkstep(r, c)) {
var r2 = this.r, c2 = this.c;
this.r = r;
this.c = c;
this.qipan.moveQizi(r2, c2, r, c);
return true;
}
return false;

},
select: function () {
var that = this, ctx = that.ctx, len = 15;
ctx.beginPath();
ctx.strokeStyle = "#00ff21";
ctx.lineWidth = 5;

ctx.moveTo(that.left, that.top + len);
ctx.lineTo(that.left, that.top);
ctx.lineTo(that.left + len, that.top);

ctx.moveTo(that.left, that.bottom - len);
ctx.lineTo(that.left, that.bottom);
ctx.lineTo(that.left + len, that.bottom);

ctx.moveTo(that.right, that.top + len);
ctx.lineTo(that.right, that.top);
ctx.lineTo(that.right - len, that.top);

ctx.moveTo(that.right, that.bottom - len);
ctx.lineTo(that.right, that.bottom);
ctx.lineTo(that.right - len, that.bottom);
ctx.stroke();
}

};

}());

var xq = new XiangQi("xqCanvas");
xq.renderQiJu(true);

</script>

超级简单的纯js 象棋,看一遍你也会写相关推荐

简单的纯JS小游戏--消灭星星
先看看效果图: 因为CSDN图片大小的限制,所以只截了部分区域先准备css和一张星星图片,很简单,body背景设为黑色. <style>body {background-color: b ...
SQL Server 事务（超级简单，人人都可以看懂）
事务(Transaction) 事务就是一个工作单元 ,如果某一事务成功,则在该事务中进行的所有数据更改均会提交,成为数据库中永久组成部分,如果事物中遇到错误且必须取消或回滚,则所有数据更改均被撤销. ...
SQL SERVER 简单的索引理解（超级简单，人人都可以看懂）
索引索引提供指针以指向存储在表中指定列的数据值,然后根据指定的排序次序排列这些指针.数据库使用索引的方式与使用书的目录很相似:通过搜索索引找到特定的值,然后跟随指针到达包含该值的行. 什么是索引数 ...
看一遍你也会做！用英伟达 DIGITS 进行图像分割（上）
DIGITS 是什么? 7 月 8 日,英伟达深度学习学院 DLI 线下训练营即将来到深圳,主题是图像分类.目标检测与图像分割的零基础开发入门. 虽然是全球范围内顶级的 AI 培训项目,但 DLI 进 ...
看一遍你也会做！用英伟达 DIGITS 进行图像分割（下）
DIGITS 是什么? 7 月 8 日,英伟达深度学习学院 DLI 线下训练营即将来到深圳,主题是图像分类.目标检测与图像分割的零基础开发入门. 虽然是全球范围内顶级的 AI 培训项目,但 DLI 进 ...
看10遍教程不如写一遍代码--HTML入门demo小结
 <!doctype html> <html><head><!--meta是一个自结束标签-- ...
win7开机卡在正在启动_Win7系统崩溃后小白的终极解决方案，看一遍你也会
WIN7系统蓝屏崩溃了你是不是心急如焚,不知所措.头条是算法推荐文章,既然你刷到了这篇文章,说明你有可能需要,点赞,转发,保存收藏吧! 第一步,准备工作: 1.一个8G优盘. 2.一台可以上网的电脑( ...
超级简单的jQuery纯手写五星评分效果
超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...
关于文件访问无权限，无法枚举容器内对象，访问被拒绝等问题的傻瓜式解决办法，超级简单，小白必看！
关于文件访问无权限,无法枚举容器内对象,访问被拒绝等问题的傻瓜式解决办法,超级简单,小白必看! 以win10为例,其他windows系统原理基本相同 1.右键需要更改的文件夹-属性-安全-高级-权限, ...
扫雷html5简单初级,纯原生JS用面向对象class方法实现简易扫雷小游戏
Demo介绍纯原生js 实现且用ES6语法class写的扫雷小游戏:布局为10*10的网格,随机生成10-20个雷. 左键点击扫雷.右键标记该地方有雷.该demo下载下来复制到html文件中直接可 ...

超级简单的纯js 象棋,看一遍你也会写

超级简单的纯js 象棋,看一遍你也会写相关推荐

最新文章

热门文章