纯js简易五子棋

 一、利用canvas绘制五子棋

（代码较为简陋请见谅）

这里单独拿出一个绘制好的黑色五子棋展示

    
五子棋-------------人生如棋，落子无悔！！！
    
    
    
    

二、利用canvas绘制盘

利用canvas画出十五道横十五道竖

const canvas=document.createElement('canvas');

        // 宽16*50高16*50

        canvas.width=16*50;

        canvas.height=16*50;

        document.body.append(canvas);

 

        const context=canvas.getContext('2d');

        for(let i=1;i<16;i++){

            context.moveTo(50*i,50);

            context.lineTo(50*i,750);

            context.stroke();

 

            context.moveTo(50,50*i);

            context.lineTo(750,50*i);

            context.stroke();

        }

三、落子事件

在canvas上点击获取点击坐标，处理坐标（四舍五入）后，在对应位置生成黑白棋子。

canvas.addEventListener('click',e=>{

            let {offsetX:x,offsetY:y}=e;

            if(x>=25&&x<=775&&y>=25&&y<=775){

            // console.log(Math.round(x/50)*50);

            // console.log(Math.round(y/50)*50);

 

            // 点击落子

            // 坐标X,Y

            X=Math.round(x/50)-1;

            Y=Math.round(y/50)-1;

            if(array[X][Y]===0){

            //落子无悔，计入数组

            array[X][Y]=ifblack?-1:1;

            //制作黑白棋子

            x=ifblack?Math.round(x/50)*50-10:Math.round(x/50)*50+10;

            y=ifblack?Math.round(y/50)*50-10:Math.round(y/50)*50+10;

            const gradient=context.createRadialGradient(x,y,0,x,y,13);

            gradient.addColorStop(0,ifblack?'#ccc':'#779');

            gradient.addColorStop(1,ifblack?'#000':'#bbb');

            context.fillStyle=gradient;

            context.beginPath();

            context.arc(Math.round(x/50)*50,Math.round(y/50)*50,25,0,2*Math.PI);

            context.fill();

            context.closePath();

            ifblack=!ifblack;}

四、自动判断输赢

每次落子触发一次输赢判定。判定共分四种情况。横向（横），纵向（竖），左斜（撇），右斜（捺）。

  function shu(X,Y){

           

            let times=0;

            let up=1;

            let down=1;

            let right=1;

            let left=1;

            let rdown=1;

            let lup=1;

            let ldown=1;

            let rup=1;

           

        //竖  

            while(times<10000){

               

                times++;

               

                if(sum===5){

                    console.log('游戏结束！！！');

                    if(array[X][Y]===-1){

                        console.log('黑方胜！');

                    }

                    else{

                        console.log('红方胜！');

                    }

                    break;

                }

               

               

 

                if(array[X][Y+up]&&array[X][Y]===array[X][Y+up]){

                    up++;

                    sum++;

                   

                    continue;

                   

                }

                if(array[X][Y-down]&&array[X][Y]===array[X][Y-down]){

                    down++;

                    sum++;

               

                    continue;

                }

                if(sum<5){

                   

                    break;

                }

            }

        //横      

            while(times<10000){

               

                times++;

                if(sum1===5){

                    console.log('游戏结束！！！');

                    if(array[X][Y]===-1){

                        console.log('黑方胜！');

                    }

                    else{

                        console.log('红方胜！');

                    }

                    break;

                }

           

               

 

                if(array[X+right][Y]&&array[X][Y]===array[X+right][Y]){

                    right++;

                    sum1++;

                 

                    continue;

                   

                }

                if(array[X-left][Y]&&array[X][Y]===array[X-left][Y]){

                    left++;

                    sum1++;

                    continue;

                }

                if(sum1<5){

                   

                    break;

                }

 

            }

        //撇

        while(times<10000){

               

                times++;

                if(sum2===5){

                    console.log('游戏结束！！！');

                    if(array[X][Y]===-1){

                        console.log('黑方胜！');

                    }

                    else{

                        console.log('红方胜！');

                    }

                    break;

                }

           

               

 

                if(array[X+rdown][Y-rdown]&&array[X][Y]===array[X+rdown][Y-rdown]){

                    rdown++;

                    sum2++;

                 

                    continue;

                   

                }

                if(array[X-lup][Y+lup]&&array[X][Y]===array[X-lup][Y+lup]){

                    lup++;

                    sum2++;

                    continue;

                }

                if(sum2<5){

                   

                    break;

                }

 

            }

        //捺

        while(times<10000){

               

                times++;

                if(sum3===5){

                    console.log('游戏结束！！！');

                    if(array[X][Y]===-1){

                        console.log('黑方胜！');

                    }

                    else{

                        console.log('红方胜！');

                    }

                    break;

                }

           

               

 

                if(array[X+rup][Y+rup]&&array[X][Y]===array[X+rup][Y+rup]){

                    rup++;

                    sum3++;

                 

                    continue;

                   

                }

                if(array[X-ldown][Y-ldown]&&array[X][Y]===array[X-ldown][Y-ldown]){

                    ldown++;

                    sum3++;

                    continue;

                }

                if(sum3<5){

                   

                    break;

                }
 

            }

           }

            // console.log(array);

            }

            }

        })

 

五、完整代码