携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

第一步，了解canvas标签。

Canvas介绍

1.canvas是html5的一个新标签，属于h5的新特性
2.canvas标签是一个图形的容器，简单点说就是一块画布，你可以在上画矩形，圆形，三角形，折线等等,也可以用来画logo
3.它是通过javascript来画的，即脚本绘制图形

canvas可以用来干啥呢？
1.制作web网页游戏（但是如果代码写的不咋的游戏可能会非常卡）
2.数据可视化（这么说你可能不明白，但我告诉你echarts就是基于canvas）
3.广告banner的动态效果非常适合用canvas制作
4.canvas还可以用来内嵌一些网页

canvas的使用

首先，在你的html页面里面，加入该标签，为了更稳定，我们再规定好宽高，那么 <canvas id="canvas" width="450" height="450"></canvas> 这个就是html的内容。不过最好我们给他设计一个盒子，把他装在div里面。

canvas 会初始化宽度为 300 像素和高度为 150 像素，所以规定宽高，不是必须的，但是，如果你绘制出来的图像是扭曲的，尝试用 width 和 height 属性为明确规定宽高，而不是使用 CSS。

那么棋盘里面，是由无数横线和直线构成，怎么画一条直线呢？

首先给大家介绍用canvas绘制直线需要用到的属性

moveTo(x,y) 可以设置线条开始位置的坐标
lineTo(x,y) 可以设置线条结束位置的坐标
lineWidth可以设置线条的宽度
strokeStyle 可以设置线条的颜色

然后在js代码里面，用 canvas: document.getElementById("canvas")获取canvas元素那么我们画线的js代码是这样的：

考虑一条一条画重复率高，于是使用循环

           for (var i = 1; i <= 14; i++) {
            // 起始点moveto
            game.ctx.moveTo(i * 30 + .5, 420)
                // 结束
            game.ctx.lineTo(i * 30 + .5, 30)
                // 横
            game.ctx.moveTo(30, i * 30 + .5)
            game.ctx.lineTo(420, i * 30 + .5)
            game.ctx.strokeStyle = "#C0A27B";
            // 结束
            game.ctx.stroke()
        }

然后我们就得到了

第二步：下棋。

怎么获取鼠标点击位置？

那么我们第一个想到的是MouseEvent offsetX,y 属性.不过获取位置。。clientx、y也可以，这里我们采用offsetx，y。使用一个函数，函数传入参数。

    canvasClick: function(e) {
        var dx = parseInt(Math.floor(e.offsetX + 15) / 30);
        var dy = parseInt(Math.floor(e.offsetY + 15) / 30);

注意，不能单纯点xy，我们棋子图片也有大小，所以取整，得到第几个格子
然后开始下棋：

var WBobj = {
            // 确定位置
            ox: (dx * 30) - 25,
            oy: (dy * 30) - 25,
            dm: document.createElement("div"),
            // 交替下棋，没有就不能下了
            class: game.e % 2 == 1 ? "Wchess" : "Bchess",
            list: game.um++,
        }

那么我们都知道，下棋不能下到棋盘外面。并且同一个地方不能落子两次，所以我们使用二维数组，把棋盘没有子的地方，初始化为0，下棋后改变棋盘对应值，保证不能重复落子。同时判断，如果我们dx，dy在棋盘外面，不能下棋。那么正常情况我们怎么落子呢？

if (game.chess_Board[dx - 1][dy - 1] == 0) {
            // 显示每个棋子位置
            game.h.push(WBobj)
            // 把棋子放在布上面
            WBobj.dm.classList.add(WBobj.class);
            // 确定落子位置
            WBobj.dm.style.left = WBobj.ox + "px";
            WBobj.dm.style.top = WBobj.oy + "px";
            // 给坐标赋值
            game.chess_Board[dx - 1][dy - 1] = game.chess_Name[game.e % 2];
             
            // 调用函数判断输赢

            // 换棋子
 
            game.e++;
            // 判断位置落子
            game.centent.appendChild(WBobj.dm)
        }
    },

那么，又有问题了，下棋是两种颜色的棋子那么在下完一次棋后，更换棋子 game.sChesee.className = game.e % 2 == 1 ? "state-chess Bchess" : "state-chess Wchess";

// 交替下棋，没有就不能下了 class: game.e % 2 == 1 ? "Wchess" : "Bchess", list: game.um++,

最后，怎么判断输赢？

1.当前什么颜色c， 2，向上3.向下，向左右遍历查询 c当前颜色，li第几个下,y判断指标

怎么使用基础的前端三件套完成一个五子棋游戏