// JavaScript Document
var me = true ;
var over = false ;
//定义赢法的统计数组
var myWin = new Array() ;
var computerWin = new Array() ;
//定义棋盘
var chessBoard = new Array();
    for(var i=0;i<15;i++){
        //s是弱类型语言，没有int这种类型，定义变量一般用var
        chessBoard[i]=new Array();
        for(var j=0;j<15;j++){
            chessBoard[i][j]=0;
            }
        }
//定义赢法数组
var wins = new Array() ;
    for(var i=0;i<15;i++){
        wins[i] = new Array() ;
        for(var j=0;j<15;j++){
            wins[i][j] = new Array() ;
            }
        }
var count = 0 ;
//所有的横线
    for(var i=0;i<15;i++){
        for(var j=0;j<11;j++){
            for(var k=0;k<5;k++){
                chessBoard[i][j+k][count] = true ;
                }
                count++;
            }
        }
//所有的竖线
    for(var i=0;i<15;i++){
        for(var j=0;j<11;j++){
            for(var k=0;k<5;k++){
                chessBoard[j+k][i][count] = true ;
                }
                count++;
            }
        }
//所有的正斜线        
    for(var i=0;i<11;i++){
        for(var j=0;j<11;j++){
            for(var k=0;k<5;k++){
                chessBoard[i+k][j+k][count] = true ;
                }
                count++;
            }
        }
//所有的反斜线        
    for(var i=0;i<11;i++){
        for(var j=14;j>3;j--){
            for(var k=0;k<5;k++){
                chessBoard[i+k][j-k][count] = true ;
                }
                count++;
            }
        }
console.log(count);
//初始化
for(var i=0;i<count;i++){
    myWin[i] = 0 ;
    computerWin[i] = 0 ;
    }
var chess = document.getElementById('chess1');//获取canvas对象的引用
var context = chess.getContext('2d'); //获取该canvas的2D绘图环境

context.strokeStyle="#BFBFBF";
//var logo = new Image() ;
//logo.src = "images/1.png";
//context.drawImage();画出水印图片的做法，但是这里不能实现，图片挡住表格的解决办法是控制加载先后的顺序。context
window.onload = function(){
    drawChessBoard();
    //oneStep(0,0,true);
//    oneStep(1,1,false); 用来测试能否出现棋子的代码
    }
    
var drawChessBoard = function(){
    for(var i=0;i<15;i++){
      context.moveTo(15,15+i*30);
      context.lineTo(435,15+i*30);
      context.stroke();//划掉
      context.moveTo(15+i*30,15);
      context.lineTo(15+i*30,435);
      context.stroke();//划掉
    }
}
 var oneStep = function(i,j,me){
    context.beginPath();//去开始一个路径
    context.arc(15+i*30,15+j*30,13,0,2*Math.PI);//arc用来画扇形（位置，位置，半径，起始弧度，截止弧度）
    var gradient = context.createRadialGradient(15+i*30+2,15+j*30-2,13,15+i*30+2,15+j*30-2,0);
    if(me){
      gradient.addColorStop(0,"#0A0A0A");
      gradient.addColorStop(1,"#636766");
    }else{
        gradient.addColorStop(0,"#D1D1D1");
        gradient.addColorStop(1,"#F9F9F9");
        }
    //context.stroke();
    context.fillStyle=gradient ;
    context.fill();//填充,这两行的顺序不能变，stroke()用来描边
}

chess.onclick = function(e){
    if(over){
        return;
        }
    var x = e.offsetX;
    var y = e.offsetY;
    var i = Math.floor(x / 30);
    var j = Math.floor(y / 30);
    if(chessBoard[i][j]==0){
    oneStep(i,j,me) ;
    if(me){
        chessBoard[i][j]=1;
        }else{
            chessBoard[i][j]=2;
            }
        me = !me ;
    for(var k=0;k<count;k++){
        if(wins[i][j][k]){
            myWin[k]++;
            computerWin[k] = 6 ;
            if(myWin[k]==5){
                alert('you win!');
                over = true ;
                }
            }
        }
    }
}