<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>五子棋</title> <link rel="stylesheet" href="css/new_file.css" /> </head> <body> <canvas id="chess" width="450px" height="450px"></canvas> <script src="js/new_file.js" type="text/javascript"></script> </body> </html>
canvas{ display: block; margin: 50px auto; box-shadow: -2px -2px 2px #efefef,5px 5px 55px #b9b9b9; }
var me = true; var chessBoard = []; 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; //初始索引为0 for (var i = 0; i < 11; 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; //wins[0][1][1]=true; //wins[0][2][1]=true; //wins[0][3][1]]=true; //wins[0][4][1]=true; //wins[0][5][1]=true; 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"; //stroke颜色 var logo = new Image(); logo.src = "img/5.jpg"; logo.onload = function() { context.drawImage(logo, 0, 0, 450, 450); drawChessBoard(); oneStep(0, 0, true); oneStep(1, 1, false); } 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); //第一个圆的坐标，1坐标，1半径，第二个圆（里面）的坐标，2坐标，2半径 if (me) { //黑子 gradient.addColorStop(0, "#0a0a0a"); gradient.addColorStop(1, "#636766") } else { //白子 gradient.addColorStop(0, "#d1d1d1"); gradient.addColorStop(1, "#f9f9f9") } context.fillStyle = gradient; //fill颜色 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); 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() { //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]) { 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] == 3) { 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] == 3) { 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 = myScore[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; } } //context.moveTo(0, 0); //context.lineTo(450, 450); //context.stroke();