// 声明变量
var count = 1,
    position = [];

// 获取canvas
var canvas = document.querySelector("#gobang");
var context = canvas.getContext("2d");

// 画棋盘
var drawChessBoard = function() {
    for (var i = 0; i <= 15; i++) {
        context.strokeStyle = "#888";
        context.moveTo(15, 30 * i + 15);
        context.lineTo(465, i * 30 + 15);
        context.stroke();
        context.beginPath();
        context.moveTo(30 * i + 15, 15);
        context.lineTo(30 * i + 15, 465);
        context.stroke();
    }
};

// 初始化坐标权重
var weight = function() {
    for (var i = 0; i <= 15; i++) {
        position[i] = [];
        for (var j = 0; j <= 15; j++) {
            position[i][j] = 0;
        }
    }
};

// 判断胜负函数基本封装（i为列，j为行）
var judge = function(col, row, operation) {
    // 监测横线赢法
    for (var i = 0; i <= col; i++) {
        for (var j = 0; j <= row; j++) {
            // 运算相邻的五个位置后重置
            var result = 0;
            for (var k = 0; k <= 4; k++) {
                switch (operation) {
                    //横线
                    case "transverseLine":
                        result += position[i + k][j]; //i<=11,j<=15
                        break;
                        // 竖线
                    case "verticalLine":
                        result += position[i][j + k]; //i<=15,j<=11
                        break;
                        // 正斜线
                    case "forwardSlash":
                        if (j >= 4) result += position[i + k][j - k]; //i<=11,4<=j<=15
                        break;
                        // 反斜线
                    case "backSlash":
                        result += position[i + k][j + k]; //i<=11,j<=11
                        break;
                }
                if (result == 50) {
                    alert("恭喜！黑棋获胜！");
                    window.location.reload();
                } else if (result == 500) {
                    alert("恭喜！白棋获胜！");
                    window.location.reload();
                }
            }
        }
    }
};

// 判断胜负函数（i为列，j为行）
// var judge = function(){
//     console.log(position);
//     // 监测横线赢法
//     for (var i = 0; i <= 11 ; i++) {
//         for (var j = 0; j <= 15 ; j++) {
//             // 运行相邻的五个位置后重置
//             var result = 0;
//             for (var k = 0; k <= 4; k++) {
//                 result += position[i+k][j];
//                 if (result == 50){
//                     alert("恭喜！黑棋获胜！");
//                     window.location.reload();
//                 }
//                 else if (result == 500){
//                     alert("恭喜！白棋获胜！");
//                     window.location.reload();
//                 }
//             }
//         }
//     }
// };

//画棋子
var drawChess = function(e) {
    // 获取点击位置
    // console.log(e.offsetX+"--偏移---"+e.offsetY);
    var x = Math.floor(e.offsetX / 30);
    var y = Math.floor(e.offsetY / 30);
    // console.log(x+"--坐标--"+y);
    // 坐标点已有棋子，则退出函数
    if (position[x][y] !== 0) return;
    // 重开路径
    context.beginPath();
    context.arc(x * 30 + 15, y * 30 + 15, 15, 0, Math.PI * 2, true);
    //点击次数为单数为白棋，双数为黑棋
    // console.log(count);
    if (count % 2 == 0) {
        // 填充颜色
        context.fillStyle = "#000";
        // 坐标权重
        position[x][y] = 10;
    } else {
        context.fillStyle = "#fff";
        position[x][y] = 100;
    }
    context.fill();
    count++;
    // console.log(position);
};

window.onload = function() {
    // 画棋盘
    drawChessBoard();
    // 初始化坐标的权重
    weight();
};
// 监听点击事件画棋子
canvas.addEventListener("click", function(e) {
    // 画棋子
    drawChess(e);
    // 横线赢法
    judge(11, 15, "transverseLine");
    // 竖线赢法
    judge(15, 11, "verticalLine");
    // 正斜线赢法
    judge(11, 15, "forwardSlash");
    // 反斜线赢法
    judge(11, 11, "backSlash");
}, false);