前端给客户实现了一个【五子棋】的小游戏，有点6！

文章预览

前言 大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~ 又很多朋友最近说想要入门  Canvas ，问我能不能出一篇讲解  Canvas  的文章，但是我感觉直接讲会比较无聊，还不如通过一些案例来让大家去手敲呢 所以我准备使用  Canvas  实现一个 五子棋 的小游戏，希望大家能喜欢~ 效果 & 实现思路 最终的效果如下： 五子棋的游戏流程如下： 1、首先绘制棋盘 2、黑白双方轮流落子，且不能将棋子下在已有棋子的位置上 3、检查是否有五子连成一线的情况，若有，则该方获胜 4、附加玩法：与AI对弈（实现单人游戏体验） 绘制棋盘 实际上非常容易，只需使用  ctx.moveTo  和  ctx.lineTo  方法，横向绘制  15  条线条，再纵向绘制  15  条线条，便大功告成 这样就画出了棋盘： 黑白子轮流下棋 一、绘制棋子 ………………………………