zoukankan      html  css  js  c++  java
  • 【原创】使用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>
    

      

  • 相关阅读:
    笔记本Linux系统,修改合盖不待机
    用Java8把List转为Map
    获取本地请求的真实IP地址
    PowerDesigner 把Comment复制到name中和把name复制到Comment
    axios封装http请求
    Fiddler代理配置
    第十九章 代码重用
    第十八章 字符串
    第十七章 特殊类成员
    第十六章 多态性
  • 原文地址:https://www.cnblogs.com/52tech/p/9783810.html
Copyright © 2011-2022 走看看