【原創】使用HTML5+canvas+JavaScript開發的原生中國象棋遊戲及原始碼分享
阿新 • • 發佈：2018-12-15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600px" height="660px">
</canvas>
<script>
//V1.0 : 實現棋子的佈局，畫布及遊戲場景的初始化
//V2.0 : 實現棋子的顏色改變
//V3.0 ：實現所有象棋的走棋規則
//V4.0 : 實現所有棋子的吃子功能
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
/**
* 棋子物件
* @param x
* @param y
* @param color
* @constructor
*/
function Chess(x, y, color, type) {
this.x = x;
this.y = y;
this.color = color;
this.type = type;
// 記錄顏色
this.chessColor = color;
// 是否死掉
this.isDead = false;
}
// 成員函式
Chess.prototype = {
_getChessText: function () {
switch (this.type) {
case "CHE":
return "車";
case "MA":
return "馬";
case "PAO":
return "炮";
case "BING":
return "兵";
case "JIANG":
return "將";
case "SHI":
return "士";
case "XIANG":
return "相";
}
return "錯誤";
}
}
/**
* 遊戲場景
* @constructor
*/
function Game() {
// 存放當前棋盤上所有的棋子
this._chesses = [];
//初始位置
this._initX = 60;
this._initY = 60;
// 判斷滑鼠是否點選有棋子
this._selectedChess = null;
this._initCount = 0;
}
Game.prototype = {
// 場景的初始化
execute: function () {
this._initChesses();
this._start();
},
_initChesses: function () {
// 繪製棋子（初始位置）
// 總共需要繪製32顆棋子
// 紅色棋子
var redChess;
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 9; j++) {
if ((i == 0 && j == 0) || (j == 8 && i == 0)) {
// 把棋子的顏色傳進去
redChess = new Chess(j, i, "red", "CHE");
this._chesses.push(redChess);
} else if ((j == 1 && i == 0) || (j == 7 && i == 0 )) {
redChess = new Chess(j, i, "red", "MA");
this._chesses.push(redChess);
} else if ((j == 2 && i == 0) || (j == 6 && i == 0)) {
redChess = new Chess(j, i, "red", "XIANG");
this._chesses.push(redChess);
} else if ((j == 3 && i == 0) || (j == 5 && i == 0)) {
redChess = new Chess(j, i, "red", "SHI");
this._chesses.push(redChess);
} else if ((j == 4 && i == 0)) {
redChess = new Chess(j, i, "red", "JIANG");
this._chesses.push(redChess);
} else if ((j == 1 && i == 2) || (j == 7 && i == 2)) {
redChess = new Chess(j, i, "red", "PAO");
this._chesses.push(redChess);
} else if ((j == 0 && i == 3) || (j == 2 && i == 3) || (j == 4 && i == 3) || (j == 6 && i == 3) || (j == 8 && i == 3)) {
redChess = new Chess(j, i, "red", "BING");
this._chesses.push(redChess);
}
}
}
// 繪製黑色棋子
var blackChess;
for (var i = 6; i < 10; i++) {
for (var j = 0; j < 10; j++) {
if ((j == 0 && i == 9) || (j == 8 && i == 9)) {
blackChess = new Chess(j, i, "black", "CHE");
this._chesses.push(blackChess);
} else if ((j == 1 && i == 9) || (j == 7 && i == 9)) {
blackChess = new Chess(j, i, "black", "MA");
this._chesses.push(blackChess);
} else if ((j == 2 && i == 9) || (j == 6 && i == 9)) {
blackChess = new Chess(j, i, "black", "XIANG");
this._chesses.push(blackChess);
} else if ((j == 3 && i == 9) || (j == 5 && i == 9)) {
blackChess = new Chess(j, i, "black", "SHI");
this._chesses.push(blackChess);
} else if (j == 4 && i == 9) {
blackChess = new Chess(j, i, "black", "JIANG");
this._chesses.push(blackChess);
} else if ((j == 1 && i == 7) || (j == 7 && i == 7)) {
blackChess = new Chess(j, i, "black", "PAO");
this._chesses.push(blackChess);
} else if ((j == 0 && i == 6) || (j == 2 && i == 6) || (j == 4 && i == 6) || (j == 6 && i == 6) || (j == 8 && (i == 6))) {
blackChess = new Chess(j, i, "black", "BING");
this._chesses.push(blackChess);
}
}
}
//console.log(redChess);
//console.log(blackChess);
console.log(this._chesses);
},
/**
* 繪製棋子 車馬相士將
* @private
*/
_drawChesses: function () {
var isDeadChess = null;
// 根據遊戲中棋子的數目來繪製棋子
// 遊戲中的棋子始終是32顆， 因此只能根據棋子是否存活來決定是否繪製這個棋子(原來的位置還是有棋子， 這是讓他隱藏起來)
for (var i = 0; i < this._chesses.length; i++) {
var chess = this._chesses[i];
// 原來的位置還是有棋子， 這是讓他隱藏起來
if (!chess.isDead) {
// 只有當這個棋子的屬性isDead = false; 才繪製這個棋子
// 根據棋子的屬性來繪製
context.fillStyle = "#C78843";
context.beginPath();
// 繪製棋子(注意要把棋子的初始位置復位)
context.arc(chess.x * 60 + this._initX, chess.y * 60 + this._initY, 25, 0, Math.PI * 2, true);
context.closePath();
context.fill();
// 繪製文字
if (chess.color == "red") {
context.fillStyle = 'red';
}
if (chess.color == "black") {
context.fillStyle = 'black';
}
if (chess.color == "blue") {
context.fillStyle = 'blue';
}
context.font = '43px 華文新魏';
context.fillText(chess._getChessText(), chess.x * 60 + this._initX - 22, chess.y * 60 + this._initY + 10);
}
else {
isDeadChess = chess;
}
}
// 有棋子被吃了，就重新開始
//this._selectedChess = null;
if (this._initCount == 0) {
//console.log(chess.x+","+chess.y+","+chess.type+"已經隱藏");
}
},
_drawChessboard: function () {
context.strokeStyle = "black";
// 繪製棋盤外邊界
context.lineWidth = 3;
context.beginPath();
context.moveTo(0, 0);
context.lineTo(600, 0);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(0, 0);
context.lineTo(0, 660);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(600, 0);
context.lineTo(600, 660);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(0, 660);
context.lineTo(660, 660);
context.closePath();
context.stroke();
// 內部的外邊界
context.beginPath();
context.moveTo(40, 40);
context.lineTo(40, 620);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(40, 40);
context.lineTo(560, 40);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(560, 40);
context.lineTo(560, 620);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(560, 620);
context.lineTo(40, 620);
context.closePath();
context.stroke();
//棋盤橫線
context.lineWidth = 1;
for (var i = 1; i < 11; i++) {
context.beginPath();
context.moveTo(60, 60 * i);
context.lineTo(540, 60 * i);
context.closePath();
context.stroke();
}
// 棋盤縱線
for (var i = 1; i < 10; i++) {
context.beginPath();
context.moveTo(i * 60, 60);
context.lineTo(i * 60, 300);
context.closePath();
context.stroke();
}
for (var i = 1; i < 10; i++) {
context.beginPath();
context.moveTo(i * 60, 360);
context.lineTo(i * 60, 600);
context.closePath();
context.stroke();
}
context.beginPath();
context.moveTo(60, 300);
context.lineTo(60, 360);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(540, 300);
context.lineTo(540, 360);
context.closePath();
context.stroke();
// 棋盤斜線
context.beginPath();
context.moveTo(240, 60);
context.lineTo(360, 180);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(360, 60);
context.lineTo(240, 180);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(240, 480);
context.lineTo(360, 600);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(360, 480);
context.lineTo(240, 600);
context.closePath();
context.stroke();
// 繪製炮的位置(左上)
context.beginPath();
context.moveTo(115, 160);
context.lineTo(115, 175);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(115, 175);
context.lineTo(100, 175);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(125, 160);
context.lineTo(125, 175);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(125, 175);
context.lineTo(140, 175);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(115, 185);
context.lineTo(115, 200);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(115, 185);
context.lineTo(100, 185);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(125, 185);
context.lineTo(125, 200);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(125, 185);
context.lineTo(140, 185);
context.closePath();
context.stroke();
// 右上
context.beginPath();
context.moveTo(475, 175);
context.lineTo(460, 175);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(475, 175);
context.lineTo(475, 160);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(485, 160);
context.lineTo(485, 175);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(485, 175);
context.lineTo(500, 175);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(485, 185);
context.lineTo(485, 200);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(485, 185);
context.lineTo(500, 185);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(475, 185);
context.lineTo(475, 200);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(475, 185);
context.lineTo(460, 185);
context.closePath();
context.stroke();
// 左下
context.beginPath();
context.moveTo(115, 485);
context.lineTo(115, 500);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(115, 485);
context.lineTo(100, 485);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(115, 475);
context.lineTo(100, 475);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(115, 475);
context.lineTo(115, 460);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(125, 475);
context.lineTo(140, 475);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(125, 475);
context.lineTo(125, 460);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(125, 485);
context.lineTo(140, 485);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(125, 485);
context.lineTo(125, 500);
context.closePath();
context.stroke();
// 右下
context.beginPath();
context.moveTo(475, 485);
context.lineTo(475, 500);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(475, 485);
context.lineTo(460, 485);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(475, 475);
context.lineTo(475, 460);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(475, 475);
context.lineTo(460, 475);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(485, 475);
context.lineTo(500, 475);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(485, 475);
context.lineTo(485, 460);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(485, 485);
context.lineTo(500, 485);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(485, 485);
context.lineTo(485, 500);
context.closePath();
context.stroke();
},
_drawnTitle: function () {
//context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = 'black';
context.font = '40px 華文新魏';
context.fillText("楚河", 130, 340);
context.fillText("漢界", 380, 340);
},
_start: function () {
// 監聽事件， 把觸發這個事件的物件也傳遞過去
document.addEventListener("click", this._mouseClick.bind(this));
var that = this;
// 利用定時器不斷重繪canvas
var timer = setInterval(function () {
that._draw();
}, 30);
},
_draw: function () {
context.clearRect(0, 0, canvas.width, canvas.height);
this._drawChessboard();
// 繪製棋子
this._drawChesses();
this._drawnTitle();
},
_mouseClick: function (e) {
// 把棋盤歸一化
var px = e.clientX - this._initX + 25;
var py = e.clientY - this._initY + 25;
//console.log(px + " "+py);
// 當前滑鼠點選棋盤的位置
var x = parseInt(px / 60);
var y = parseInt(py / 60);
if (x > 8 || x < 0 || y > 9 || y < 0 || px < 0) {
return;
}
console.log(this._selectedChess);
// 之前沒有選中棋子（一直點選的是空白位置）
if (this._selectedChess == null) {
//如果當前滑鼠點選的位置有棋子，就是選中了棋子
for (var i = 0; i < this._chesses.length; i++) {
var chess = this._chesses[i];
// 每次拿出來棋子都要看一下這個棋子是不是還活著， 已經死了的棋子不處理
if (!chess.isDead) {
if (x == chess.x && y == chess.y) {
// 如果有棋子
this._selectedChess = chess;
this._selectedChess.color = "blue";
break;
} else {
// 沒有棋子
//alert("沒有棋子");
//break;
}
}
}
} else {
var color = this._selectedChess.chessColor;
var srcX = this._selectedChess.x;
var srcY = this._selectedChess.y;
var destX = x;
var destY = y;
this._canKill(srcX, srcY, destX, destY);
// 如果已經有了選擇的棋子，就看這一次點選的位置有沒有棋子
/*var chess = this._getChess(x, y);
if (chess){
// 如果這個位置有棋子
console.log("有棋子");
if (chess.chessColor == this._selectedChess.chessColor){
// 如果這兩個棋子的顏色相同
alert("請不要自相殘殺！");
//同一個棋子點選了兩下就恢復初始狀態
//this._selectedChess = null;
this._selectedChess.color = this._selectedChess.chessColor;
this._selectedChess = null;
return;
}
else {
// 如果顏色不相同
// 首先看一下這個棋子能不能移動
var type = this._selectedChess.type;
var srcX = this._selectedChess.x;
var srcY = this._selectedChess.y;
var destX = x;
var destY = y;
var color = this._selectedChess.chessColor;
// 我們先來判斷能不能移動棋子， 然後再來判斷能不能吃子
switch (type) {
case "CHE":
if (this._canMoveChe(color, srcX, srcY, destX, destY)) {
// 移動棋子
this._moveChess(srcX, srcY, destX, destY);
return;
} else {
// 點選了顏色相同但是屬性不同的其他棋子
alert("不能移動棋子！");
// 顏色相同的同類棋子就恢復初始狀態
this._selectedChess.color = this._selectedChess.chessColor;
this._selectedChess = null;
return;
}
break;
case "MA":
if (this._canMoveMa(color, srcX, srcY, destX, destY)) {
// 移動棋子
this._moveChess(srcX, srcY, destX, destY);
return;
} else {
// 點選了顏色相同但是屬性不同的其他棋子
alert("不能移動棋子！");
// 顏色相同的同類棋子就恢復初始狀態
this._selectedChess.color = this._selectedChess.chessColor;
this._selectedChess = null;
return;
}
break;
case "XIANG":
if (this._canMoveXiang(color, srcX, srcY, destX, destY)) {
// 移動棋子
this._moveChess(srcX, srcY, destX, destY);
return;
} else {
// 點選了顏色相同但是屬性不同的其他棋子
alert("不能移動棋子！");
// 顏色相同的同類棋子就恢復初始狀態
this._selectedChess.color = this._selectedChess.chessColor;
this._selectedChess = null;
return;
}
break;
case "SHI":
if (this._canMoveShi(color, srcX, srcY, destX, destY)) {
// 移動棋子
this._moveChess(srcX, srcY, destX, destY);
return;
} else {
// 點選了顏色相同但是屬性不同的其他棋子
alert("不能移動棋子！");
// 顏色相同的同類棋子就恢復初始狀態
this._selectedChess.color = this._selectedChess.chessColor;
this._selectedChess = null;
return;
}
break;
case "JIANG":
if (this._canMoveJiang(color, srcX, srcY, destX, destY)) {
// 移動棋子
this._moveChess(srcX, srcY, destX, destY);
return;
} else {
// 點選了顏色相同但是屬性不同的其他棋子
alert("不能移動棋子！");
// 顏色相同的同類棋子就恢復初始狀態
this._selectedChess.color = this._selectedChess.chessColor;
this._selectedChess = null;
return;
}
break;
case "PAO":
if (this._canMovePao(color, srcX, srcY, destX, destY)) {
// 移動棋子
this._moveChess(srcX, srcY, destX, destY);
return;
} else {
// 點選了顏色相同但是屬性不同的其他棋子
alert("不能移動棋子！");
// 顏色相同的同類棋子就恢復初始狀態
this._selectedChess.color = this._selectedChess.chessColor;
this._selectedChess = null;
return;
}
case "BING":
if (this._canMoveBing(color, srcX, srcY, destX, destY)) {
// 移動棋子
this._moveChess(srcX, srcY, destX, destY);
return;
} else {
// 點選了顏色相同但是屬性不同的其他棋子
alert("不能移動棋子！");
// 顏色相同的同類棋子就恢復初始狀態
this._selectedChess.color = this._selectedChess.chessColor;
this._selectedChess = null;
return;
}
break;
}
}
}
// 已經有選擇的棋子
for (var i = 0; i < this._chesses.length; i++) {
var chess = this._chesses[i];
// 只處理沒有死掉的棋子
if (x == chess.x && y == chess.y) {
// 這次點選的位置如果有棋子，就看有沒有死
if (!chess.isDead) {
// 第一次有棋子， 第二次也有棋子
// 判斷兩次點選的棋子顏色是不是相同
if (chess.chessColor == this._selectedChess.chessColor) {
// 兩次點選的顏色都相同
if ((chess.type == this._selectedChess.type) && (chess.x == this._selectedChess.x) && (chess.y == this._selectedChess.y)) {
// 顏色座標和屬性都相同（同一個棋子）
alert("你選擇的是同一個棋子");
//同一個棋子點選了兩下就恢復初始狀態
//this._selectedChess = null;
this._selectedChess.color = this._selectedChess.chessColor;
this._selectedChess = null;
break;
} else {
// 點選了顏色相同但是屬性不同的其他棋子
alert("不能自相殘殺！");
// 顏色相同的同類棋子就恢復初始狀態
this._selectedChess.color = this._selectedChess.chessColor;
this._selectedChess = null;
break;
}
} else {
// 兩次點選的顏色不相同
alert(this._selectedChess.chessColor + "可以吃" + chess.chessColor);
var type = this._selectedChess.type;
// 在我吃棋子的時候我先去判斷選擇的棋子能不能移動到目標的位置
switch (type) {
case "CHE":
break;
case "MA":
break;
case "XIANG":
break;
case "SHI":
break;
case "JIANG":
if (this._canMoveJiang(x, y)) {
// 目標棋子消失，我方棋子補上去
chess.isDead = true;
// 補上去(這裡修改的其實是之前那顆棋子的引用)
this._selectedChess.x = chess.x;
this._selectedChess.y = chess.y;
// 顏色恢復
this._selectedChess.color = this._selectedChess.chessColor;
// 吃完棋子之後， 就恢復到初始狀態
this._selectedChess = null;
} else {
// 點選了顏色相同但是屬性不同的其他棋子
alert("吃法違規！");
// 顏色相同的同類棋子就恢復初始狀態
this._selectedChess.color = this._selectedChess.chessColor;
this._selectedChess = null;
}
break;
case "PAO":
case "BING":
break;
}
// 目標棋子消失，我方棋子補上去
chess.isDead = true;
// 補上去(這裡修改的其實是之前那顆棋子的引用)
this._selectedChess.x = chess.x;
this._selectedChess.y = chess.y;
// 顏色恢復
this._selectedChess.color = this._selectedChess.chessColor;
// 吃完棋子之後， 就恢復到初始狀態
this._selectedChess = null;
break;
}
} else {
// 第一次有棋子， 第二次沒有棋子
//alert("移動棋子");
//break;
// 棋子已經死了的話，就不考慮
console.log("移動棋子");
}
} else {
// 第二次點選的位置上面沒有棋子
console.log("移動棋子222");
var type = this._selectedChess.type;
var srcX = this._selectedChess.x;
var srcY = this._selectedChess.y;
var destX = x;
var destY = y;
var color = this._selectedChess.chessColor;
// 我們先來判斷能不能移動棋子， 然後再來判斷能不能吃子
switch (type) {
case "CHE":
if (this._canMoveChe(color, srcX, srcY, destX, destY)) {
// 移動棋子
this._moveChess(srcX, srcY, destX, destY);
return;
} else {
// 點選了顏色相同但是屬性不同的其他棋子
alert("不能移動棋子！");
// 顏色相同的同類棋子就恢復初始狀態
this._selectedChess.color = this._selectedChess.chessColor;
this._selectedChess = null;
return;
}
break;
case "MA":
if (this._canMoveMa(color, srcX, srcY, destX, destY)) {
// 移動棋子
this._moveChess(srcX, srcY, destX, destY);
return;
} else {
// 點選了顏色相同但是屬性不同的其他棋子
alert("不能移動棋子！");
// 顏色相同的同類棋子就恢復初始狀態
this._selectedChess.color = this._selectedChess.chessColor;
this._selectedChess = null;
return;
}
break;
case "XIANG":
if (this._canMoveXiang(color, srcX, srcY, destX, destY)) {
// 移動棋子
this._moveChess(srcX, srcY, destX, destY);
return;
} else {
// 點選了顏色相同但是屬性不同的其他棋子
alert("不能移動棋子！");
// 顏色相同的同類棋子就恢復初始狀態
this._selectedChess.color = this._selectedChess.chessColor;
this._selectedChess = null;
return;
}
break;
case "SHI":
if (this._canMoveShi(color, srcX, srcY, destX, destY)) {
// 移動棋子
this._moveChess(srcX, srcY, destX, destY);
return;
} else {
// 點選了顏色相同但是屬性不同的其他棋子
alert("不能移動棋子！");
// 顏色相同的同類棋子就恢復初始狀態
this._selectedChess.color = this._selectedChess.chessColor;
this._selectedChess = null;
return;
}
break;
case "JIANG":
if (this._canMoveJiang(color, srcX, srcY, destX, destY)) {
// 移動棋子
this._moveChess(srcX, srcY, destX, destY);
return;
} else {
// 點選了顏色相同但是屬性不同的其他棋子
alert("不能移動棋子！");
// 顏色相同的同類棋子就恢復初始狀態
this._selectedChess.color = this._selectedChess.chessColor;
this._selectedChess = null;
return;
}
break;
case "PAO":
if (this._canMovePao(color, srcX, srcY, destX, destY)) {
// 移動棋子
this._moveChess(srcX, srcY, destX, destY);
return;
} else {
// 點選了顏色相同但是屬性不同的其他棋子
alert("不能移動棋子！");
// 顏色相同的同類棋子就恢復初始狀態
this._selectedChess.color = this._selectedChess.chessColor;
this._selectedChess = null;
return;
}
case "BING":
if (this._canMoveBing(color, srcX, srcY, destX, destY)) {
// 移動棋子
this._moveChess(srcX, srcY, destX, destY);
return;
} else {
// 點選了顏色相同但是屬性不同的其他棋子
alert("不能移動棋子！");
// 顏色相同的同類棋子就恢復初始狀態
this._selectedChess.color = this._selectedChess.chessColor;
this._selectedChess = null;
return;
}
break;
}
}
}*/
//alert("1212");
}
},
_isChessSelected: function () {
},
_canMoveChe: function (color, srcX, srcY, destX, destY) {
// 獲得點選座標處的所有xy上面的棋子狀態
var allCanMovePoint = this._getXAndYChesss(srcX, srcY);
// 想辦法獲得橫縱座標上面一旦有棋子之間的座標
// 這幾個陣列主要用於儲存我點選的位置上下左右四個方向第一次出現棋子到我現在這個棋子之間的棋子狀態
var rightChess = this._getRightChesses(srcX, srcY);
var leftChess = this._getLeftChesses(srcX, srcY);
var upChess = this._getUpChesses(srcX, srcY);
var downChess = this._getDownChesses(srcX, srcY);
// 開始實現移動車的規則.
for (var i = 0; i < allCanMovePoint.length; i++) {
var point = allCanMovePoint[i];
if (destX == point.x && destY == point.y) {
// 如果我當前要移動的點在我的這個點集合中
if (!point.tag) {
//而且這個位置沒有棋子
// 開始進一步限定移動的範圍
// 上
if (destY < srcY) {
for (var j = 0; j < upChess.length; j++) {
// 取出可以向上移動的所有棋子的位置
var chess = upChess[j];
// 如果我點選的位置在這個集合裡面
if (destX == chess.x && destY == chess.y) {
if (!chess.tag) {
// 沒有棋子
return true;
}
}
}
return false;
}
// 下
if (destY > srcY) {
for (var j = 0; j < downChess.length; j++) {
var chess = downChess[j];
// 如果我點選的位置在這個集合裡面
if (destX == chess.x && destY == chess.y) {
if (!chess.tag) {
// 沒有棋子
return true;
}
}
}
return false;
}
// 左
if (destX < srcX) {
for (var j = 0; j < leftChess.length; j++) {
var chess = leftChess[j];
// 如果我點選的位置在這個集合裡面
if (destX == chess.x && destY == chess.y) {
if (!chess.tag) {
// 沒有棋子
return true;
}
}
}
return false;
}
// 右
if (destX > srcX) {
for (var j = 0; j < rightChess.length; j++) {
var chess = rightChess[j];
// 如果我點選的位置在這個集合裡面
if (destX == chess.x && destY == chess.y) {
if (!chess.tag) {
// 沒有棋子
return true;
}
}
}
}
return false;
}
else{
//如果有棋子
// 看下這個棋子的顏色
var chessColor = point.chessColor;
if (chessColor != ""){
// 這個位置有棋子
var srcChess = this._getChess(srcX, srcY);
var killChess = this._getChess(destX, destY);
if (chessColor != srcChess.chessColor){
// 殺死的棋子消失
killChess.isDead = true;
srcChess.x = destX;
srcChess.y = destY;
// 可以移動
return true;
}
}
}
}
}
return false;
},
_canMoveMa: function (color, srcX, srcY, destX, destY) {
// 獲得可以移動的位置點
var maCanMovePoint = [];
// 是否可以真正移動的標記
var isMaCanMove = false;
// 找到馬周圍的可以移動的8個點
var tag = false; // 預設沒有棋子
for (var i = srcX - 2; i <= srcX + 2; i++) {
for (var j = srcY - 2; j <= srcY + 2; j++) {
// 只儲存在棋盤裡面的棋子
if (i >= 0 && i <= 8 && j >= 0 && j <= 9) {
// 儲存之前還有看一下以下幾個問題(向左)