基于javascript canvas实现五子棋游戏

首先，基于javascript canvas实现五子棋游戏，需要掌握以下几个要点：

1. Canvas基础知识
2. 五子棋基本规则
3. JavaScript语言

以下是实现五子棋游戏的具体步骤：

步骤一：设置页面布局

首先定义一个画布<canvas>元素，用于绘制五子棋棋盘。设置宽度和高度为900像素，如下所示：

<canvas id="chess" width="900" height="900"></canvas>

在CSS中设置样式：

#chess {
  border: 1px solid #333;
  margin: 20px auto;
  display: block;
}

步骤二：绘制棋盘

在JavaScript中获取canvas元素，并定义一个2D上下文：

var chess = document.getElementById("chess");
var context = chess.getContext("2d");

棋盘的绘制可以使用双重循环，由于五子棋棋盘为正方形，可以只遍历一次。每隔40个像素绘制一条横线和一条竖线。通过绘制黑白点，实现棋盘星位。实现代码如下：

context.strokeStyle = "#bfbfbf";   //设置线的颜色为灰色
context.lineWidth = 2;             //设置线的宽度为2px
for (var i = 0; i < 15; i++) {
  context.moveTo(20 + i * 40, 20);        //绘制横线，每隔40像素绘制一条线
  context.lineTo(20 + i * 40, 580);
  context.stroke();
  context.moveTo(20, 20 + i * 40);        //绘制竖线，每隔40像素绘制一条线
  context.lineTo(580, 20 + i * 40);
  context.stroke();
}

通过绘制黑白点，实现棋盘星位：

var starControlPoints = [[3, 3], [11, 3], [7, 7], [3, 11], [11, 11]];
for (var i = 0; i < starControlPoints.length; i++) {
  var x = 20 + starControlPoints[i][0] * 40 - 4;    //星位坐标计算
  var y = 20 + starControlPoints[i][1] * 40 - 4;
  context.beginPath();      //绘制白点
  context.arc(x, y, 4, 0, 2 * Math.PI);
  context.fillStyle = "#ffffff";
  context.fill();
}

步骤三：实现下棋功能

在JavaScript中定义一个数组，用于存储棋盘上每个交叉点的状态。1表示黑子，2表示白子，0表示空。每次下完一步棋，就判断胜负情况。实现下棋功能代码如下：

var chessBoard = [];
for (var i = 0; i < 15; i++) {
  chessBoard[i] = [];
  for (var j = 0; j < 15; j++) {
    chessBoard[i][j] = 0;
  }
}

var me = true;  //黑棋先手
context.fillStyle = "#000000"; //设置黑棋颜色

chess.onclick = function (e) {
  if (!me) {    //当前不是黑棋下棋
    return;
  }
  var x = e.offsetX;
  var y = e.offsetY;
  var i = Math.floor(x / 40);   //计算坐标
  var j = Math.floor(y / 40);
  if (chessBoard[i][j] == 0) {   //当前位置为空
    drawChess(i, j, me);
    chessBoard[i][j] = 1;

    //判断是否胜利
    for (var k = 0; k < count; k++) {
      if (wins[i][j][k]) {
        blackWin[k]++;
        whiteWin[k] = 6;    //设置为不可能胜利的大数
        if (blackWin[k] == 5) {
          alert("黑棋胜利");
          over = true;
        }
      }
    }
    if (!over) {
      me = !me;   //转换权利
      computerAI();
    }
  }
}

步骤四：实现电脑AI

电脑AI的实现，可以采用极大极小值算法。通过枚举下一步棋的所有可能性，计算出每种情况下黑子和白子的得分差，并选择最优情况下黑子得分最大的位置进行下棋。其中，黑子得分计算方式为五个相连时得分为10000，四个相连时得分为100，三个相连时得分为10，两个相连时得分为1。白子的得分计算方式和黑子相反。

举个例子，当电脑方下第一步时，可以将棋子下在中间位置，即（7,7），这样可以获得最高分数。实现代码如下：

var drawChess = function (i, j, me) {
  var x = 20 + i * 40;
  var y = 20 + j * 40;
  context.beginPath();
  context.arc(x, y, 18, 0, 2 * Math.PI);
  context.closePath();
  var gradient = context.createRadialGradient(x, y, 20, x, y, 0);  //阴影配置
  if (me) {     //黑棋下棋
    gradient.addColorStop(0, "#0a0a0a");
    gradient.addColorStop(1, "#636766");
  } else {      //白棋下棋
    gradient.addColorStop(0, "#d1d1d1");
    gradient.addColorStop(1, "#f9f9f9");
  }
  context.fillStyle = gradient;
  context.fill();
};

以上就是基于Javascript-canvas实现五子棋游戏的完整攻略。

示例一：你可以在此链接查看完整的五子棋游戏代码：https://github.com/ht5517/chess_demo

示例二：你也可以查看已经实现的五子棋游戏：https://5zixi.qiyam.top/