您的位置: 首页  >  文章  >  canvas实现五子棋

canvas实现五子棋

分类: 文章 • 2024-02-06 21:39:40

展示图

canvas实现五子棋

原码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五子棋试讲</title>
</head>
<body>
<canvas width="750" height="750" style="border: 1px solid #000;"></canvas>
<script>
    var mcan=document.querySelector("canvas")
    var ctx=mcan.getContext("2d")
    var cx,cy;
    var r=20;
    var x,y;
    var px,py;
    var space=50;
    var arr=[];
    var t1=1;//横向
    var t2=1;//纵向
    var t3=1;//正斜
    var t4=1;//反斜
    var brr=["黑子胜","白子胜"]
    for(var a=0;a<mcan.height/space;a++){
        arr[a]=new Array();
        for(var b=0;b<mcan.width/space;b++){
            arr[a][b]=0;
        }
    }


    for(var i=1;i<mcan.height/space;i++){
        ctx.beginPath();
        ctx.moveTo(0,i*space);
        ctx.lineTo(mcan.width,i*space)
        ctx.stroke();
    }
    for(var j=1;j<mcan.width/space;j++){
        ctx.beginPath();
        ctx.moveTo(j*space,0);
        ctx.lineTo(j*space,mcan.height);
        ctx.stroke();
    }
    var boo=true
    mcan.function(e){
        x=e.pageX-mcan.offsetLeft;
        y=e.pageY-mcan.offsetTop;
        cx=x-x%50;
        cy=y-y%50;
        if(x-cx<=25 && y-cy<=25){
            cx=cx;
            cy=cy;
        }else if(x-cx>25 && y-cy<=25){
            cx=cx+50;
            cy=cy;
        }else if(x-cx<=25 && y-cy>25){
            cx=cx;
            cy=cy+50;
        }else{
            cx=cx+50;
            cy=cy+50;
        }
        px=cx/50;
        py=cy/50;
        if(arr[py][px]!=0){
            return;
        }
        if(px==0 || py==0){
            return;
        }
        if(boo==true){
            blackChess();
            boo=false;
            arr[py][px]=1;
        }else{
            whiteChess();
            boo=true;
            arr[py][px]=2;
        }
        console.log(arr);
        //横向
        for(px;t1<6 && arr[py][px+1]==arr[py][px];px=px+1){
            t1++;
        }
        px=cx/50;
        for(px;t1<6 && arr[py][px-1]==arr[py][px];px=px-1){
            t1++;
        }
        //纵向
        for(py;t2<6 && arr[py-1][px]==arr[py][px];py=py-1){
            t2++
        }
        py=cy/50;
        for(py;t2<6 && arr[py+1][px]==arr[py][px];py=py+1){
            t2++
        }
        //正斜
        for(px,py;t3<6 && arr[py-1][px+1]==arr[py][px];px=px+1,py=py-1){
            t3++;
        }
        py=cy/50;
        px=cx/50;
        for(px,py;t3<6 && arr[py+1][px-1]==arr[py][px];px=px-1,py=py+1){
            t3++;
        }

        //反斜
        for(px,py;t4<6 && arr[py+1][px+1]==arr[py][px];px=px+1,py=py+1){
            t4++;
        }
        py=cy/50;
        px=cx/50;
        for(px,py;t4<6 && arr[py-1][px-1]==arr[py][px];px=px-1,py=py-1){
            t4++;
        }
        py=cy/50;
        px=cx/50;

        if(t1==5 || t2==5 || t3==5 || t4==5){
            alert(brr[arr[py][px]-1]);
            t1=1;
            t2=1;
            t3=1;
            t4=1
        }else{
            t1=1;
            t2=1;
            t3=1;
            t4=1
        }
    };



    function whiteChess(){
        ctx.beginPath();
        ctx.fillStyle="#fff";
        ctx.strokeStyle="#000";
        ctx.arc(cx,cy,r,0,Math.PI*2);
        ctx.fill();
        ctx.stroke();
    }
    function blackChess(){
        ctx.beginPath();
        ctx.fillStyle="#000";
        ctx.arc(cx,cy,r,0,Math.PI*2);
        ctx.fill();
    }
</script>
</body>
</html>

尊重知识,请勿随意转载

相关推荐