谈谈前端实现五子棋游戏

闲来无事，记录下自己完成的五子棋，纯前端实现，使用到的知识点是canvas和类。运行的时候请使用谷歌浏览器哈➡️休闲游戏–五子棋��

五子棋的下法我就不介绍了，下面讲下实现的几个点：

• 实现人人对战
• 实现悔棋功能
• 实现撤消悔棋功能
• 胜利提示功能

嗯，一步一步来讲解下，在下棋的时候，得有棋盘吧，我这里使用canvas进行绘制：

画棋盘

这里分为两种棋盘的表现，一种是看得见的，如下：

// 画出棋盘
drawChessBoard() {
    const {options} = this;
    const context = this.chessboard.getContext('2d');
    const {count,padding,borderColor} = options.gobangStyle; // 传入棋盘格数，边距和边框颜色
    this.chessboard.width = this.chessboard.height = padding * count;
    context.strokeStyle = borderColor;

    for(var i = 0; i < count; i++){
        context.moveTo(15 + i * padding , 15);
        context.lineTo(15 + i * padding , count * padding - 15);
        context.stroke();
        context.moveTo(15 , 15 + i * padding);
        context.lineTo(count * padding - 15 , 15 + i * padding);
        context.stroke();
    }
}

画出的视觉上的棋盘效果如下：

在画出棋盘之后，还是不能够下棋的，需要有一个看不见的棋盘来记录落子的位置，这里使用到矩阵的形式了：

// 初始棋盘矩阵
initChessboardMatrix() {
    const {options} = this;
    const checkerboard = [];
    for(let x = 0; x < options.gobangStyle.count; x++){
        checkerboard[x] = [];
        for(let y = 0; y < options.gobangStyle.count; y++){
            checkerboard[x][y] = 0;
        }
    }
    this.checkerboard = checkerboard;
}

下棋

在棋盘准备好之后，就是刻画棋子了，无棋子怎么下棋呢？棋子要考虑到黑白两色的，代码如下：