文件夹建立:

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;
}

结果显示:

wKioL1g0KzfRyGZhAAKjsHt-8Gc851.png