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.οnlοad=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;
}
}
}
}