<template>
  <div>
    <button @click="init">重新开始</button>
    <div class="ditu">
      <div ref="heng" class="heng" v-for="i in gezi " :key="i">
        <template v-for="t in gezi2">
          <div ref="shu" class="shu zhong" :class="{'shang':i===1&&t!==1&&t!==15,'xia':i===15&&t!==1&&t!==15,'zuo':t===1&&i!==1&&i!==15,'you':t===15&&i!==1&&i!==15,'zuoshang':i===1&&t===1,'youshang':i===1&&t===15,'zuoxia':i===15&&t===1,'youxia':i===15&&t===15}">
            <!-- <div ref="shu" class="shu" :class="{'shang':i===1&&t!==1&&t!==15,'xia':i===15&&t!==1&&t!==15,'zuo':t===1&&t!==1&&t!==15,'you':t===1&&t!==1&&t!==15,'zuoshang':i===1&&t===1,'youshang':i===1&&t===15,'zuoxia':i===15&&t===1,'zuoxia':i===15&&t===15}"> -->
            <div class="qizi" @click="xiazi(i-1,t-1)"></div>
          </div>
        </template>

      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      qishou: "黑",
      heiqiList: [],
      baiqiList: [],
      xienum: 0,
      gezi: 15,
      gezi2: 15,
    };
  },
  methods: {
    init() {
      this.qishou = "黑";
      this.heiqiList = [];
      this.baiqiList = [];
      for (let i = 0; i < 15; i++) {
        for (let t = 0; t < 15; t++) {
          this.$refs.heng[i].children[t].children[0].className = "qizi";
        }
      }
    },
    xiazi(i, t) {
      if (
        this.heiqiList.some((item) => {
          return item[0] === i && item[1] === t;
        })
      ) {
        return;
      }
      if (
        this.baiqiList.some((item) => {
          return item[0] === i && item[1] === t;
        })
      ) {
        return;
      }
      if (this.qishou === "黑") {
        this.$refs.heng[i].children[t].children[0].className = "qizihei";
        this.heiqiList.push([i, t]);
      } else {
        this.$refs.heng[i].children[t].children[0].className = "qizibai";
        this.baiqiList.push([i, t]);
      }
      // if (this.heiqiList.length >= 4 && this.baiqiList.length >= 4) {
      this.win(i, t);
      // }
    },
    //胜利条件
    win(i, t) {
      if (this.qishou === "黑") {
        let arr = this.heiqiList
          .filter((item, index) => {
            return i === item[0];
          })
          .map((item, index) => {
            return item[1];
          })
          .sort((a, b) => {
            return a - b;
          });
        let srr = this.heiqiList
          .filter((item, index) => {
            return t === item[1];
          })
          .map((item, index) => {
            return item[0];
          })
          .sort((a, b) => {
            return a - b;
          });
        (this.isfive(srr) || this.isfive(arr)) &&
          setTimeout(() => {
            alert(`黑方胜`);
          }, 100);
        if (this.isxiefive(i, t)) {
          setTimeout(() => {
            alert(`黑方胜`);
          }, 100);
        }
        this.qishou = "白";
      } else {
        let arr = this.baiqiList
          .filter((item, index) => {
            return i === item[0];
          })
          .map((item, index) => {
            return item[1];
          })
          .sort((a, b) => {
            return a - b;
          });
        let srr = this.baiqiList
          .filter((item, index) => {
            return t === item[1];
          })
          .map((item, index) => {
            return item[0];
          })
          .sort((a, b) => {
            return a - b;
          });
        // let a = [5, 6, 7, 8, 9, 10, 11];
        // let b = [5, 6, 7, 9, 10, 11];
        // let c = [1, 2, 3, 4, 6, 7, 8, 9, 10, 11];
        // let d = [1, 2, 3, 4, 5, 6, 7, 9, 10, 11];
        (this.isfive(srr) || this.isfive(arr)) &&
          setTimeout(() => {
            alert(`白方胜`);
          }, 100);
        if (this.isxiefive(i, t)) {
          setTimeout(() => {
            alert(`白方胜`);
          }, 100);
        }
        this.qishou = "黑";
      }
    },
    //是否五连
    isfive(i) {
      //i为修改后的数组
      //传入一个数组判断是否五连
      let num = 0;
      let flag = false;
      i.forEach((item, index) => {
        if (i[index + 1] && i[index + 1] === item + 1) {
          num++;
          if (num === 4) {
            flag = true;
            return;
          }
        } else {
          num = 0;
        }
      });
      return flag;
    },
    isxiefive(i, t) {
      let flag = false;
      //枚举判断是否斜方向五连
      flag = this.zuoxiefive(i, t) || this.youxiefive(i, t);
      return flag;
    },
    //此逻辑依旧为枚举  找到左斜或右斜方向的最上点 然后向右下或左下寻找是否有五个连子  判断胜利
    zuoxiefive(i, t) {
      let flag = false;
      if (this.qishou === "黑") {
        flag = this.chazuoxiefivehei(i, t);
        if (
          this.heiqiList.some((item, index) => {
            return item[0] === i - 1 && item[1] === t - 1;
          })
        ) {
          flag = this.chazuoxiefivehei(i - 1, t - 1);
        }
        if (
          this.heiqiList.some((item, index) => {
            return item[0] === i - 1 && item[1] === t - 1;
          }) &&
          this.heiqiList.some((item, index) => {
            return item[0] === i - 2 && item[1] === t - 2;
          })
        ) {
          flag = this.chazuoxiefivehei(i - 2, t - 2);
        }
        if (
          this.heiqiList.some((item, index) => {
            return item[0] === i - 1 && item[1] === t - 1;
          }) &&
          this.heiqiList.some((item, index) => {
            return item[0] === i - 2 && item[1] === t - 2;
          }) &&
          this.heiqiList.some((item, index) => {
            return item[0] === i - 3 && item[1] === t - 3;
          })
        ) {
          flag = this.chazuoxiefivehei(i - 3, t - 3);
        }
        if (
          this.heiqiList.some((item, index) => {
            return item[0] === i - 1 && item[1] === t - 1;
          }) &&
          this.heiqiList.some((item, index) => {
            return item[0] === i - 2 && item[1] === t - 2;
          }) &&
          this.heiqiList.some((item, index) => {
            return item[0] === i - 3 && item[1] === t - 3;
          }) &&
          this.heiqiList.some((item, index) => {
            return item[0] === i - 4 && item[1] === t - 4;
          })
        ) {
          flag = true;
        }
      } else {
        flag = this.chazuoxiefivebai(i, t);
        if (
          this.baiqiList.some((item, index) => {
            return item[0] === i - 1 && item[1] === t - 1;
          })
        ) {
          flag = this.chazuoxiefivebai(i - 1, t - 1);
        }
        if (
          this.baiqiList.some((item, index) => {
            return item[0] === i - 1 && item[1] === t - 1;
          }) &&
          this.baiqiList.some((item, index) => {
            return item[0] === i - 2 && item[1] === t - 2;
          })
        ) {
          flag = this.chazuoxiefivebai(i - 2, t - 2);
        }
        if (
          this.baiqiList.some((item, index) => {
            return item[0] === i - 1 && item[1] === t - 1;
          }) &&
          this.baiqiList.some((item, index) => {
            return item[0] === i - 2 && item[1] === t - 2;
          }) &&
          this.baiqiList.some((item, index) => {
            return item[0] === i - 3 && item[1] === t - 3;
          })
        ) {
          flag = this.chazuoxiefivebai(i - 3, t - 3);
        }
        if (
          this.baiqiList.some((item, index) => {
            return item[0] === i - 1 && item[1] === t - 1;
          }) &&
          this.baiqiList.some((item, index) => {
            return item[0] === i - 2 && item[1] === t - 2;
          }) &&
          this.baiqiList.some((item, index) => {
            return item[0] === i - 3 && item[1] === t - 3;
          }) &&
          this.baiqiList.some((item, index) => {
            return item[0] === i - 4 && item[1] === t - 4;
          })
        ) {
          flag = true;
        }
      }

      return flag;
    },

    chazuoxiefivehei(i, t) {
      let flag = false;
      if (
        this.heiqiList.some((item, index) => {
          return item[0] === i + 1 && item[1] === t + 1;
        }) &&
        this.heiqiList.some((item, index) => {
          return item[0] === i + 2 && item[1] === t + 2;
        }) &&
        this.heiqiList.some((item, index) => {
          return item[0] === i + 3 && item[1] === t + 3;
        }) &&
        this.heiqiList.some((item, index) => {
          return item[0] === i + 4 && item[1] === t + 4;
        })
      ) {
        flag = true;
      }
      return flag;
    },
    chazuoxiefivebai(i, t) {
      let flag = false;
      if (
        this.baiqiList.some((item, index) => {
          return item[0] === i + 1 && item[1] === t + 1;
        }) &&
        this.baiqiList.some((item, index) => {
          return item[0] === i + 2 && item[1] === t + 2;
        }) &&
        this.baiqiList.some((item, index) => {
          return item[0] === i + 3 && item[1] === t + 3;
        }) &&
        this.baiqiList.some((item, index) => {
          return item[0] === i + 4 && item[1] === t + 4;
        })
      ) {
        flag = true;
      }
      return flag;
    },
    youxiefive(i, t) {
      let flag = false;
      if (this.qishou === "黑") {
        flag = this.chayouxiefivehei(i, t);
        if (
          this.heiqiList.some((item, index) => {
            return item[0] === i - 1 && item[1] === t + 1;
          })
        ) {
          flag = this.chayouxiefivehei(i - 1, t + 1);
        }
        if (
          this.heiqiList.some((item, index) => {
            return item[0] === i - 1 && item[1] === t + 1;
          }) &&
          this.heiqiList.some((item, index) => {
            return item[0] === i - 2 && item[1] === t + 2;
          })
        ) {
          flag = this.chayouxiefivehei(i - 2, t + 2);
        }
        if (
          this.heiqiList.some((item, index) => {
            return item[0] === i - 1 && item[1] === t + 1;
          }) &&
          this.heiqiList.some((item, index) => {
            return item[0] === i - 2 && item[1] === t + 2;
          }) &&
          this.heiqiList.some((item, index) => {
            return item[0] === i - 3 && item[1] === t + 3;
          })
        ) {
          flag = this.chayouxiefivehei(i - 3, t + 3);
        }
        if (
          this.heiqiList.some((item, index) => {
            return item[0] === i - 1 && item[1] === t + 1;
          }) &&
          this.heiqiList.some((item, index) => {
            return item[0] === i - 2 && item[1] === t + 2;
          }) &&
          this.heiqiList.some((item, index) => {
            return item[0] === i - 3 && item[1] === t + 3;
          }) &&
          this.heiqiList.some((item, index) => {
            return item[0] === i - 4 && item[1] === t + 4;
          })
        ) {
          flag = true;
        }
      } else {
        flag = this.chayouxiefivebai(i, t);
        if (
          this.baiqiList.some((item, index) => {
            return item[0] === i - 1 && item[1] === t + 1;
          })
        ) {
          flag = this.chayouxiefivebai(i - 1, t + 1);
        }
        if (
          this.baiqiList.some((item, index) => {
            return item[0] === i - 1 && item[1] === t + 1;
          }) &&
          this.baiqiList.some((item, index) => {
            return item[0] === i - 2 && item[1] === t + 2;
          })
        ) {
          flag = this.chayouxiefivebai(i - 2, t + 2);
        }
        if (
          this.baiqiList.some((item, index) => {
            return item[0] === i - 1 && item[1] === t + 1;
          }) &&
          this.baiqiList.some((item, index) => {
            return item[0] === i - 2 && item[1] === t + 2;
          }) &&
          this.baiqiList.some((item, index) => {
            return item[0] === i - 3 && item[1] === t + 3;
          })
        ) {
          flag = this.chayouxiefivebai(i - 3, t + 3);
        }
        if (
          this.baiqiList.some((item, index) => {
            return item[0] === i - 1 && item[1] === t + 1;
          }) &&
          this.baiqiList.some((item, index) => {
            return item[0] === i - 2 && item[1] === t + 2;
          }) &&
          this.baiqiList.some((item, index) => {
            return item[0] === i - 3 && item[1] === t + 3;
          }) &&
          this.baiqiList.some((item, index) => {
            return item[0] === i - 4 && item[1] === t + 4;
          })
        ) {
          flag = true;
        }
      }
      return flag;
    },
    chayouxiefivehei(i, t) {
      let flag = false;
      if (
        this.heiqiList.some((item, index) => {
          return item[0] === i + 1 && item[1] === t - 1;
        }) &&
        this.heiqiList.some((item, index) => {
          return item[0] === i + 2 && item[1] === t - 2;
        }) &&
        this.heiqiList.some((item, index) => {
          return item[0] === i + 3 && item[1] === t - 3;
        }) &&
        this.heiqiList.some((item, index) => {
          return item[0] === i + 4 && item[1] === t - 4;
        })
      ) {
        flag = true;
      }
      return flag;
    },
    chayouxiefivebai(i, t) {
      let flag = false;
      if (
        this.baiqiList.some((item, index) => {
          return item[0] === i + 1 && item[1] === t - 1;
        }) &&
        this.baiqiList.some((item, index) => {
          return item[0] === i + 2 && item[1] === t - 2;
        }) &&
        this.baiqiList.some((item, index) => {
          return item[0] === i + 3 && item[1] === t - 3;
        }) &&
        this.baiqiList.some((item, index) => {
          return item[0] === i + 4 && item[1] === t - 4;
        })
      ) {
        flag = true;
      }
      return flag;
    },
  },
};
</script>
<style>
.ditu {
  width: 600px;
  /* border: 1px solid #000; */
  box-sizing: border-box;
  height: 600px;
  background-color: rgb(214, 158, 37);
}
.qizi {
  display: inline-block;
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  top: 4px;
  left: 4px;
  z-index: 20;
}
.qizibai {
  display: inline-block;
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  top: 4px;
  left: 4px;
  background: linear-gradient(145deg, #ffffff, #d6d6d6);
  box-shadow: 2px 2px 5px #333, -2px -2px 5px #111;
  z-index: 20;
}
.qizihei {
  display: inline-block;
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  top: 4px;
  left: 4px;
  background: linear-gradient(145deg, #000000, #5e5e5e);
  box-shadow: 2px 2px 5px #333, -2px -2px 5px #111;
  z-index: 20;
}
.heng {
  width: 600px;
  height: 40px;
}
.shu {
  width: 40px;
  height: 40px;
  /* border: 1px solid #000; */
  box-sizing: border-box;
  display: inline-block;
  position: relative;
}
.shubai {
  width: 40px;
  height: 40px;
  /* border: 1px solid #000; */
  box-sizing: border-box;
  display: inline-block;
}
.shubai::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
}

.zhong {
  position: relative;
}
.zhong::after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 2px;
  background-color: #000;
  top: 19px;
  position: absolute;
}
.zhong::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 40px;
  background-color: #000;
  left: 19px;
  position: absolute;
}
.zuoshang {
  position: relative;
}
.zuoshang::after {
  content: "";
  display: inline-block;
  width: 21px;
  height: 2px;
  background-color: #000;
  left: 19px;
  top: 19px;
  position: absolute;
}
.zuoshang::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 21px;
  background-color: #000;
  top: 19px;
  left: 19px;
  position: absolute;
}
.youshang {
  position: relative;
}
.youshang::after {
  content: "";
  display: inline-block;
  width: 21px;
  height: 2px;
  background-color: #000;
  top: 19px;
  position: absolute;
}
.youshang::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 21px;
  background-color: #000;
  top: 19px;
  left: 19px;
  position: absolute;
}
.zuoxia {
  position: relative;
}
.zuoxia::after {
  content: "";
  display: inline-block;
  width: 21px;
  height: 2px;
  background-color: #000;
  top: 19px;
  left: 19px;
  position: absolute;
}
.zuoxia::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 21px;
  background-color: #000;
  position: absolute;
}
.youxia {
  position: relative;
}
.youxia::after {
  content: "";
  display: inline-block;
  width: 21px;
  height: 2px;
  background-color: #000;
  top: 19px;
  position: absolute;
}
.youxia::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 21px;
  background-color: #000;
  position: absolute;
}
.shang {
  position: relative;
}
.shang::after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 2px;
  background-color: #000;
  top: 19px;
  position: absolute;
}
.shang::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 21px;
  background-color: #000;
  top: 19px;
  position: absolute;
}
.you {
  position: relative;
}
.you::after {
  content: "";
  display: inline-block;
  width: 21px;
  height: 2px;
  background-color: #000;
  top: 19px;
  position: absolute;
}
.you::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 40px;
  background-color: #000;
  left: 19px;
  position: absolute;
}
.xia {
  position: relative;
}
.xia::after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 2px;
  background-color: #000;
  top: 19px;
  position: absolute;
}
.xia::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 21px;
  background-color: #000;
  left: 19px;
  position: absolute;
}
.zuo {
  position: relative;
}
.zuo::after {
  content: "";
  display: inline-block;
  width: 21px;
  height: 2px;
  background-color: #000;
  top: 19px;
  left: 19px;
  position: absolute;
}
.zuo::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 40px;
  background-color: #000;
  left: 19px;
  position: absolute;
}
</style>
