文件夹建立：
UI
image
logo.jsp
yw.jsp
cw.jsp
js
script.js
css
style.css
index.html
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>五子棋游戏</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <canvas id="chess" width="450px" height="450px"></canvas> <script type="text/javascript" src="js/script.js"></script> </body> </html>
script.js
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++;
}
}
var over = false;
var myWin = [];
var compWin = [];
for (var i = 0; i < count; ++i) {
myWin[i] = 0;
compWin[i] = 0;
}
var chess = document.getElementById(‘chess‘);
var context = chess.getContext(‘2d‘);
context.strokeStyle = "#BFBFBF";
var logo = new Image();
logo.src = "images/logo.jpg";
var yw = new Image();
yw.src = "images/yw.png";
var cw = new Image();
cw.src = "images/cw.png";
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;
}
}
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 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, 20);
if (me) {
gradient.addColorStop(0, "#0A0A0A");
gradient.addColorStop(1, "#636766");
}
else {
gradient.addColorStop(0, "#D1D1D1");
gradient.addColorStop(1, "#F9F9F9");
}
context.fillStyle = gradient;
context.fill();
}
var compAI = function () {
var myScore = [];
var compScore = [];
var max = 0;
var x = 0, y = 0;
for (var i = 0; i < 15; ++i) {
myScore[i] = [];
compScore[i] = [];
for (var j = 0; j < 15; ++j) {
myScore[i][j] = 0;
compScore[i][j] = 0;
}
}
for (var i = 0; i < 15; ++i) {
for (var j = 0; j < 15; ++j) {
if (chessBoard[i][j] == 0) {
for (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] += 600;
else if (myWin[k] == 4)
myScore[i][j] += 800;
if (compWin[k] == 1)
compScore[i][j] += 220;
else if (compWin[k] == 2)
compScore[i][j] += 420;
else if (compWin[k] == 3)
compScore[i][j] += 620;
else if (compWin[k] == 4)
compScore[i][j] += 820;
}
}
if (myScore[i][j] > max) {
max = myScore[i][j];
x = i;
y = j;
}
else if (myScore[i][j] == max) {
if (compScore[i][j] > compScore[x][y]) {
x = i;
y = j;
}
}
if (compScore[i][j] > max) {
max = compScore[i][j];
x = i;
y = j;
}
else if (compScore[i][j] == max) {
if (myScore[i][j] > myScore[x][y]) {
x = i;
y = j;
}
}
}
}
}
oneStep(x, y, false);
chessBoard[x][y] = 2;
for (var k = 0; k < count; ++k) {
if (wins[x][y][k]) {
compWin[k]++;
myWin[k] = 6;//不可能赢
if (compWin[k] == 5) {
window.alert("computer win");
context.drawImage(cw, 0, 0, 450, 450);
over = true;
}
}
}
if (!over) {
me = !me;
}
}
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]++;
compWin[k] = 6;//不可能赢
if (myWin[k] == 5) {
window.alert("you win");
context.drawImage(yw, 0, 0, 450, 450);
over = true;
}
}
}
if (!over) {
me = !me;
compAI();
}
}
}style.css
canvas{
display:block;
margin:50px auto;
box-shadow:-2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9;
}结果显示：
本文出自 “小止” 博客，请务必保留此出处http://10541556.blog.51cto.com/10531556/1875554
原文：http://10541556.blog.51cto.com/10531556/1875554