五子棋 AI篇
效果图
index.js
var chess=document.getElementById("chess"); var cxt=chess.getContext('2d'); cxt.strokeStyle="#BFBFBF"; var bgimg=new Image(); bgimg.src="img/1.jpg"; bgimg.onload=function(){ cxt.drawImage(bgimg,0,0,450,450);//画背景 drawline();//画棋盘线 drawText(); } var drawline=function(){ for(var i=0;i<15;i++) { cxt.moveTo(15+i*30,15); cxt.lineTo(15+i*30,435); cxt.stroke(); cxt.moveTo(15,15+i*30); cxt.lineTo(435,15+i*30); cxt.stroke(); } } var drawText=function(){ cxt.fillStyle="#333"; cxt.textAlign="right"; for(var i=0;i<15;i++) { cxt.fillText((i+1).toString(),18+i*30,12); cxt.fillText((i+1).toString(),12,20+i*30); } } var oneStep=function(i,j,me){//画棋子 cxt.beginPath(); cxt.arc(15+i*30,15+j*30,13,0,2*Math.PI); cxt.closePath(); var gradient=cxt.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"); } cxt.fillStyle=gradient; cxt.fill(); }
win.js
//赢法数组 var wins = []; //第count种赢法 var count = 0; //赢法的统计数组 var myWin = []; var computerWin = []; //结束标识 var gameover = false; var chess = document.getElementById("chess"); var me = true; //判断是黑棋还是白棋 var chessBoard = []; //判断是否已落子 for(var i = 0; i < 15; i++) { chessBoard[i] = []; for(var j = 0; j < 15; j++) { chessBoard[i][j] = 0; } } //再来一次 var again=document.getElementById("again"); again.onclick=function(){ window.location.reload(); } //初始化数据 for(var i = 0; i < 15; i++) { wins[i] = []; for(var j = 0; j < 15; j++) { wins[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++; } } //console.log(count); //572 //初始化 for(var i = 0; i < count; i++) { myWin[i] = 0; computerWin[i] = 0; } chess.onclick = function(e) { //点击棋盘下棋 if(gameover) { 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]++;//我的第k种赢法+1 computerWin[k] = 6;//计算机赢法为异常 if(myWin[k] == 5) {//如果第K种赢法=5时，表示已经赢了 gameover = true; alert("恭喜，你赢了"); } } } if(!gameover) { computerAI(); } } } var computerAI = function() {//电脑AI算法 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]) { //某一种赢法存在 switch(myWin[k]) {//查看第k种赢法目前的子数，如果时4颗，表示即将达成5颗，分数最高 case 1: myScore[i][j] += 200; break; case 2: myScore[i][j] += 400; break; case 3: myScore[i][j] += 2000; break; case 4: myScore[i][j] += 10000; break; } switch(computerWin[k]) { case 1: computerScore[i][j] += 220; break; case 2: computerScore[i][j] += 420; break; case 3: computerScore[i][j] += 2100; break; case 4: computerScore[i][j] += 20000; break; } } } 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; } } } } } setTimeout(function(){ me = !me; oneStep(u, v, false); },600); 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) { gameover = true; alert("很遗憾，你输了"); } } } if(!gameover) { me = !me; } }
