window.onload=function(){
    var chessBoard=[];
    var me=true;
    
    for(var i=0;i<15;i++){
        chessBoard[i]=[];
        for(var j=0;j<15;j++){
            chessBoard[i][j]=0;
        }
    }
    
    var chess=document.getElementById('chess');
    var context=chess.getContext('2d');
    
    
    context.strokeStyle='#D6D6D6'
    var logo=new Image();
    logo.src="images/zz.jpeg";  /*拿到图片*/
    logo.onload=function(){
        context.drawImage(logo,0,0,450,450);/*图片的位置*/
        drawChessBoard();//调用棋盘这个函数，先画图片在绘制棋盘，棋盘就不会被覆盖了
        /*开始绘制棋子*/
//        oneStep(0,0,true);
//        oneStep(1,1,false);
    }
    
    /*棋盘*/
    var drawChessBoard=function(){
            for(var i=0;i<15;i++){
            context.moveTo(15+i*30,15);
            context.lineTo(15+i*30,435);
            context.stroke();
            context.moveTo(15,15+i*30);
            context.lineTo(435,15+i*30);
            context.stroke();
        }
    }
    
    var oneStep=function(i,j,me){
        context.beginPath();
        context.arc(15+i*30,15+j*30,13,0,2*Math.PI);//画一个圆
        context.closePath();                 //关闭
        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");//第一个0对应200,200,50   第二个1对应200,200,20
            gradient.addColorStop(1,"#636866");
        }else{
            gradient.addColorStop(0,"#D1D1D1");//第一个0对应200,200,50   第二个1对应200,200,20
            gradient.addColorStop(1,"#F9F9F9");
        }
        context.fillStyle=gradient;
        context.fill();//填充
    }
    /*绑定点击事件*/
    chess.onclick=function(e){
        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;
    }
}