【原創】使用HTML5+canvas+JavaScript開發的原生中國象棋游戲及源碼分享


目前已經實現的功能: 
V1.0 : 實現棋子的布局,畫布及游戲場景的初始化
V2.0 : 實現棋子的顏色改變
V3.0 :實現所有象棋的走棋規則
V4.0 : 實現所有棋子的吃子功能

 

 

GItHub源碼下載地址:https://github.com/xiugangzhang/ChineseChess
如果需要直接體驗的朋友也可以直接通過這個連接體驗哈:
http://htmlpreview.github.io/?https://github.com/xiugangzhang/ChineseChess/blob/master/ChineseChess.html

其他項目推薦:

視頻網站項目:https://github.com/xiugangzhang/vip.github.io(在線體驗地址:http://vip.52tech.tech)

超級馬里奧游戲項目:https://github.com/xiugangzhang/SuperMarioGame

 

如果覺得不錯,也歡迎大家給個star支持一下,你的支持就是我前進的動力!

 

中國象棋項目源碼:

<!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) {
                        // 保存之前還有看一下以下幾個問題(向左)
                        if ((destX == srcX - 2 && destY == srcY - 1) || (destX == srcX - 2 && destY == srcY + 1)){
                            var chess = this._getChess(srcX-1, srcY);
                            if (!chess){
                                isMaCanMove = true;
                            }
                        }
                        // 向上
                        if ((destX == srcX - 1 && destY == srcY-2) || (destX == srcX+1 && destY == srcY-2)){
                            var chess = this._getChess(srcX, srcY-1);
                            if (!chess){
                                isMaCanMove = true;
                            }
                        }
                        // 向右
                        if ((destX == srcX +2 && destY == srcY-1) || (destX == srcX+2 && destY == srcY+1)){
                            var chess = this._getChess(srcX+1, srcY);
                            if (!chess){
                                isMaCanMove = true;
                            }
                        }
                        // 向下
                        if ((destX == srcX -1 && destY == srcY+2) || (destX == srcX+1 && destY == srcY+2)){
                            var chess = this._getChess(srcX, srcY+1);
                            if (!chess){
                                isMaCanMove = true;
                            }
                        }
                        if ((srcX - 2 == i && srcY - 1 == j) || (srcX - 2 == i && srcY + 1 == j) || (srcX - 1 == i && srcY - 2 == j) || (srcX - 1 == i && srcY + 2 == j) || (srcX + 1 == i && srcY - 2 == j) || (srcX + 1 == i && srcY + 2 == j) || (srcX + 2 == i && srcY - 1 == j) || (srcX + 2 == i && srcY + 1 == j)) {
                            var chess = this._getChess(i, j);
                            if (chess) {
                                tag = true;
                            } else {
                                tag = false;
                            }
                            // 保存點
                            maCanMovePoint.push({
                                x: i,
                                y: j,
                                tag: tag,
                                isCanMove : isMaCanMove
                            });
                        }
                    }
                }
            }
            // 拿到這個集合, 然后遍歷
            for (var i = 0; i<maCanMovePoint.length; i++){
                var point = maCanMovePoint[i];
                //看我當前點擊的位置有沒有在這些點集合中
                if (destX == point.x && destY == point.y){
                    //如果在的話
                    if (!point.tag){
                        // 而且這個位置沒有棋子
                        if (point.isCanMove){
                            return true;
                        }
                    }
                }
            }
            return false;
        },
        _canMoveXiang: function (color, srcX, srcY, destX, destY) {
            var xiangCanMovePoint = [];
            if (color == "black") {
                xiangCanMovePoint = [{x: 0, y: 7}, {x: 2, y: 5}, {x: 2, y: 9}, {x: 4, y: 7}, {x: 6, y: 5}, {
                    x: 6,
                    y: 9
                }, {x: 8, y: 7}];
            } else {
                xiangCanMovePoint = [{x: 0, y: 2}, {x: 2, y: 0}, {x: 2, y: 4}, {x: 4, y: 2}, {x: 6, y: 0}, {
                    x: 6,
                    y: 4
                }, {x: 8, y: 2}];
            }
            // 象的移動不能超過2格子
            if (Math.abs(srcX - destX) == 2 || Math.abs(srcY - destY) == 2) {
                // 再看這個田字狀的中心有沒有棋子
                var centerX = (destX + srcX) / 2;
                var centerY = (destY + srcY) / 2;
                console.log("cebter:" + centerX + "," + centerY);
                if (this._getChess(centerX, centerY)) {
                    // 有棋子
                    return false;
                } else {
                    for (var i = 0; i < xiangCanMovePoint.length; i++) {
                        var point = xiangCanMovePoint[i];
                        if (destX == point.x && destY == point.y) {
                            // 再去看這個位置有沒有棋子
                            var chess = this._getChess(destX, destY);
                            if (chess && chess.chessColor == color) {
                                // 有棋子
                                return false;
                            } else {
                                return true;
                            }
                        }
                    }
                }
            }
            return false;
        },
        _canMoveShi: function (color, srcX, srcY, destX, destY) {
            var shiCanMovePoint = [];
            if (color == "black") {
                shiCanMovePoint = [{x: 3, y: 7}, {x: 3, y: 9}, {x: 5, y: 7}, {x: 5, y: 9}, {x: 4, y: 8}];
            } else {
                shiCanMovePoint = [{x: 3, y: 0}, {x: 3, y: 2}, {x: 5, y: 0}, {x: 5, y: 2}, {x: 4, y: 1}];
            }
            // 一進來看下是不是跨格子移動
            if (Math.abs(srcX - destX) == 1 || Math.abs(srcY - destY) == 1) {
                for (var i = 0; i < shiCanMovePoint.length; i++) {
                    var point = shiCanMovePoint[i];
                    if (destX == point.x && destY == point.y) {
                        //再去看這個位置有沒有棋子
                        var chess = this._getChess(destX, destY);
                        // 如果這里有棋子,而且是自己的棋子,就不能移動
                        if (chess && chess.chessColor == color) {
                            // 有棋子
                            return false;
                        } else {
                            // 沒有棋子
                            return true;
                        }
                    }
                }
            }
        },
        _canMoveJiang: function (color, srcX, srcY, destX, destY) {
            var jingCanMovePoint = [];
            // 先看下是什么顏色
            if (color == "black") {  // 黑色棋子
                jingCanMovePoint = [{x: 3, y: 7}, {x: 3, y: 8}, {x: 3, y: 9}, {x: 4, y: 7}, {
                    x: 4,
                    y: 8
                }, {x: 4, y: 9}, {x: 5, y: 7}, {x: 5, y: 8}, {x: 5, y: 9}];
            } else {      // 紅色棋子
                jingCanMovePoint = [{x: 3, y: 0}, {x: 3, y: 1}, {x: 3, y: 2}, {x: 4, y: 0}, {
                    x: 4,
                    y: 1
                }, {x: 4, y: 2}, {x: 5, y: 0}, {x: 5, y: 1}, {x: 5, y: 2}];
            }
            //一進來就先判斷是不是跨格子移動
            if (srcX == destX || srcY == destY) {
                if (Math.abs(srcX - destX) == 1 || Math.abs(srcY - destY) == 1) {
                    for (var i = 0; i < jingCanMovePoint.length; i++) {
                        var point = jingCanMovePoint[i];
                        if (destX == point.x && destY == point.y) {
                            // 然后再去看這些點上有沒有棋子
                            var chess = this._getChess(destX, destY);
                            if (chess) {
                                // 有棋子
                                return false;
                            }
                            return true;
                        }
                    }
                    return false;
                }
                return false;
            }
        },
        _canMovePao: 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;
                    }
                }
            }
            return false;
        },
        _canMoveBing: function (color, srcX, srcY, destX, destY) {
            // 兵的走棋規則: 只能走直線, 只能向前走, 過了河之后可以左右走
            var isGoRiver = false;  // 默認情況下沒有過河
            // 要想左右走, 必須先過河
            if (color == "black") {
                if (srcY != 5 && srcY != 6) {
                    isGoRiver = true;
                }
            } else {
                if (srcY != 3 && srcY != 4) {
                    isGoRiver = true;
                }
            }
            // 黑色棋子的可以移動方向:上,左,右
            if (color == "black") {
                // 可以向上下左右四個方向來移動棋子
                if (destY < srcY) {  //向上
                    //獲得可以向上行走的位置
                    var upChess = this._getUpChesses(srcX, srcY);
                    for (var i = 0; i < upChess.length; i++) {
                        var chess = upChess[i];
                        if (destX == chess.x && destY == chess.y) {
                            // 如果我點擊的位置在我向上走的這個集合里面
                            if (!chess.tag) {
                                // 而且這個位置沒有棋子
                                // 每次移動的間隔為1
                                if (Math.abs(destX - srcX) == 1 || Math.abs(destY - srcY) == 1) {
                                    return true;
                                }
                            }
                        }
                    }
                }
            }
            // 紅色棋子的移動方向:下,左, 右
            if (color == "red") {
                if (destY > srcY) {  // 向下
                    //獲得可以向上行走的位置
                    var downChess = this._getDownChesses(srcX, srcY);
                    for (var i = 0; i < downChess.length; i++) {
                        var chess = downChess[i];
                        if (destX == chess.x && destY == chess.y) {
                            // 如果我點擊的位置在我向上走的這個集合里面
                            if (!chess.tag) {
                                // 而且這個位置沒有棋子
                                // 每次移動的間隔為1
                                if (Math.abs(destX - srcX) == 1 || Math.abs(destY - srcY) == 1) {
                                    return true;
                                }
                            }
                        }
                    }
                }
            }
            // 向左行走
            if (destX < srcX && isGoRiver) {  // 向左
                //獲得可以向左行走的位置
                var leftChess = this._getLeftChesses(srcX, srcY);
                for (var i = 0; i < leftChess.length; i++) {
                    var chess = leftChess[i];
                    if (destX == chess.x && destY == chess.y) {
                        // 如果我點擊的位置在我向上走的這個集合里面
                        if (!chess.tag) {
                            // 而且這個位置沒有棋子
                            // 每次移動的間隔為1
                            if (Math.abs(destX - srcX) == 1 || Math.abs(destY - srcY) == 1) {
                                return true;
                            }
                        }
                    }
                }
            }
            // 向右走
            if (destX > srcX && isGoRiver) {  // 向右
                //獲得可以向右行走的位置
                var rightChess = this._getRightChesses(srcX, srcY);
                for (var i = 0; i < rightChess.length; i++) {
                    var chess = rightChess[i];
                    if (destX == chess.x && destY == chess.y) {
                        // 如果我點擊的位置在我向上走的這個集合里面
                        if (!chess.tag) {
                            // 而且這個位置沒有棋子
                            // 每次移動的間隔為1
                            if (Math.abs(destX - srcX) == 1 || Math.abs(destY - srcY) == 1) {
                                return true;
                            }
                        }
                    }
                }
            }
        },
        _moveChess: function (srcX, srcY, destX, destY) {
            // 移動棋子
            this._selectedChess.x = destX;
            this._selectedChess.y = destY;
            // 顏色恢復
            this._selectedChess.color = this._selectedChess.chessColor;
            // 吃完棋子之后, 就恢復到初始狀態
            this._selectedChess = null;
        },
        _getMovePoint: function (srcX, srcY) {
            // 主要用於獲得一個點的8個方向上面的棋子狀態
            var x = srcX;
            var y = srcY;
            var movePoint = [];
            for (var i = x - 1; i <= x + 1; i++) {
                for (var j = y - 1; j <= y + 1; j++) {
                    //首先判斷該點是否在棋盤內
                    if ((i >= 0 && i <= 8) && (j >= 0 && j <= 9)) {
                        //接着判斷該點有無棋子
                        var tag = false;//假設該點沒有棋子
                        for (var m = 0; m < this._chesses.length; m++) {
                            var chess = this._chesses[m];
                            if (!chess.isDead) {
                                if (i == chess.x && j == chess.y) {
                                    tag = true;//說明有棋子
                                    break;
                                }
                            }
                        }
                        movePoint.push({
                            x: i,
                            y: j,
                            tag: tag
                        });
                    }
                }
            }
            return movePoint;
        },
        _getXAndYChesss: function (srcX, srcY) {
            // 求出來車可以移動的所有的位置
            var MovePoint = [];
            var allCanMovePoint = [];
            var tagColor;
            // 找出x坐標上的所有點
            for (var i = 0; i < 10; i++) {
                MovePoint.push({
                    x: srcX,
                    y: i
                });
            }
            // 找出y坐標上的所有點
            for (var j = 0; j < 9; j++) {
                MovePoint.push({
                    x: j,
                    y: srcY
                });
            }
            // 車的行走規則:走直線,只要直線上沒有棋子都可以走: 只能走srcX或者srcY方向上面的直線
            var tag = false;     // 默認沒有棋子
            for (var i = 0; i < MovePoint.length; i++) {
                var point = MovePoint[i];
                // 再看這些個坐標點上面有沒有棋子
                var chess = this._getChess(point.x, point.y);
                if (chess) {
                    tag = true;
                    tagColor = chess.chessColor;
                } else {
                    tag = false;
                }
                // 把這些點的狀態記錄下來
                allCanMovePoint.push({
                    x: point.x,
                    y: point.y,
                    tag: tag,
                    chessColor : tagColor
                });
            }
            return allCanMovePoint;
        },
        _getRightChesses: function (srcX, srcY) {
            var rightChess = [];
            // 獲得這個棋子之后的所有棋子
            var firstChess = 0;
            var tagColor = "";
            for (var i = srcX; i <= 8; i++) {
                var tag = false;
                // 此時這個位置之后的棋子x坐標為srcX, srcX+1, ......
                // y坐標一直未scrY
                // 判斷這個位置有沒有棋子
                var chess = this._getChess(i, srcY);
                if (chess) {
                    tag = true;
                    tagColor = chess.chessColor;
                    firstChess++;
                }
                rightChess.push({
                    x: i,
                    y: srcY,
                    tag: tag,
                    // 這里添加一個屬性
                    chessColor : tagColor
                });
                // 存儲完畢之后,恢復初始狀態
                tagColor = "";
                // 一旦有棋子就退出
                if (firstChess == 2) {
                    firstChess = 0; // 恢復初始狀態
                    break;
                }
            }
            return rightChess;
        },
        _getLeftChesses: function (srcX, srcY) {
            var leftChess = [];
            var firstChess = 0;
            var tagColor = "";
            // 點擊位置左邊的所有棋子
            for (var i = srcX; i >= 0; i--) {
                var tag = false;
                // 此時這個位置之后的棋子x坐標為srcX-1, srcX-2, ......
                // y坐標一直未scrY
                // 判斷這個位置有沒有棋子
                var chess = this._getChess(i, srcY);
                if (chess) {
                    tag = true;
                    firstChess++;
                    tagColor = chess.chessColor;
                }
                leftChess.push({
                    x: i,
                    y: srcY,
                    tag: tag,
                    // 這里添加一個屬性
                    chessColor : tagColor
                });
                // 存儲完畢之后,恢復初始狀態
                tagColor = "";
                // 一旦有棋子就退出
                if (firstChess == 2) {
                    firstChess = 0; // 恢復初始狀態
                    break;
                }
            }
            return leftChess;
        },
        _getUpChesses: function (srcX, srcY) {
            var upChess = [];
            var firstChess = 0;
            var tagColor = "";
            // 點擊位置上面的所有棋子
            for (var i = srcY; i >= 0; i--) {
                var tag = false;
                // 此時這個位置之后的棋子y坐標為srcY+1, srcY+2, ......
                // x坐標一直未scrX
                // 判斷這個位置有沒有棋子
                var chess = this._getChess(srcX, i);
                if (chess) {
                    tag = true;
                    firstChess++;
                    tagColor = chess.chessColor;
                }
                upChess.push({
                    x: srcX,
                    y: i,
                    tag: tag,
                    // 這里添加一個屬性
                    chessColor : tagColor
                });
                // 存儲完畢之后,恢復初始狀態
                tagColor = "";
                // 一旦有棋子就退出
                if (firstChess == 2) {
                    firstChess = 0; // 恢復初始狀態
                    break;
                }
            }
            return upChess;
        },
        _getDownChesses: function (srcX, srcY) {
            var downChess = [];
            var firstChess = 0;
            var tagColor = "";
            // 點擊位置下面的所有棋子
            for (var i = srcY; i <= 9; i++) {
                var tag = false;
                // 此時這個位置之后的棋子y坐標為srcY+1, srcY+2, ......
                // x坐標一直未scrX
                // 判斷這個位置有沒有棋子
                var chess = this._getChess(srcX, i);
                if (chess) {
                    tag = true;
                    firstChess++;
                    tagColor = chess.chessColor;
                }
                downChess.push({
                    x: srcX,
                    y: i,
                    tag: tag,
                    // 這里添加一個屬性
                    chessColor : tagColor
                });
                // 存儲完畢之后,恢復初始狀態
                tagColor = "";
                // 一旦有棋子就退出
                if (firstChess == 2) {
                    firstChess = 0; // 恢復初始狀態
                    break;
                }
            }
            return downChess;
        },
        _canKill: function (srcX, srcY, destX, destY) {
            // 象棋的吃子功能介紹
            //1. 如果兩次點擊的棋子顏色不同
            //2. 看是否滿足象棋的走棋規則
            //3. 如果滿足象棋的走棋規則, 而且兩次點擊的顏色不同我就可以吃子
            // 點擊棋子的顏色和吃子的顏色
            var srcChess = this._getChess(srcX, srcY);
            var killChess = this._getChess(destX, destY);
            var color = srcChess.chessColor;
            // 如果這兩個位置都有棋子(吃子的前提是兩次點擊的位置都有棋子)
            if (srcChess != null && killChess != null){
                // 看兩次的顏色是不是相同
                 if (srcChess.chessColor != killChess.chessColor){
                     // 可以吃
                     // 然后在我吃棋子之前再判斷這個棋子能不能移動
                     var type = srcChess.type;
                     // 根據這個棋子的規則來判斷
                     switch (type) {
                         case "CHE":
                             if (this._canMoveChe(color, srcX, srcY, destX, destY)) {
                                 // 開始吃棋子
                                 this._moveChess(srcX, srcY, destX, destY);
                                 //  吃完棋子之后的操作(我方棋子補上)
                                 /*srcChess.x = destX;
                                 srcChess.y = destY;
                                 // 對方棋子消失
                                 killChess.isDead = true;*/
                                 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);
                                 // 開始吃棋子
                                 this._moveChess(srcX, srcY, destX, destY);
                                 //  吃完棋子之后的操作(我方棋子補上)
                                 srcChess.x = destX;
                                 srcChess.y = destY;
                                 // 對方棋子消失
                                 killChess.isDead = true;
                                 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);
                                 // 開始吃棋子
                                 this._moveChess(srcX, srcY, destX, destY);
                                 //  吃完棋子之后的操作(我方棋子補上)
                                 srcChess.x = destX;
                                 srcChess.y = destY;
                                 // 對方棋子消失
                                 killChess.isDead = true;
                                 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);
                                 // 開始吃棋子
                                 this._moveChess(srcX, srcY, destX, destY);
                                 //  吃完棋子之后的操作(我方棋子補上)
                                 srcChess.x = destX;
                                 srcChess.y = destY;
                                 // 對方棋子消失
                                 killChess.isDead = true;
                                 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);
                                 // 開始吃棋子
                                 this._moveChess(srcX, srcY, destX, destY);
                                 //  吃完棋子之后的操作(我方棋子補上)
                                 srcChess.x = destX;
                                 srcChess.y = destY;
                                 // 對方棋子消失
                                 killChess.isDead = true;
                                 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);
                                 // 開始吃棋子
                                 this._moveChess(srcX, srcY, destX, destY);
                                 //  吃完棋子之后的操作(我方棋子補上)
                                 srcChess.x = destX;
                                 srcChess.y = destY;
                                 // 對方棋子消失
                                 killChess.isDead = true;
                                 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);
                                 // 開始吃棋子
                                 this._moveChess(srcX, srcY, destX, destY);
                                 //  吃完棋子之后的操作(我方棋子補上)
                                 srcChess.x = destX;
                                 srcChess.y = destY;
                                 // 對方棋子消失
                                 killChess.isDead = true;
                                 return;
                             } else {
                                 // 點擊了顏色相同但是屬性不同的其他棋子
                                 alert("不能移動棋子!");
                                 // 顏色相同的同類棋子就恢復初始狀態
                                 this._selectedChess.color = this._selectedChess.chessColor;
                                 this._selectedChess = null;
                                 return;
                             }
                             break;
                     }
                 } else {
                     // 如果點擊的棋子顏色相同
                     alert("請不要互相殘殺!");
                     // 顏色相同的同類棋子就恢復初始狀態
                     this._selectedChess.color = this._selectedChess.chessColor;
                     this._selectedChess = null;
                     return;
                 }
            } else if(srcChess != null && killChess == null){       // 用戶走棋的操作肯定是OK的
                var type = srcChess.type;
                // 表示要移動棋子
                // 首先看能不能移動
                // 我們先來判斷能不能移動棋子, 然后再來判斷能不能吃子
                switch (type) {
                    case "CHE":
                        if (this._canMoveChe(color, srcX, srcY, destX, destY)) {
                            // 移動棋子
                            this._moveChess(srcX, srcY, destX, destY);
                            return;
                        } else {
                            // 點擊了顏色相同但是屬性不同的其他棋子
                            alert(srcChess._getChessText()+"走法違規!");
                            // 顏色相同的同類棋子就恢復初始狀態
                            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(srcChess._getChessText()+"走法違規!");
                            // 顏色相同的同類棋子就恢復初始狀態
                            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(srcChess._getChessText()+"走法違規!");
                            // 顏色相同的同類棋子就恢復初始狀態
                            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(srcChess._getChessText()+"走法違規!");
                            // 顏色相同的同類棋子就恢復初始狀態
                            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(srcChess._getChessText()+"走法違規!");
                            // 顏色相同的同類棋子就恢復初始狀態
                            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(srcChess._getChessText()+"走法違規!");
                            // 顏色相同的同類棋子就恢復初始狀態
                            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(srcChess._getChessText()+"走法違規!");
                            // 顏色相同的同類棋子就恢復初始狀態
                            this._selectedChess.color = this._selectedChess.chessColor;
                            this._selectedChess = null;
                            return;
                        }
                        break;
                }
            }
        },
        _getChess: function (x, y) {
            for (var i = 0; i < this._chesses.length; i++) {
                var chess = this._chesses[i];
                if (!chess.isDead) {
                    if (chess.x == x && chess.y == y) {
                        return chess;
                    }
                }
            }
            return null;
        }
    }
    var myGame = new Game();
    myGame.execute();
</script>
</body>
</html>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM