【JavaScript游戏开发】使用HTML5 canvas开发的网页版中国象棋项目

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81905647 //V1.
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81905647
//V1.0 : 实现棋子的布局,画布及游戏场景的初始化
//V2.0 : 实现棋子的颜色改变
//V3.0 :实现所有象棋的走棋规则
//V4.0 : 实现所有棋子的吃子功能

完整的项目源码已经开源:https://github.com/xiugangzhang/ChineseChess

项目在线预览地址:

http://htmlpreview.github.io/?https://github.com/xiugangzhang/ChineseChess/blob/master/ChineseChess.html

目前就实现了上面的几个功能,最近也么时间再弄了,需要的朋友可以自己下载下来继续开发哈!

主要特点:

1.无任何插件和第三方库,纯原生js实现

2.没使用任何素材,棋盘和棋子都是由canvas画布绘制

<!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>

 

相关文章
|
16天前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
39 1
|
19天前
|
CDN
如何在项目中使用Moment.js库?
如何在项目中使用Moment.js库?
|
16天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
30 2
|
23天前
|
JavaScript 前端开发 测试技术
探索现代JavaScript开发的最佳实践
本文探讨了现代JavaScript开发中的最佳实践,涵盖ES6+特性、现代框架使用、模块化与代码分割、测试驱动开发、代码质量与性能优化、异步编程、SPA与MPA架构选择、服务端渲染和静态站点生成等内容,旨在帮助开发者提升代码质量和开发效率。
|
1月前
|
Web App开发 存储 JavaScript
深入浅出Node.js后端开发
【10月更文挑战第31天】本文将引导你进入Node.js的奇妙世界,探索其如何革新后端开发。通过浅显易懂的语言和实际代码示例,我们将一起学习Node.js的核心概念、搭建开发环境,以及实现一个简单但完整的Web应用。无论你是编程新手还是希望拓展技术的开发者,这篇文章都将为你打开一扇通往高效后端开发的大门。
|
26天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第36天】本文将引导您探索Node.js的世界,通过实际案例揭示其背后的原理和实践方法。从基础的安装到高级的异步处理,我们将一起构建一个简单的后端服务,并讨论如何优化性能。无论您是新手还是有经验的开发者,这篇文章都将为您提供新的视角和深入的理解。
|
28天前
|
运维 监控 JavaScript
鸿蒙next版开发:分析JS Crash(进程崩溃)
在HarmonyOS 5.0中,JS Crash指未处理的JavaScript异常导致应用意外退出。本文详细介绍如何分析JS Crash,包括异常捕获、日志分析和典型案例,帮助开发者定位问题、修复错误,提升应用稳定性。通过DevEco Studio收集日志,结合HiChecker工具,有效解决JS Crash问题。
44 4
|
1月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
41 4
|
1月前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
24 2
|
1月前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第30天】本文将通过一个Node.js的简单示例,引导你进入Node.js的世界。我们将从基础概念讲起,然后一步步深入到代码实现,最后总结Node.js在后端开发中的优势和应用场景。无论你是前端开发者还是后端新手,这篇文章都将为你打开一扇了解Node.js的大门。
49 2