使用Vue手写阉割版的五字棋(仅供参考思路和语法，本人不太会玩五子棋)

先上截图

<template>
  <div class="wuziqi">
    <div class="wuziqi-wrap" :class="gameOver && 'click-banned'">
      <div class="wuziqi-row" v-for="(item, index) in list" :key="index">
        <div
          class="wuziqi-cell"
          v-for="(subItem, subIndex) in item"
          :key="'' + index + subIndex"
          :class="subItem !== '' && 'ban-style'"
          @click.stop="cellClickHander(index, subIndex)"
        >
          <template v-if="subItem !== ''">
            <span
              class="one-qi-zi"
              :style="{ backgroundColor: subItem === 1 ? 'white' : 'black' }"
            ></span>
          </template>
        </div>
      </div>
    </div>
    <template v-if="!gameOver">
      当前落棋方
      <div class="current-person">
        <span
          class="one-qi-zi"
          :style="{ backgroundColor: initQi === true ? 'white' : 'black' }"
        ></span>
      </div>
    </template>
    <template v-else>
      获胜方
      <div class="current-person">
        <span
          class="one-qi-zi"
          :style="{ backgroundColor: winner === 1 ? 'white' : 'black' }"
        ></span>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
        // 棋子界面渲染数据
      list: [
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""],
      ],
      initQi: true,      //当前下棋方 true=白方 false=黑方
      gameOver: false,   //游戏是否已结束 
      winner: ''    //赢家 1=白方， 0=黑言
    };
  },
  methods: {
    //   格子点击事件，也就是下棋
    cellClickHander(index, subIndex) {
      if (this.gameOver) {
        alert('本轮游戏已结束！');
        return;
      }
      if (this.list[index][subIndex] === "") {
        this.list[index][subIndex] = Number(this.initQi);
        this.initQi = !this.initQi;
        this.checkHasWinner(index, subIndex);
      }
    },
    // 判断是否有赢家产生
    checkHasWinner(oneLevelIndex, twoLevelIndex) {
      // 横向判断是否有赢家产生
      for (let index = 0; index < 4; index++) {
        const arr = [];
        for (let j = 0; j < 5; j++) {
          arr.push(this.list[oneLevelIndex][index + j]);
        }
        if (arr.every((i) => i === 1)) {
          this.gameOver = true;
          this.winner = 1
          alert("白方已获胜！");
        }
        if (arr.every((i) => i === 0)) {
          this.gameOver = true;
          this.winner = 0
          alert("黑方已获胜！");
        }
      }
      // 纵向判断是否有赢家产生
      const arrVertical = this.list.map((i) => i[twoLevelIndex]);
      for (let index = 0; index < 4; index++) {
        const arr = [];
        for (let j = 0; j < 5; j++) {
          arr.push(arrVertical[index + j]);
        }
        if (arr.every((i) => i === 1)) {
          this.gameOver = true;
          this.winner = 1
          alert("白方已获胜！");
        }
        if (arr.every((i) => i === 0)) {
          this.gameOver = true;
          this.winner = 0
          alert("黑方已获胜！");
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.wuziqi {
  width: fit-content;
  height: fit-content;
  background-color: lightgray;
  margin: 0 auto;
  padding: 50px;
  display: flex;
  flex-wrap: wrap;
  .wuziqi-wrap {
    &.click-banned {
      pointer-events: none;
    }
    .wuziqi-row {
      display: flex;
      .wuziqi-cell {
        width: 40px;
        height: 40px;
        border: 1px solid black;
        position: relative;
        margin-right: 4px;
        margin-bottom: 4px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        &:nth-child(-n + 8) {
          border: 1px solid black;
        }
        &::before {
          content: "";
          width: 100%;
          height: 1px;
          background-color: #b5b5b5;
          position: absolute;
          top: 50%;
          left: 0;
          z-index: -1;
        }
        &::after {
          content: "";
          width: 1px;
          height: 100%;
          background-color: #b5b5b5;
          position: absolute;
          left: 50%;
          top: 0;
          z-index: -1;
        }
        &.ban-style {
          cursor: not-allowed;
        }
      }
    }
  }

  .one-qi-zi {
    width: 55%;
    height: 55%;
    // border: 1px solid;
    display: inline-block;
    border-radius: 50%;
  }
  .current-person {
    width: 40px;
    height: 40px;
  }
}
</style>