我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

JS canvas绘制五子棋的棋盘

码上掘金展示

五子棋 - 码上掘金 (juejin.cn)

详细解释

本文为大家分享了JS canvas绘制五子棋棋盘的具体代码

五子棋棋盘落子点对应的二维数组。数组的元素对应落子点。比如数组元素值为0表示该元素对应的落子点没有棋子，数组元素值为1表示该元素对应的落子点有白棋子，数组元素值为2表示该元素对应的落子点有黑棋子；

本次没有写如何赢得棋局，只能根据你们的游戏规则判断了，不果主要赢的实现应该是判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的。

判断五子棋赢棋算法

下边的函数可以实现判断五子棋赢棋的算法，也可以按照教材中相应的算法实现。

其中函数的参数xx.yy为数组下标，chess数组实现五子棋棋盘落子点的数据结构映射。

算法的思想方法是：以当前落子点对应的下标为基点，向其周围8个方向进行搜索，如果有同色子连五子，返回1，或2，否则返回0。返回1代表白棋方胜，返回2代表黑棋方胜。返回0代表没有发生赢棋数据结构状态。

box-shadow: 给元素块周边添加阴影效果。

语法：box-shadow: h-shadow v-shadow blur spread color inset；

h-shadow: （必须）阴影的水平偏移量，如果是正值，则阴影在元素块右边；如果是负值，则阴影在元素块左边。

v-shadow: （必须）阴影的垂直偏移量，如果是正值，则阴影在元素块底部；如果是负值，则阴影在元素块顶部。

blur: （可选）阴影的模糊半径，其值大于等于0；为0时阴影不具有模糊效果，值越大阴影边缘越模糊。

spread: （可选）阴影扩展半径，值为正，整个阴影都扩大；值为负，整个阴影都缩小。

color: （可选）阴影颜色。

insert: （可选）不设值则默认为外部阴影，取insert则投影为内阴影。

主要代码如下

棋盘的onclick事件：在该位置上绘制一个棋子，每次点击黑白相间

 chess.onclick=function(e){
  var x = e.offsetX;//相对于棋盘左上角的x坐标
  var y = e.offsetY;//相对于棋盘左上角的y坐标
  var i = Math.floor(x/30);
  var j = Math.floor(y/30);
  if( chessBox[i][j] == 0 ) {
  oneStep(i,j,me);
  if(me){
   chessBox[i][j]=1;
  }else{
   chessBox[i][j]=2;
  }
  me=!me;//下一步白棋
  }