// JavaScript Document
var me = true ;
var over = false ;
//定義贏法的統(tǒng)計數(shù)組
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;
?? ??? ??? ?}
?? ??? ?}
//定義贏法數(shù)組
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繪圖環(huán)境

context.strokeStyle="#BFBFBF";
//var logo = new Image() ;
//logo.src = "images/1.png";
//context.drawImage();畫出水印圖片的做法，但是這里不能實現(xiàn)，圖片擋住表格的解決辦法是控制加載先后的順序。context
window.onload = function(){
?? ?drawChessBoard();
?? ?//oneStep(0,0,true);
//?? ?oneStep(1,1,false); 用來測試能否出現(xiàn)棋子的代碼
?? ?}
?? ?
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 ;
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?}
?? ?}
}