最好放点代码或者console的报错出来 这么干说也没法看呀,
话说你可以换个浏览器试试,我之前用chrome 棋子渲染一直不对,换IE就好了
这代码两不多照着写。没问题的。
/**
*
*/
var me = true;
var chessBorad = [];
var over = false;
//赢法数组
var wins = [];
//赢法统计数组
var myWin = [];
var computerWin = [];
for(var i = 0;i < 15;i++){
chessBorad[i] =[];
for(var j = 0;j < 15;j++){
chessBorad[i][j] =0;
}
}
//赢法数组初始化
for(var i = 0;i < 15;i++){
wins[i] =[];
for(var j = 0;j < 15;j++){
wins[i][j] =[];
}
}
var count = 0;
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++;
}
}
for(var i = 0;i<count ;i++){
myWin[i] = 0;
computerWin[i] = 0;
}
var chess = document.getElementById('chess');
var context = chess.getContext('2d');
context.strokeStyle = "#BFBFBF";
var logo = new Image();
logo.src="images/8.jpg";
logo.onload = function(){
context.drawImage(logo,0,0,450,450);
drawChessBoard();
}
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 onStep = 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+i*30-2,13,15+i*30+2,15+i*30-2,0);
if(me){
gradient.addColorStop(0,"#0A0A0A");
gradient.addColorStop(1,"#636766");
}else{
gradient.addColorStop(0,"#D1D1D1");
gradient.addColorStop(1,"#F9F9F9");
}
context.fillStyle = gradient;
context.fill();
}
chess.onclick = function(e){
if(over){
return;
}
if(!me){
return;
}
var x = e.offsetX;
var y = e.offsetY;
var i = Math.floor(x / 30);
var j = Math.floor(y / 30);
if(chessBorad[i][j] == 0){
onStep(i,j,me);
chessBorad[i][j]=1;
for(var k=0;k<count;k++){
if(wins[i][j][k]){
myWin[k]++;
computerWin[k]=6;
if(myWin[k]==5){
alert("你赢了");
over = true;
}
}
}
if(!over){
me = !me;
computer();
}
}
}
var computer = function(){
var myScore = [];
var computerScore = [];
var u =0;
var v = 0;
var max = 0;
for(var i=0;i<15;i++){
myScore[i]=[];
computerScore[i]=[];
for(var j=0;j<15;j++){
myScore[i][j]=0;
computerScore[i][j]=0;
}
}
for(var i=0;i<15;i++){
for(var j=0;j<15;j++){
if(chessBorad[i][j]==0){
for(var k=0;k<count;k++){
if(wins[i][j][k]){
if(myWin[k]==1){
myScore[i][j]+=200;
}else if(myWin[k]==2){
myScore[i][j]+=400;
}else if(myWin[k]==3){
myScore[i][j]+=2000;
}else if(myWin[k]==4){
myScore[i][j]+=10000;
}
if(computerWin[k]==1){
computerScore[i][j]+=220;
}else if(computerWin[k]==2){
computerScore[i][j]+=420;
}else if(computerWin[k]==3){
computerScore[i][j]+=2100;
}else if(computerWin[k]==4){
computerScore[i][j]+=20000;
}
}
}
if(myScore[i][j]>max){
max = myScore[i][j];
u = i;
v = j;
}else if(myScore[i][j]==max){
if(computerScore[i][j]>computerScore[u][v]){
u = i;
v = j;
}
}
if(computerScore[i][j]>max){
max = computerScore[i][j];
u = i;
v = j;
}else if(computerScore[i][j]==max){
if(myScore[i][j]>myScore[u][v]){
u = i;
v = j;
}
}
}
}
}
onStep(u,v,false);
chessBorad[u][v]=2;
for(var k=0;k<count;k++){
if(wins[u][v][k]){
computerWin[k]++;
myWin[k]=6;
if(computerWin[k]==5){
alert("你输了");
over = true;
}
}
}
if(!over){
me = !me;
}
};
let chessBoard = []; let me = true; let over = false; let wins = []; let myWin = []; var computerWin = [] for (var i = 0; i < 15; i++) { chessBoard[i] = [] for (var j = 0; j < 15; j++) { chessBoard[i][j] = 0 } } for (var i = 0; i < 15; i++) { wins[i] = [] for (var j = 0; j < 15; j++) { wins[i][j] = [] } } var count = 0 for (var i = 0; i < 15; i++) { for (var j = 0; j < 11; j++) { for (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 (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 (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 (k = 0; k < 5; k++) { wins[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('chess') var context = chess.getContext('2d') context.strokeStyle = '#BFBFBF' var logo = new Image() logo.src = " " //image path window.onload = function () { // context.drawImage(null, 0, 0, 450, 450) drawChessBoard() // oneStep(0, 0, true) // oneStep(1, 1, false) // context.beginPath() // context.arc(200,200,100,0,2*Math.PI) // context.closePath() // var gradient = context.createRadialGradient(200,200,50,200,200,20) // gradient.addColorStop(0,'#0A0A0A') // gradient.addColorStop(1,'#636766') // context.fillStyle = gradient // context.fill() } var drawChessBoard = function () { for (var i = 0; i < 15; i++) { context.moveTo(15 + i * 30, 15) //15 context.lineTo(15 + i * 30, 435) //435 context.stroke() context.moveTo(15, 15 + i * 30) //15 context.lineTo(435, 15 + i * 30) //435 context.stroke() } } // // context.moveTo(0,0) // context.lineTo(450,450) // 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, 15 + j * 30, 0) if (me) { gradient.addColorStop(0, '#0A0A0A') gradient.addColorStop(1, '#636766') } else { gradient.addColorStop(0, '#D1D1D1') gradient.addColorStop(1, '#F9F9F9') } context.fillStyle = gradient context.fill() } chess.onclick = function (e) { if (over) { return } if (!me) { 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 // } for (var k = 0; k < count; k++) { if (wins[i][j][k]) { myWin[k]++ computerWin[k] = 6 if (myWin[k] === 5) { window.alert('你赢了') over = true } } } if (!over) { me = !me computerAI() } } // oneStep(i,j,me) } var computerAI = function () { var myScore = [] var computerScore = [] var max = 0 var u = 0 var v = 0 for (var i = 0; i < 15; i++) { myScore[i] = [] computerScore[i] = [] for (var j = 0; j < 15; j++) { myScore[i][j] = 0 computerScore[i][j] = 0 } } for (var i = 0; i < 15; i++) { for (var j = 0; j < 15; j++) { if (chessBoard[i][j] === 0) { for (var k = 0; k < count; k++) { if (wins[i][j][k]) { if (wins[k] === 1) { myScore[i][j] += 200 } else if (myWin[k] === 2) { myScore[i][j] += 400 } else if (myWin[k] === 3) { myScore[i][j] += 2000 } else if (myWin[k] === 4) { myScore[i][j] += 10000 } if (computerWin[k] === 1) { computerScore[i][j] += 220 } else if (computerWin[k] === 2) { computerScore[i][j] += 420 } else if (computerWin[k] === 3) { computerScore[i][j] += 2100 } else if (computerWin[k] === 4) { computerScore[i][j] += 20000 } } } if (myScore[i][j] > max) { max = myScore[i][j] u = i v = j } else if (myScore[i][j] === max) { if (computerScore[i][j] > computerScore[u][v]) { u = i v = j } } if (computerScore[i][j] > max) { max = computerScore[i][j] u = i v = j } else if (computerScore[i][j] > max) { if (computerScore[i][j] > computerScore[u][v]) { u = i v = j } } } } } oneStep(u, v, false) chessBoard[u][v] = 2 for (var k = 0; k < count; k++) { if (wins[u][v][k]) { computerWin[k]++ myWin[k] = 6 if (computerWin[k] === 5) { window.alert('AI赢了') over = true } } } if (!over) { me = !me // computerAI() } }
把不同难度的计算权重分值更改一下,比如简单电脑,专注进攻,不防守,防守分值调低。
简单,你在alert之前在执行一次画棋子的操作,就是这个drawChessBoard();放在弹出消息前,就Ok了。
---
代码不对涩,一步一步仔细检查。
var chessBoard=[];
var me=true;
var over=false;
//赢法数组
var wins=[];
//赢法统计数组
var myWin=[];
var computerWin=[];
for(var i=0;i<15;i++){
chessBoard[i]=[];
for(var j=0;j<15;j++){
chessBoard[i][j]=0;
}
}
for(var i=0;i<15;i++){
wins[i]=[];
for(var j=0;j<15;j++){
wins[i][j]=[];
}
}
//统计所有横线的赢法
var count=0;
for(var i=0;i<15;i++){
for(var j=0;j<11;j++){
//wins[0][0][0]=true
//wins[0][1][0]=true
//wins[0][2][0]=true
//wins[0][3][0]=true
//wins[0][4][0]=true
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++;
}
}
console.log(count);
for(var i=0;i<count;i++){
myWin[i]=0;
computerWin[i]=0;
}
var chess=document.getElementById('chess');
var context=chess.getContext('2d');
context.strokeStyle="#BFBFBF";
var logo=new Image();
logo.src="image/logo.jpg";
logo.onload=function(){
//绘制北背景图
context.drawImage(logo,0,0,450,450);
//绘制五子棋棋盘
drawChessBoard();
}
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();//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");
gradient.addColorStop(1,"#636766");
}else{
gradient.addColorStop(0,"#D1D1D1");
gradient.addColorStop(1,"#F9F9F9");
}
context.fillStyle=gradient;
context.fill();//fill是用来填充的
}
chess.onclick=function(e){
if(over){
return ;
}
if(!me){
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);
chessBoard[i][j]=1;
for(var k=0;k<count;k++){
if(wins[i][j][k]){
myWin[k]++;
computerWin[k]=6;
if(myWin[k]==5){
window.alert("你赢了");
over=true;
}
}
}
if(!over){
me!=me;
computerAI();
}
}
}
var computerAI=function(){
var myScore=[];
var computerScore=[];
var max=0;
var u=0,v=0;
for(var i=0;i<15;i++){
myScore[i]=[];
computerScore[i]=[];
for(var j=0;j<15;j++){
myScore[i][j]=0;
computerScore[i][j]=0;
}
}
for(var i=0;i<15;i++){
for(var j=0;j<15;j++){
if(chessBoard[i][j]==0){
for(var k=0;k<count;k++){
if(wins[i][j][k]){
if(myWin[k]==1){
myScore[i][j]+=200;
}else if(myWin[k]==2){
myScore[i][j]+=400;
}else if(myWin[k]==3){
myScore[i][j]+=2000;
}else if(myWin[k]==4){
myScore[i][j]+=10000;
}
if(computerWin[k]==1){
computerScore[i][j]+=220;
}else if(computerWin[k]==2){
computerScore[i][j]+=420;
}else if(computerWin[k]==3){
computerScore[i][j]+=2100;
}else if(computerWin[k]==4){
computerScore[i][j]+=20000;
}
}
}
if(myScore[i][j]>max){
max=myScore[i][j];
u=i;
v=j;
}else if(myScore[i][j]==max){
if(computerScore[i][j]>computerScore[u][v]){
u=i;
v=j;
}
}
if(computerScore[i][j]>max){
max=computerScore[i][j];
u=i;
v=j;
}else if(computerScore[i][j]==max){
if(computerScore[i][j]>myScore[u][v]){
u=i;
v=j;
}
}
}
}
}
oneStep(u,v,false);
chessBoard[u][v]=2;
for(var k=0;k<count;k++){
if(wins[u][v][k]){
computerWin[k]++;
myWin[k]=6;
if(computerWin[k]==5){
window.alert("计算机赢了");
over=true;
}
}
}
if(!over){
me!=me;
}
}
UI设计的时候应该就出问题了
我是自己实现算法的,判断空棋的位置,比如这个落子点:以它为中心,米(横竖斜是不是有同色的,如果有一条直线上面有5颗,就赢了)。这样更容易理解。
按照这个老师的代码打的,就出现那这个问题了,有人说本来就应该有,我也不知道,找了其他人的,也是有必赢的那几步,电脑不会在那一次的关键时候拦截你
各种输~!!被动防御,不过学习算法也是好的~!!
你肯定是在哪步写错了,给你提供完整的参考代码吧!
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>五子棋</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <canvas id="chess" height="450px" width="450px"></canvas> <script type="text/javascript" src="js/script.js"></script> </body> </html>
style.css
canvas{ display: block; margin:50px auto; box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #B9B9B9; }
script.js
var chess = document.getElementById('chess'); var context = chess.getContext('2d'); var logo = new Image(); logo.src = 'image/2.png'; //图片加载完成 logo.onload = function(){ //绘制图片 context.drawImage( logo, 0, 0, 450, 450); //绘制棋盘 drawChessBoard(); } //设置颜色 context.strokeStyle = '#AAA'; //绘制棋盘的方法 var drawChessBoard = function(){ for(var i=0; i<15; i++ ){ //丛线 context.moveTo(15 + i*30, 15); context.lineTo(15 + i*30, 435); //横线 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,'#000'); gradient.addColorStop(1,'#666'); }else{ gradient.addColorStop(0,'#DDD'); gradient.addColorStop(1,'#FFF'); } //填充颜色设置 context.fillStyle = gradient; //执行绘制操作(填充) context.fill(); } //落子设置 默认黑旗 true 黑 false 白 var me = true; //存储棋盘交叉点坐标(二维数组) var chessBoard = []; for(var i=0; i<15; i++){ //第一维 数组 chessBoard[i] = []; for(var j=0; j<15; j++){ //坐标上存默认值 0 chessBoard[i][j] = 0; } } //赢法数组 三维数组 var wins = []; for(var i=0; i<15; i++){ //第一维数组 wins[i] = []; for(var j=0; j<15; j++){ //第二维数组 wins[i][j] = []; } } //赢法种类索引 var count = 0; //15*15 纵向赢法 165 种 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++; } } //15*15 横向赢法 165 种 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++; } } //15*15 斜向赢法 121 种 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++; } } //15*15 反斜向赢法 121 种 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++; } } //console.dir(wins); //document.title = count; //人的赢法统计数组 var myWin = []; //计算机的赢法统计数组 var computerWin = []; //表示旗有没有结束 var over = false; for(var i=0; i<count; i++){ myWin[i] = 0; computerWin[i] = 0; } chess.onclick = function(e){ //判断旗是否结束 if(over){ return; } //判断是否黑子下棋 if(!me){ return; } //事件兼容处理 var e = e || event; 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); //如果落下的是黑子 在坐标存1 chessBoard[i][j] = 1; //赢法统计 for(var k=0; k<count; k++){ if(wins[i][j][k]){ myWin[k]++; //该赢法计算机不可能再赢了 computerWin[k] = 6; // if(myWin[k] == 5){ window.alert("黑旗赢了"); over = true; } } } //如果赢法统计完成旗没有结束 if(!over){ computerAI(); me = !me; } } } //计算机下旗 var computerAI = function(){ //记录人下的旗子 var myScore = []; //记录计算机下的旗子 var computerScore = []; //保存最高分数 var max = 0; //最高分数点坐标 var maxX = 0,maxY = 0; for(var i=0; i<15; i++){ myScore[i] = []; computerScore[i] = []; for(var j=0; j<15; j++){ myScore[i][j] = 0; computerScore[i][j] = 0; } } //遍历整个棋盘 for(var i=0; i<15; i++){ for(var j=0; j<15; j++){ //该坐标可以落子 if(chessBoard[i][j] == 0){ //遍历所有赢法 for(var k=0; k<count; k++){ //判断第K种赢法是否有价值 if(wins[i][j][k]){ //判断第K种赢发黑旗是否落子 //拦截价值判断 if(myWin[k] == 1){ //拦截 myScore[i][j] += 200; }else if(myWin[k] == 2){ //拦截 myScore[i][j] += 400; }else if(myWin[k] == 3){ //拦截 myScore[i][j] += 2000; }else if(myWin[k] == 4){ //拦截 myScore[i][j] += 10000; } //计算机本身落子价值判断 if(computerWin[k] == 1){ //落子价值 computerScore[i][j] += 220; }else if(computerWin[k] == 2){ //落子价值 computerScore[i][j] += 420; }else if(computerWin[k] == 3){ //落子价值 computerScore[i][j] += 2100; }else if(computerWin[k] == 4){ //落子价值 computerScore[i][j] += 20000; } } } //存储最高分数 if(myScore[i][j] > max){ max = myScore[i][j]; maxX = i; maxY = j; }else if(myScore[i][j] == max){ if(computerScore[i][j] > computerScore[maxX][maxY]){ maxX = i; maxY = j; } } //存储最高分数 if(computerScore[i][j] > max){ max = computerScore[i][j]; maxX = i; maxY = j; }else if(computerScore[i][j] == max){ if(myScore[i][j] > myScore[maxX][maxY]){ maxX = i; maxY = j; } } } } } //计算机子 oneStep(maxX, maxY, false); chessBoard[maxX][maxY] = 2; document.title = 'x'+maxX+' Y'+maxY; console.dir(chessBoard[maxX][maxY]); //赢法统计 for(var k=0; k<count; k++){ if(wins[maxX][maxY][k]){ //白子赢法更近一步 computerWin[k]++; //该赢法黑旗不可能再赢了 myWin[k] = 6; // if(computerWin[k] == 5){ window.alert("白旗赢了"); over = true; } } } //如果赢法统计完成旗没有结束 if(!over){ me = !me; } }
var me = true;
var chessBoard = [];
var over = false;
var wins = [];
var myWin = [];
var computerWin = [];
for(var i=0; i<17; i++){
chessBoard[i] = [];
for(var j=0; j<17; j++){
chessBoard[i][j] = 0;
}
}
for(var i=0; i<17; i++){
wins[i] = [];
for(var j=0; j<17; j++){
wins[i][j] = [];
}
}
var count = 0;
for(var i=0; i<17; 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<17; 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++;
}
}
for(var i=0; i<count; i++){
myWin[i] = 0;
computerWin[i] = 0;
}
var chess = document.getElementById('chess')
var context = chess.getContext('2d')
context.strokeStyle = '#bfbfbf';
var logo = new Image();
logo.src = 'img/logo.png';
logo.onload = function (){
context.drawImage(logo, 0, 0, 340, 340);
drawChessBoard();
}
var drawChessBoard = function (){
for(var i =0; i< 17; i++){
context.moveTo(17 + i*20, 17);
context.lineTo(17 + i*20, 337);
context.stroke();
context.moveTo(17, 17 + i*20);
context.lineTo(337, 17 + i*20);
context.stroke();
}
}
var oneStep = function(i, j, me){
context.beginPath();
context.arc(17 + i*20, 17 + j*20, 9, 0, 2 * Math.PI);
context.closePath();
var gradient = context.createRadialGradient(17 + i*20 +2, 17 + j*20 - 2, 9, 17 + i*20 + 2, 17 + j*20 - 2, 0);
if(me){
gradient.addColorStop(0, '#0a0a0a');
gradient.addColorStop(1, '#636766');
}else{
gradient.addColorStop(0, '#d1d1d1');
gradient.addColorStop(1, '#f9f9f9');
}
context.fillStyle = gradient;
context.fill();
}
chess.onclick = function(e){
if(over){
return;
}
if(!me){
return;
}
var x = e.offsetX;
var y = e.offsetY;
var i = Math.floor(x / 20);
var j = Math.floor(y / 20);
if(chessBoard[i][j] == 0){
oneStep(i , j, me);
chessBoard[i][j] = 1;
for( var k=0; k<count; k++){
if(wins[i][j][k]){
myWin[k]++;
computerWin[k] == 6;
if(myWin[k] == 5){
window.alert('你赢了!');
over = true;
}
}
}
if(!over){
me = !me;
computerAI();
}
}
}
var computerAI = function() {
var myScore = [];
var computerScore = [];
var max = 0;
var u = 0, v = 0;
for(var i=0; i<17; i++){
myScore[i] = [];
computerScore[i] = [];
for(var j=0; j<17; j++){
myScore[i][j] = 0;
computerScore[i][j] = 0;
}
}
for(var i=0; i<17; i++){
for(var j=0; j<17; j++){
if(chessBoard[i][j] == 0){
for(var k=0; k<count; k++){
if(wins[i][j][k]){
if(myWin[k] == 1){
myScore[i][j] += 200;
}else if(myWin[k] == 2){
myScore[i][j] += 400;
}else if(myWin[k] == 3){
myScore[i][j] += 2000;
}else if(myWin[k] == 4){
myScore[i][j] += 10000;
}
if(computerWin[k] == 1){
computerScore[i][j] += 220;
}else if(computerWin[k] == 2){
computerScore[i][j] += 420;
}else if(computerWin[k] == 3){
computerScore[i][j] += 2200;
}else if(computerWin[k] == 4){
computerScore[i][j] += 20000;
}
}
}
if(myScore[i][j] > max){
max = myScore[i][j];
u = i;
v = j;
}else if(myScore[i][j] == max){
if(computerScore[i][j] > computerScore[u][v]){
u = i;
v = j;
}
}
if(computerScore[i][j] > max){
max = computerScore[i][j];
u = i;
v = j;
}else if(computerScore[i][j] == max){
if(myScore[i][j] > myScore[u][v]){
u = i;
v = j;
}
}
}
}
}
oneStep(u, v,false);
chessBoard[u][v] = 2;
for( var k=0; k<count; k++){
if(wins[u][v][k]){
computerWin[k]++;
myWin[k] == 6;
if(computerWin[k] == 5){
window.alert('你输了!');
over = true;
}
}
}
if(!over){
me = !me;
}
}
这是我的,里面的布局我改了一下,整体没变,你看一下
那就是代码问题咯
创建数组将每一步黑棋和白棋的位置记录下来,悔棋的时候直接删除最后的记录,然后重画之前的所有棋子
ctrl键多选
点击同一个点的处理逻辑,在chess.onclick()逻辑里要先处理,如果发现是已经点击过的点,就直接return掉;点是否已经有子的逻辑需要存储起来,后续使用时查找即可。
你都不贴代码出来,谁知道什么问题。 正常代码如下:
var over = false;
var me = true; //我
var chressBord = [];//棋盘
for(var i = 0; i < 15; i++){
chressBord[i] = [];
for(var j = 0; j < 15; j++){
chressBord[i][j] = 0;
}
}
//赢法的统计数组
var myWin = [];
var computerWin = [];
//赢法数组
var wins = [];
for(var i = 0; i < 15; i++){
wins[i] = [];
for(var j = 0; j < 15; j++){
wins[i][j] = [];
}
}
var count = 0; //赢法总数
//横线赢法
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++;
}
}
for(var i = 0; i < count; i++){
myWin[i] = 0;
computerWin[i] = 0;
}
var chess = document.getElementById("chess");
var context = chess.getContext('2d');
context.strokeStyle = '#bfbfbf'; //边框颜色
var logo = new Image();
logo.src = 'img/logo.png';
logo.onload = function(){
context.drawImage(logo,0,0,450,450);
drawChessBoard();
}
document.getElementById("restart").onclick = function(){
window.location.reload();
}
chess.onclick = function(e){
if(over){
return;
}
if(!me){
return;
}
var x = e.offsetX;
var y = e.offsetY;
var i = Math.floor(x / 30);
var j = Math.floor(y / 30);
if(chressBord[i][j] == 0){
oneStep(i,j,me);
chressBord[i][j] = 1;//我
for(var k = 0; k < count; k++){
if(wins[i][j][k]){
myWin[k]++;
computerWin[k] = 6;//这个位置对方不可能赢了
if(myWin[k] == 5){
window.alert('你赢了');
over = true;
}
}
}
if(!over){
me = !me;
computerAI();
}
}
}
//计算机下棋
var computerAI = function (){
var myScore = [];
var computerScore = [];
var max = 0;
var u = 0, v = 0;
for(var i = 0; i < 15; i++){
myScore[i] = [];
computerScore[i] = [];
for(var j = 0; j < 15; j++){
myScore[i][j] = 0;
computerScore[i][j] = 0;
}
}
for(var i = 0; i < 15; i++){
for(var j = 0; j < 15; j++){
if(chressBord[i][j] == 0){
for(var k = 0; k < count; k++){
if(wins[i][j][k]){
if(myWin[k] == 1){
myScore[i][j] += 200;
}else if(myWin[k] == 2){
myScore[i][j] += 400;
}else if(myWin[k] == 3){
myScore[i][j] += 2000;
}else if(myWin[k] == 4){
myScore[i][j] += 10000;
}
if(computerWin[k] == 1){
computerScore[i][j] += 220;
}else if(computerWin[k] == 2){
computerScore[i][j] += 420;
}else if(computerWin[k] == 3){
computerScore[i][j] += 2100;
}else if(computerWin[k] == 4){
computerScore[i][j] += 20000;
}
}
}
if(myScore[i][j] > max){
max = myScore[i][j];
u = i;
v = j;
}else if(myScore[i][j] == max){
if(computerScore[i][j] > computerScore[u][v]){
u = i;
v = j;
}
}
if(computerScore[i][j] > max){
max = computerScore[i][j];
u = i;
v = j;
}else if(computerScore[i][j] == max){
if(myScore[i][j] > myScore[u][v]){
u = i;
v = j;
}
}
}
}
}
oneStep(u,v,false);
chressBord[u][v] = 2;
for(var k = 0; k < count; k++){
if(wins[u][v][k]){
computerWin[k]++;
myWin[k] = 6;//这个位置对方不可能赢了
if(computerWin[k] == 5){
window.alert('计算机赢了');
over = true;
}
}
}
if(!over){
me = !me;
}
}
//绘画棋盘
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');
gradient.addColorStop(1,'#636766');
}else{
gradient.addColorStop(0,'#d1d1d1');
gradient.addColorStop(1,'#f9f9f9');
}
context.fillStyle = gradient;
context.fill();
}
恩,我知道了。
问题出在我们初始化棋盘的线时,没有设置
context.beginPath();和context.endPath();