用原生JS结合Canvas实现黑白五子棋小游戏

从效果图可以看到，棋盘的横竖可以放的位置为13*13，通过canvas画棋盘：

        //绘画棋盘
        var drawChessBoard = function(){
                   for(var i = 1; i <= 14; i++){
            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()
        }
        for(var i = 0; i <= 13; i++){
            game.chess_Board[i] = [];
            game.lianz[i] = [];
            for(var j = 0; j <= 13; j++){
                game.chess_Board[i][j] = 0;
                game.lianz[i][j] = 0;
            }
        }
        }

画好棋盘后，我们来计算赢法：

win: function(x,y,c,m,li){
        let ms = 1;
        var continuity = [];
        for(let i = 1; i < 5; i++){
            if(game.chess_Board[x + i * m[0]]){
                if(game.chess_Board[x + i * m[0]][y + i * m[1]] === c){
                    continuity.push([x + i * m[0],y + i * m[1]]) 
                    ms++;
                }else{
                    break;
                }
            }
        }
    
        for(let i = 1; i < 5; i++){
            if( game.chess_Board[x - i * m[0]]){
                if( game.chess_Board[x - i * m[0]][y - i * m[1]] === c){
                    continuity.push([x - i * m[0],y - i * m[1]]) 
                    ms++;
                }else{
                    break;
                }
            }
        }
    
        if(ms >= 5){
            //alert(c + "赢了")
            setTimeout(function(){
                console.log(c + "赢了")
            },600)
            continuity.push([x,y]);
            game.chessOff = false;
            game.regret_chess.style.background = '#d0cdcd';
            game.regret_chess.style.color = '#505050';
            let s = 5;
            let ls = [270,300,330,360,390];
            let ls1 = [390,420,450,480,510];
            continuity.forEach(function(value,index){
                let time = setInterval(function(){
                    game.lianz[value[0]][value[1]].style.transform = 'scale(0.9)';
                    game.lianz[value[0]][value[1]].style.boxShadow = "0px 0px 2px 2px #ffd507";
                    s--;
                    s <= 0 ? clearInterval(time) : clearInterval(time);
                },ls[index])
                let time2 = setInterval(function(){
                    game.lianz[value[0]][value[1]].style.transform = 'scale(1)';
                    game.lianz[value[0]][value[1]].style.boxShadow = "0px 0px 2px 2px #ffd507";
                    s++
                    s >= 5 ? clearInterval(time2) : clearInterval(time2);
                },ls1[index])
            })

            for(var i = 0; i < game.chess_Board.length; i++){
                for(var j = 0; j < game.chess_Board.length; j++){
                    if(game.chess_Board[i][j] === 0){
                       game.chess_Board[i][j] = "null";
                    }
                }
            }
            
            game.h.forEach(function(value,index){
                value.dm.innerText = value.list;
            })

            li == 1 ? game.winChesee.className = "state-chess Wchess" : game.winChesee.className = "state-chess Bchess";
            game.winName.innerText = c + "赢了";
            this.winner.style.display = "block";
        }
    }