javascript五子棋小游戏,基于div+canvas的五子棋小游戏

javascript五子棋小游戏
基于div+canvas的五子棋小游戏

示例地址:链接

开始游戏：

主要逻辑：

1.绘制棋盘

/**
         * 
         * 绘制棋盘
         * @param {*} point
         *  */
        function DrawBoard() {
   
            points = []
            ctx.beginPath();
            // 绘制棋盘，14*14，每格50px*50px
            for (let s = 0; s < counts + 1; s++) {
   
                //先绘制横
                ctx.moveTo(50, 50 * (s + 1));
                ctx.font = "14px Arial";
                ctx.lineTo(widths, 50 * (s + 1));
                // 绘制横的文字，从15开始
                ctx.fillText((counts + 1 - s), widths + 10, 50 * (s + 1)+4);
                points.push([50, 50 * (s + 1), widths, 50 * (s + 1)]);
                // 再绘制竖
                ctx.moveTo(50 * s + 50, 50);
                ctx.lineTo(50 * s + 50, heights);
                // 绘制底部文字
                ctx.fillText(bottomArray[s], 50 * s + 50-4, heights + 20);

            }
            ctx.closePath();
            ctx.stroke();

            if(!isStart)
             OpenDialog("开始游戏");
        }

2.绘制棋子

/** 
         * 绘制棋子
         * **/
        function DrawCircle(point2, isBlack = true) {
   

            ctx.beginPath();
            ctx.save();
            // 绘制圆形
            ctx.arc(point2.x, point2.y, gridWidth * 0.2, 0, 2 * Math.PI);
            ctx.closePath();
            // 绘制具体的颜色
            ctx.shadowColor = SHADOW_COLOR;
            ctx.shadowOffsetX = ctx.shadowOffsetY = gridWidth * 0.06; // 位置偏移来实现阴影效果
            ctx.shadowBlur = gridWidth * 0.04;
            const gradient = ctx.createRadialGradient(point2.x, point2.y, 0, point2.x, point2.y, gridWidth * 0.4); //利用镜像画面实现立体感
            gradient.addColorStop(0, isBlack ? BLACK_CHESS_TOP_COLOR : WHITE_CHESS_TOP_COLOR);
            gradient.addColorStop(1, isBlack ? BLACK_CHESS_COLOR : WHITE_CHESS_COLOR);
            ctx.fillStyle = gradient;
            ctx.fill();

            ctx.restore();//保存最开始的状态，避免被影响---canvas相当于一个画笔，颜色之类的可能会改变
        }

3.获取棋盘所有点

/**
         * 获取棋盘所有交点的坐标 
         * 
         * **/
        function getAllIntersectPoints() {
   
            pointsAll = []
            // 获取所有交点的坐标
            for (let i = 0; i < points.length; i++) {
   
                // 第一个为x轴，每个需要+50，第二个不变，3和4暂时不需要
                // 一行15个点
                for (let s = 0; s < 15; s++) {
   
                    pointsAll.push({
    x: points[i][0] + (50 * s), y: points[i][1], radius: gridWidth * 0.5, tr: i, td: s, status: -1 })
                }
            }
        }

4.开始游戏

// 棋子属性
        BLACK_CHESS_COLOR = '#000000', // 黑棋底黑
        BLACK_CHESS_TOP_COLOR = '#707070', // 黑棋顶灰，顶灰过渡到底黑+阴影=立体
        WHITE_CHESS_COLOR = '#D5D8DC',  // 白棋底灰
        WHITE_CHESS_TOP_COLOR = '#FFFFFF', // 白棋顶白，顶白过渡到底灰+阴影=立体
        SHADOW_COLOR = 'rgba(0, 0, 0, 0.5)', // 阴影颜色

        canvas.onclick = function (e) {
   
            x = e.offsetX;
            y = e.offsetY;
            if(!isStart){
   
               if (x >= 370 && x <= 390 && y >= 361 && y <= 391) {
   
                // 游戏开始
                RestartDrawPiece();
               }
 
            } 
            if(!isStart){
   
                return;
            }

            // 根据位置判断下是否在点位范围内
            for (let m = 0; m < pointsAll.length; m++) {
   
                var point2 = pointsAll[m]
                // 判断是不是在点位范围，在就获取点位
                if (Math.sqrt(Math.pow(x - point2.x, 2) + Math.pow(y - point2.y, 2)) <= point2.radius) {
   
                    if (pointsAll[m].status == -1) {
   
                        isBlack = !isBlack;
                        pointsAll[m].status = isBlack ? 1 : 0;
                        DrawCircle(pointsAll[m], isBlack);
                        if(canPlacePiece(isBlack, pointsAll[m].x, pointsAll[m].y)){
   
                            if(isBlack){
   

                                OpenD