js 五子棋

Day 01

  Canvas

01: var chess=document.getElementById('chess')

var context=chess.getContext('2d')

取对象，赋值给chess，再通过getContext方法把一个2d 画板赋给变量context

02: 划线

context.moveTo(x1,y1);

   context.lineTo(x2,y2)

   context.stroke()

确定起点（x1,y1） 终点(x2,y2) 使用stroke（）方法划线

*画棋盘线时采用循环（画x条线时 需要x-1个间隔，此时总间隔/x-1即可）

//x轴数字总是相同，即在Y轴划线

   context.moveTo(15+i*30,15);

   context.lineTo(i*30+15,435)

   context.stroke()

   //y轴相同          

   context.moveTo(15,i*30+15);

   context.lineTo(435,i*30+15)    

   context.stroke()

03：背景图片（图片有加载时间，须使用onload）

在context上使用背景图片时，不能使用css中的background属性，（会把画的线盖住）

在js上使用Image类中的方法

var logo=new Image()

logo.src="img/1.jpg"

logo.onload=function () {

   context.drawImage(logo,0,0,450,450)

   drawChess()

}

画棋子

context.beginPath()

   context.arc(15+i*30,15+30*j,13,0,Math.PI*2)

   context.closePath()

   vargradient=context.createRadialGradient(15+i*30+2,13+30*j,13,15+i*30+2,13+30*j,0)

   if (me) {

   gradient.addColorStop(0,'#0a0a0a')

   gradient.addColorStop(1,'#696969')

   }else{

   gradient.addColorStop(0,'#d1d1d1')

   gradient.addColorStop(1,'#f9f9f9')

   }

   context.fillStyle=gradient

   context.fill()

 

Day02

算法部分

01：五子棋 赢法数组创建

创建一个三维的数组wins[i][j][count]，其中[i][j]代表了在棋盘的第i行和第j列,count 是对赢法的统计，在相应的count下共有5个wins[i][j]即5个点

   横线部分：i-行 j-列

for (var i = 0; i <15;i++) {

   for (var j=0;j<11;j++) {

      for (var k=0;k<5;k++) {

         wins[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++){

         wins[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++){

   Wins[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++){

   Wins[i+k][j-k][count]=true

}

Count++

}

}

 

02 赢法统计数组

创建Mywins[]和computerwins[]

 

先初始化，将每个wins的值设为0

 

For(var i=0;i<count;i++){

   Mywins[i]=computerwin[i]=0

}

 在每次落子后进行判断

For(var k=0;k<count;k++){

   If(wins[i][j][k]){

 

      Mywins[k]++

      Computer[k]=6

If(mywins[k]==5){alert(‘youwin’)}

}

}

 

 

03 电脑、AI

  

For(var i=0;i<15;i++){

   For(var j=0;j<15;j++){

   If(chessArr[i][j]==0){//判断有没有下子

   For(k=0;k<count;k++){

      //判断是不是能成功的点

      If(wins[i][j][k]){

         //算分

         if (mywin[k] == 1){

                    mySorce[i][j]+= 200

                  } else if(mywin[k] == 2) {

                    mySorce[i][j]+= 400

                  } else if(mywin[k] == 3) {

                    mySorce[i][j]+= 2000

                  } else if(mywin[k] == 4) {

                    mySorce[i][j]+= 10000

                  }

 

                  if(compwin[k] == 1) {

                    compSorce[i][j]+= 220

                  } else if(compwin[k] == 2) {

                    compSorce[i][j]+= 420

                  } else if(compwin[k] == 3) {

                    compSorce[i][j]+= 2100

                  } else if(compwin[k] == 4) {

                    compSorce[i][j]+= 20000

                  }

}

 

 

//得出最优点

 

   if (mySorce[i][j] >max) {

               max =mySorce[i][j];

               u = i;

               v = j;

            } else if(mySorce[i][j] == max) {

               if(compSorce[i][j] > compSorce[u][v]) {

                  u = i;

                  v = j;

               }

            }

 

            if(compSorce[i][j] > max) {

               max =compSorce[i][j];

               u = i;

               v = j;

            } else if(compSorce[i][j] == max) {

               if(mySorce[i][j] > mySorce[u][v]) {

                  u = i;

                  v = j;

}

}

}

}