<!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();
浙公网安备 33010602011771号