您的位置 >>> 星想互联 >>> 编程技术 >>> JQUERY+JS
js实现五子棋
点击数:41  发布时间2018-07-10 00:15:43

<html>

    <head>

        <title>Dragging</title>

        <style>

        #cans{margin:50px;}

        </style>

    </head>

    <body>

        <canvas id="cans" width="800" height="800"></canvas>

 

        <script type="text/javascript" src="jquery-1.9.0.min.js"></script>

        <script type="text/javascript">

            canv=document.getElementById("cans");

            cs=canv.getContext("2d");

            cs.beginPath();

            for(j=0;j<19;j++){

                cs.moveTo(0,j*40)

                cs.lineTo(720,j*40);

                cs.moveTo(j*40,0)

                cs.lineTo(j*40,720);

            }

 

            var arr = new Array();

            for(i=0;i<19;i++){

                arr[i]=new Array();

                for(k=0;k<19;k++){

                    arr[i][k]=0;

                }

            }

 

            cs.stroke();

 

            flag=0;

 

 

            $("#cans").on("click",function(e){

                cs.beginPath();

                x=e.offsetX;

                y=e.offsetY;

                

                for(i=0;i<19;i++){

                    if(Math.abs(x-i*40)<20){

                        mx=i*40;

                        px=i

                    }

                    if(Math.abs(y-i*40)<20){

                        my=i*40;

                        py=i;

                    }

                }

 

 

              if(arr[px][py]==0){

                flag=!flag;   

                if(flag){

                    cs.fillStyle="black"

                    cs.arc(mx,my,20,0,6.28)

                    cs.fill()

                    arr[px][py]=1;

                }else{

                    cs.fillStyle="white";

                    cs.arc(mx,my,20,0,6.28)

                    cs.fill();

                    cs.stroke();

                    arr[px][py]=2;

                }

              }

 

            //纵向检测

            if(arr[px][py-1]==arr[px][py]){

                if(arr[px][py-2]==arr[px][py]){

                    if(arr[px][py-3]==arr[px][py]){

                        if(arr[px][py-4]==arr[px][py]){

                            res=1;

                        }else{

                            for(var w=1;w<=1;w++){

                                if(arr[px][py+w]!==arr[px][py]){

                                    res=0;

                                    break;

                                }else{

                                    res=1;

                                }

                            }

                        }

                    }else{

                        for(var w=1;w<=2;w++){

                            if(arr[px][py+w]!==arr[px][py]){

                                res=0;

                                break;

                            }else{

                                res=1;

                            }

                        }

                    }

                }else{

                    for(var w=1;w<=3;w++){

                        if(arr[px][py+w]!==arr[px][py]){

                            res=0;

                            break;

                        }else{

                            res=1;

                        }

                    }

                }

              }else{

                  for(var w=1;w<=4;w++){

                      if(arr[px][py+w]!==arr[px][py]){

                          res=0;

                          break;

                      }else{

                          res=1;

                      }

                  }

              }

 

              if(res==1){

                alert('您已获胜!')

            }

 

            //横向检测

              if(arr[px-1][py]==arr[px][py]){

                if(arr[px-2][py]==arr[px][py]){

                    if(arr[px-3][py]==arr[px][py]){

                        if(arr[px-4][py]==arr[px][py]){

                            res=1;

                        }else{

                            for(var w=1;w<=1;w++){

                                if(arr[px+w][py]!==arr[px][py]){

                                    res=0;

                                    break;

                                }else{

                                    res=1;

                                }

                            }

                        }

                    }else{

                        for(var w=1;w<=2;w++){

                            if(arr[px+w][py]!==arr[px][py]){

                                res=0;

                                break;

                            }else{

                                res=1;

                            }

                        }

                    }

                }else{

                    for(var w=1;w<=3;w++){

                        if(arr[px+w][py]!==arr[px][py]){

                            res=0;

                            break;

                        }else{

                            res=1;

                        }

                    }

                }

              }else{

                  for(var w=1;w<=4;w++){

                      if(arr[px+w][py]!==arr[px][py]){

                          res=0;

                          break;

                      }else{

                          res=1;

                      }

                  }

              }

 

              if(res==1){

                  alert('您已获胜!')

              }

 

 

            //正向45度检测

              if(arr[px-1][py-1]==arr[px][py]){

                if(arr[px-2][py-2]==arr[px][py]){

                    if(arr[px-3][py-3]==arr[px][py]){

                        if(arr[px-4][py-4]==arr[px][py]){

                            res=1;

                        }else{

                            for(var w=1;w<=1;w++){

                                if(arr[px+w][py+w]!==arr[px][py]){

                                    res=0;

                                    break;

                                }else{

                                    res=1;

                                }

                            }

                        }

                    }else{

                        for(var w=1;w<=2;w++){

                            if(arr[px+w][py+w]!==arr[px][py]){

                                res=0;

                                break;

                            }else{

                                res=1;

                            }

                        }

                    }

                }else{

                    for(var w=1;w<=3;w++){

                        if(arr[px+w][py+w]!==arr[px][py]){

                            res=0;

                            break;

                        }else{

                            res=1;

                        }

                    }

                }

              }else{

                  for(var w=1;w<=4;w++){

                      if(arr[px+w][py+w]!==arr[px][py]){

                          res=0;

                          break;

                      }else{

                          res=1;

                      }

                  }

              }

 

              if(res==1){

                  alert('您已获胜!')

              }

 

 

            //反向45度检测

            if(arr[px+1][py-1]==arr[px][py]){

                if(arr[px+2][py-2]==arr[px][py]){

                    if(arr[px+3][py-3]==arr[px][py]){

                        if(arr[px+4][py-4]==arr[px][py]){

                            res=1;

                        }else{

                            for(var w=1;w<=1;w++){

                                if(arr[px-w][py+w]!==arr[px][py]){

                                    res=0;

                                    break;

                                }else{

                                    res=1;

                                }

                            }

                        }

                    }else{

                        for(var w=1;w<=2;w++){

                            if(arr[px-w][py+w]!==arr[px][py]){

                                res=0;

                                break;

                            }else{

                                res=1;

                            }

                        }

                    }

                }else{

                    for(var w=1;w<=3;w++){

                        if(arr[px-w][py+w]!==arr[px][py]){

                            res=0;

                            break;

                        }else{

                            res=1;

                        }

                    }

                }

              }else{

                  for(var w=1;w<=4;w++){

                      if(arr[px-w][py+w]!==arr[px][py]){

                          res=0;

                          break;

                      }else{

                          res=1;

                      }

                  }

              }

 

              if(res==1){

                  alert('您已获胜!')

              }

 

 

            })

            

 

 

 

        </script>

 

 

 

    </body>

</html>

来源:咸宁网站建设