五子棋是一款著名的策略性桌面游戲，采用圍棋部分規則。它的目標是在棋盤上先把自己的五個棋子連成一條線的玩家獲勝。在這種游戲中，JavaScript 可以發揮關鍵作用，我們可以使用它來實現五子棋游戲，下面我們就來講解一下。

首先，我們需要定義一個 15*15 的棋盤，并在其上繪制網格

function drawBoard(){
for(var i=0;i<15;i++){
context.strokeStyle="#BFBFBF";
context.beginPath();
context.moveTo(15+i*30,15);
context.lineTo(15+i*30,435);
context.stroke();
context.beginPath();
context.moveTo(15,15+i*30);
context.lineTo(435,15+i*30);
context.stroke();
}
}

接下來，我們可以編寫函數處理鼠標點擊事件，實現棋子的落子

canvas.onclick = function(e){
if(!over){
if(!me){ 
return false;
}
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();
}
}
}
}

隨后，我們需要添加一個計算機AI，讓電腦也能自動下棋

function computerAI(){
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] == 4){
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] == 4){
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  = computerScore[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;
}
}

最后，我們需要檢查勝負狀態，判斷獲勝的一方（或平局）

function checkWin(){
for(var i=0;i<count;i++){
for(var j=0;j<15;j++){
for(var k=0;k<15;k++){
if(wins[j][k][i]){
if(chessBoard[j][k] === 1){
myWin[i]++;
computerWin[i] = 6;
if(myWin[i] === 5){
window.alert("你贏了！");
over = true;
}
}else if(chessBoard[j][k] === 2){
computerWin[i]++;
myWin[i] = 6;
if(computerWin[i] === 5){
window.alert("計算機贏了！");
over = true;
}
}
}
}
}
}
}

到此為止，我們已經成功的使用 JavaScript 實現了一個簡單的五子棋游戲。當然，這只是一個簡單的例子，在實際使用中，我們可以根據需求添加更多的功能，例如加入悔棋、重新開始等功能。希望這篇文章能夠為您提供一些幫助。