canvas制作五子棋游戏（一.简单的结构）

前一阵学习了canvas，于是就打算写一个五子棋游戏当练手。

首先分析其应当具有的功能：绘制棋盘、绘制棋子。绘制棋盘则可再细分为绘制背景、绘制线条、绘制关键点。因为canvas后绘制内容会覆盖先前绘制的，所以先将棋盘绘制的大致结构写出来。

function createFrame () { //创建canvas chessBoard棋盘
  drawBoard(); //绘制背景
  drawLine(); //绘制线条
  drawPoint(); //绘制关键点
}

 

设计每个格子之间间隔为35px，棋盘格子区域外宽度为20px，并对外留15px的空白，计算canvas宽高为35*14+20*2+15*2=560px

function drawBoard () { //绘制背景
  var cxt = HTML中canvas元素.getContext('2d');
  cxt.beginPath();
  var bgColor = cxt.createLinearGradient(0, 0, 560, 560);
  bgColor.addColorStop(0, '#ffbf5f'); //设置渐变色
  bgColor.addColorStop(1, '#9b5f2b');
  cxt.fillStyle = bgColor;
  cxt.shadowColor = '#000'; //设置阴影
  cxt.shadowOffsetX = 5;
  cxt.shadowOffsetY = 5;
  cxt.shadowBlur = 5;
  cxt.fillRect(15, 15, 35 * 14 + 20 * 2, 35 * 14 + 20 * 2);
}

 

绘制线条

function _drawLine (cxt) {
  var cxt = chessBoard.getContext('2d');
  cxt.fillStyle = "#000"; //设置线型
  cxt.lineCap = 'square';
  cxt.lineWidth = 2;
  for (var i = 1; i <= 15; i++) { //绘制横线
    cxt.beginPath();
    cxt.moveTo(35, i * 35);
    cxt.lineTo(35 * 15, i * 35);
    cxt.stroke();
  }
  for (var i = 1; i <= 15; i++) { //绘制竖线
    cxt.beginPath();
    cxt.moveTo(i * 35, 35);
    cxt.lineTo(i * 35, 35 * 15);
    cxt.stroke();
  }
}

 

绘制关键点

function _drawPoint (cxt) {
  var cxt = chessBoard.getContext('2d');
  var pointPosition = [[4, 4], [4, 12], [8, 8], [12, 4], [12, 12]]; //设置关键点的坐标
  for (var i = 0, len = pointPosition.length; i < len; i++) {
    cxt.beginPath();
    cxt.arc(pointPosition[i][0] * 35, pointPosition[i][1] * 35, 5, 0, 2 * Math.PI);
    cxt.fill();
  }
}

如此，一个简单的棋盘就绘制好了。

 

下面先将绘制棋子的功能写上，并预留传递参数。参数包括棋子所下的位置、黑色or白色，以备调用。

function drawChess (x, y, type) { //x,y:棋子位置坐标 type:黑or白子
  var chessRadius = 14; //设置棋子半径
  var cxt = chessBoard.getContext('2d');
  cxt.beginPath();
  var chessColor = cxt.createRadialGradient(x - chessRadius / 2, y + chessRadius / 2, chessRadius, x + chessRadius / 2, y - chessRadius / 2, chessRadius); //径向渐变
  if (type === 黑子代码) {
    chessColor.addColorStop(0, '#444');
    chessColor.addColorStop(1, '#000');
  } else { //白色棋子颜色
    chessColor.addColorStop(0, '#111');
    chessColor.addColorStop(1, '#fff');
  }
  cxt.fillStyle = chessColor;
  cxt.arc(x, y, chessRadius, 0, 2 * Math.PI); //绘制棋子
  cxt.fill();
}

 

绘制部分暂时就是以上这么多，下面考虑逻辑部分。

仅考虑最简单的逻辑：页面加载完毕后，将进行棋盘绘制，将整个棋盘呈现。待开始游戏进行当鼠标在棋盘点击时在对应点位绘制棋子，若连5子则胜利，游戏结束。

游戏的数据：一个二维数组用来表示棋盘上的子，当前棋子颜色：0（黑）或1（白）

var data = {
  chess: [],
  currentPlayer: 0, // 默认黑子先手，0为当前黑执子，1为当前白执子
}

addEvent(开始游戏按钮, 'click', startGame);

function startGame () {
  resetData();
  addEvent(棋盘元素, 'click', playing);
}

function playing (e) { //游戏开始后在棋盘落子
  [经过鼠标点击坐标与HTML元素计算后得到x与y坐标]
  playChess(x坐标, y坐标);
}

function playChess (clickX, clickY) {
  if (data.chess[clickY][clickX] === false) { //当前位置无子
    drawChess(clickX, clickY, data.currentPlayer);
    data.chess[clickY][clickX] = data.currentPlayer;
    if ([连5子]){
      //游戏结束
    }
    data.currentPlayer = (data.currentPlayer + 1) % 2; //执子转换
  }
}

function resetData () { //data.chess数据重置
  data.chess = [];
  data.chess = new Array(15); //创建棋子二维数组
  for (var i = 0; i < 15; i++) {
    data.chess[i] = new Array(15);
    for (var j = 0; j < 15; j++) {
      data.chess[i][j] = false; //false无子，0黑子，1白子
    }
  }
  data.currentPlayer = 0; //当前执子为黑
}

如此，一个简单的框架就搭建起来了。